介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架，它是在GitHub上开源的知名前端框架，基于 HTML、CSS、JAVASCRIPT 。

Bootstrap框架包含了贯穿于整个库的移动设备优先的样式，支持几乎所有的主流浏览器，同时Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机，在不同尺寸的终端显示不同的页面布局。

因此，Bootstrap的应用极为广泛。

   

使用

如果习惯看英文文档，可以查看Bootstrap官网。

如果习惯看中文文档，可以查看Bootstrap中文官网，

目前最新为4.5版本，不过应用最广也比较稳定的是3.X版本，因此推荐使用3.X版本。

可以将Bootstrap的css文件和js文件下载到本地进行引用，但是这样在网页加载时将会消耗更多服务器带宽，在服务请求量较大时还是使用Staticfile CDN、BootCDN等引用吧。

/* jquery */
<script type="text/javascript" src="js/jquery.js"></script>

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

/* js */
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

.min的文件相比普通文件功能相同，只是为缩小文件尺寸降低带宽消耗而精简了格式符号和注释等等，因此推荐使用.min文件。

 

响应式设计

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。

例如，同一个网站的主页在电脑上和手机上打开是两种不同的布局，电脑上的内容一般较多，横向元素较为密集，手机端内容较少，页面元素基本是纵向排列，对于窄屏幕和滑动点击等操作提供更好的使用体验。

工作原理就是使用媒体查询找到当前设备的像素宽度，通过改变布局容器的大小，再改变布局容器里面子级元素的排列方式和大小。

响应式尺寸划分

  • 超小屏幕（手机，小于768px）：设置宽度为100%
  • 小屏幕（平板，大于等于768px）：设置宽度为750px
  • 中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
  • 大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px

一个经典响应式代码

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }

        /* 超小屏 */
        @media screen and (max-width: 767px) {
            .container{
                width: 100%;
            }
        }
        /* 小屏 */
        @media screen and (min-width: 768px) {
            .container{
                width: 750px;
            }
        }
        /* 中等屏 */
        @media screen and (min-width: 992px) {
            .container{
                width: 970px;
            }
        }
        /* 大屏 */
        @media screen and (min-width: 1200px) {
            .container{
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="container"></div>

效果如下

 

Bootstrap响应式布局

Bootstrap的布局容器有两种，一种是container类，适用于响应式布局。另一种是container-fluid类，100%宽度横向占满，适合移动端开发（当然也可以和响应式布局套用）。

Bootstrap在布局上特点是它的栅格系统，将页面布局划分为等宽的列（自动分为最多12列），通过定义网页元素的列数来确定网页元素的动态宽度。

栅格系统就这样通过一系列的行（row）与列（column）的组合和嵌套来创建页面布局的，最后再把网页内容填充到这个相应的栅格中。

列（column）通过类前缀确定宽度划分，普通划分的类前缀是col-列数，适配不同尺寸屏幕的类前缀如下图所示。

  • 行（row）必须放到container布局容器里面
  • 要实现列（column）的平均划分，需要给列添加类前缀
  • 列（column）大于12，多余的列将作为整体另起一行排列，小于12则左对齐
  • 每一列默认有左右15px的padding
  • 响应式布局需要为一列指定多个尺寸的类名，以便在不同屏幕下划分不同份数

另外需要注意，以上都是Bootstrap3.X中的配置。在Bootstrap4.X中，共有五种不同大小的类前缀，多出的是col-xl-（超大屏幕），超小屏幕则为col-。

 

使用普通划分的非响应式布局

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }
        
        /* 所有col开头的类 */
        [class^="col"]{
            border: 1px solid #1b1e21;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-3">1</div>
            <div class="col-3">2</div>
            <div class="col-3">3</div>
            <div class="col-3">4</div>
        </div>
    </div>
</body>

效果如下

需要说明的是，适配不同尺寸的类前缀是向上兼容的，也就是说，如果上面的col-3换成col-sm-3（小屏幕），那么在中等屏幕和大屏幕上也是占了3排，而在超小屏幕中则会变成横向占满。

Bootstrap4.X中将超小屏幕的col-xs-直接换成了col-也就可以理解了。

 

适配不同屏幕大小的响应式布局

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }
        /* 所有col开头的类 */
        [class^="col"]{
            border: 1px solid #1b1e21;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
        </div>
    </div>
</body>

效果如下

 

栅格嵌套

在使用Bootstrap进行布局时，经常需要通过栅格嵌套来在某一列中细分成更小的列放置不同的内容，此时就需要用到嵌套。

嵌套需要注意不要缺少row这个元素，如果嵌套有问题可以再嵌套上container元素。

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }
        /* 所有col开头的类 */
        [class^="col"]{
            border: 1px solid #1b1e21;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-sm-4">1-1</div>
                    <div class="col-sm-4">1-2</div>
                    <div class="col-sm-4">1-3</div>
                </div>
            </div>
            <div class="col-lg-6">2</div>
            <div class="col-lg-2">3</div>
        </div>
    </div>
</body>

效果如下

 

栅格偏移

栅格排列时默认是没有空隙的，如果需要小的空隙可以通过margin等添加外边距，如果需要两列之间留出以列为单位的较大空间就可以使用栅格偏移了。

另外需要注意的是，在Bootstrap不同版本中，偏移的类前缀稍有区别，Bootstrap3.X中是col-offset-列数，Bootstrap4.X中是offset-列数。

可以看出要想横向填满container，那么所有列数+所有偏移列数=12，如果大于12，多出的则另起一行。

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }
        /* 所有col开头的类 */
        [class^="col"]{
            border: 1px solid #1b1e21;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-2">1</div>
            <div class="col-lg-2 col-lg-offset-2">2</div>
            <div class="col-lg-2 col-lg-offset-4">3</div>
        </div>
    </div>
</body>

效果如下

 

栅格推拉

相比起栅格偏移，栅格推拉同样能够让列横向移动，但区别是很大的。

偏移是通过外边框（margin）实现的，只能向右偏移，会将相邻列向右侧挤压。

推拉是通过定位（left，right）实现的，可以左右偏移，会与相邻列重合。

需要注意的是，推拉这个功能是基于float布局，而Bootstrap4.X中使用的是flex布局，因此推拉这个功能只能用于Bootstrap3.X。

推拉的类前缀是col-pull-列数（左移）和col-push-列数（右移）。

<head>
    <style>
        .container {
            height: 130px;
            background-color: grey;
            margin: 0  auto;
            padding: 0;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-lg-push-9 " style="border: 1px solid red">1</div>
            <div class="col-lg-6 " style="border: 2px solid blue">2</div>
            <div class="col-lg-3 col-lg-pull-9 " style="border: 3px solid green">3</div>
        </div>
    </div>
</body>

效果如下

可以看到，原本页面代码中后面的3元素现在在网页中显示到了2的前方。

这个特性可以以一种顺序定义列，而以另一种顺序进行显示。

例如页面有两侧边栏和中间内容栏时，将内容栏优先定义，然后用推拉来与左侧边栏交换位置显示。

这样既不影响页面展示，搜索引擎还优先搜索到内容栏的有效内容，对于SEO很友好。

 

Bootstrap响应式实用工具

在做响应式布局时，大小屏幕切换，经常会导致大屏下在一排的元素在小屏状态下被挤压到下一排，而很多时候部分元素内容在小屏时是没有用处的。

这种时候就可以使用Bootstrap响应式工具进行动态的显示和隐藏，从而在大屏下功能齐全，内容丰富，小屏下内容精简，界面简洁。

只要添加相应的类前缀即可实现在相应尺寸屏幕下隐藏，这里就不再演示了。

 

Bootstrap其他

Bootstrap除了用来布局，它本身还自带了很多标准样式（包括按钮、菜单、输入框等等）和字体图标可供使用。中文官网Bootstrap3.X    英文官网Bootstrap4.X

使用方法也很方便，文档中已经提供了示例，直接拷贝就可以使用。

 

使用这个框架可以避免自己造轮子，快速搭建起一个简洁好看的页面，值得推荐。

 

每个人身上都有太阳，

只是要让他发光。

——苏格拉底