Bootstrap框架的了解和使用之栅格系统

前言

Bootstrap

　　　Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

　　Bootstrap框架使用方便，有一部分是因为它的网格布局，可以更快的制作响应式布局和媒体查询，减少时间。今天就带大家看一看网格布局如何使用。

1.1栅格系统的工作原理

1、行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
2、使用行来创建列的水平组。
3、内容应该放置在列内，且唯有列可以是行的直接子元素。
4、预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
5、列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
6、网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

1.2媒体查询

媒体查询

　　媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

比如我们平时在做媒体查询时，会在CSS 样式中设置相应的屏幕宽度既内容所占的大小。看下面例子：

//在屏幕宽度小于768PX时对应的Css样式
@media screen and (max-width: 768px) {
    //css样式
}
//在屏幕宽度大于768PX时对应的Css样式
@media screen and (min-width: 768px) {
    //css样式
}

　　对于Bootstrap的媒体查询针对常用的几个屏宽，设置了相应的Class规则，如下图

1.3示例

　　在上面我提到Bootstrap每行平均分成12列，来对内容划分，使用相应的Class规则对添加内容进行设置。我们做一个在屏幕宽度是970px以上内容内容各占三分之一，到992px以下内容占宽度的百分之百。如下示例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="" class="container-fluid">
            <div class="row">
                <div class="col-md-4" style="background-color: red; height: 100px;">第一个</div>
                <div class="col-md-4" style="background-color: green; height: 100px;">第二个</div>
                <div class="col-md-4" style="background-color: blue; height: 100px;">第三个</div>
            </div>
        </div>
 
        <script src="js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

970px变化

　　如上图所看，在我们将浏览器的宽度缩小的时候，在缩到浏览器宽度到992px以下时，我们所做的div会自动将宽度扩大到100%，并依次向下排列开来。而你不用进行任何对Css的设置，只需要将所有内容包在class名为"row"的div中，并对其内容设置相应的class名字。

　　如果你想添加更多的屏幕调整的变化，你可以继续为展示的内容添加相应的Class规则，如下示例

            <div class="row">
                <div class="col-md-4 col-sm-6" style="background-color: red; height: 100px;">第一个</div>
                <div class="col-md-4 col-sm-6" style="background-color: green; height: 100px;">第二个</div>
                <div class="col-md-4 col-sm-12" style="background-color: blue; height: 100px;">第三个</div>
            </div>

　　如上图所看，我给每个div添加了class：col-md-4，是为了在992px宽度以上内容以平分3份显示，为第一和第二个div添加class：col-sm-6，是让这两个div在浏览器宽度在992px和768px时，内容各占一半，第三个div的class：col-sm-12，是让这个div在992px和768px时，内容宽度占100%。当小于768px时，如没有添加相应的class规则，默认内容占宽度的100%。

1.4其他属性

1-4-1：列偏移

　　偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。如下示例。

            <div class="row">
                <div class="col-md-4 " style="background-color: red; height: 100px;">第一个</div>
                <div class="col-md-4 col-md-offset-4" style="background-color: green; height: 100px;">第二个</div>
                <div class="col-md-4 col-md-offset-2" style="background-color: blue; height: 100px;">第三个</div>
                <div class="col-md-4 col-md-offset-2" style="background-color: orange; height: 100px;">第四个</div>
            </div>

            <div class="row">
                <div class="col-md-4 " style="background-color: red; height: 100px;">第一个</div>
                <div class="col-md-6 col-md-offset-4" style="background-color: green; height: 100px;">第二个</div>
                <div class="col-md-4 col-md-offset-2" style="background-color: blue; height: 100px;">第三个</div>
                <div class="col-md-4 col-md-offset-4" style="background-color: orange; height: 100px;">第四个</div>
            </div>

　　如上所示：我为第二个div添加class：col-md-offset-4，它向右移了4列距离，为第三个和第四个添加class：col-md-offset-2，第三个和第四都向右移了2列距离。(利用列偏移可以使内容居中显示，或居右显示)

注意：如果使用列偏移每行的内容所占列数综合不要超过12，否则将会被挤下去。如上的第二个示例。

1-4-2：嵌套列

　　为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列，就是在栅格中在加一个栅格）。如下示例。

　　　　　　<div class="row">
                <div class="col-md-8 " style="background-color: red; height: 200px;">第一个
                    <div class="row">
                        <div class="col-md-6" style="background-color: green; height: 100px;">第二个</div>
                　　　　 <div class="col-md-4" style="background-color: blue; height: 100px;">第三个</div>
                    </div>
                </div>
            </div>

　　如上所示我将大div的宽度占浏览器可用宽度的8列，其中里面两个div占外div中的6列和4列。

1-4-3：列排序

　　Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。（类似于弹性布局中的设置单个项目序号的order属性）

            <div class="row">
              <div class="col-md-9 " style="background-color: red; height: 100px;">左div</div>
              <div class="col-md-3 " style="background-color: orange; height: 100px;">右div</div>
            </div>

            <div class="row">
              <div class="col-md-9 col-md-push-3" style="background-color: red; height: 100px;">左div</div>
              <div class="col-md-3 col-md-pull-9" style="background-color: orange; height: 100px;">右div</div>
            </div>

　　如上所示，在我没有添加push和pull的class规则，div的排序和显示没有变化，当我添加了push和pull的class规则，将这两个div的排序互换，从而不用改变div其他设置。可以由于对重要内容始终突出显示的效果。

谢谢大家阅读，希望对大家使用Bootstrap的栅格系统有帮助。顺便点赞，打赏，丢硬币，丢香蕉给我哦。