了解BootStrap

最新推荐文章于 2022-01-17 08:56:05 发布

乞力马扎罗的雪CYF

最新推荐文章于 2022-01-17 08:56:05 发布

阅读量2k

点赞数 1

分类专栏：计算机杂谈文章标签： html5 bootstrap 响应式框架

本文链接：https://blog.csdn.net/chenyufeng1991/article/details/48790219

版权

本文介绍了BootStrap这一前端开发框架，强调其快速、简单和灵活的特性，特别是响应式布局和跨平台优势。通过下载BootStrap官方资源，将bootstrap.min.css引入项目，并创建style.css和HTML文件，利用提供的示例代码实现响应式布局。

摘要由CSDN通过智能技术生成

1.了解Bootstrap:

简洁，直观，强悍的前端开发框架，让web开发更迅速，简单。

2.优点：

快速，简单，灵活的栅格系统，小而强大，响应式布局，跨平台等。

3.下载

登陆BootStrap的官方网站下载： http://getbootstrap.com/ 。

下面使用Bootstrap官方提供的模板来设计一个响应式布局。

（1）从下载的BootStrap中找出bootstrap.min.css文件复制到项目中。

（2）新建一个style.css文件，实现代码如下：

.row{

    margin-bottom: 20px;


}

.row .row{

    margin-top: 10px;
    margin-bottom: 0px;

}

[class*="col-"]{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    background-color: rgba(86,61,124,.15);
    border: 1px solid #dddddd;
    border: 1px solid rgba(86, 61, 214,.2);

}

（3）新建一个HTML文件，实现代码如下，其中的代码都是Bootstrap官网提供的示例代码，可以用起来非常的方便。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="style.css" type="text/css" rel="stylesheet">

</head>
<body>

<div class="container">

<!--导航栏-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle