Bootstrap栅格化系统

Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例的思想，实现响应式布局。此方法论下的实现可以兼容较多种比例的页面布局，命名比较规范，多列布局页面开发值得借鉴；

栅格化系统的工作规范

（1）.container(.container-fluid)>.row>.column;采用容器内行(row)列(column)布局方式，.column必须包含在.row中，.row必须包含在.container中；.container可以包含多个.row，.row可以包含多个.column;

布局形式

（2）展示的内容应当放置于.column类中，并且只有.column可以作为.row的子元素;
(3)使用类似于.row .col-xs-4等预定义类，快速创建栅格化布局；
（4）栅格类适用于屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格化类，比如.col-md-*在.container-fludid宽度≥992px时生效；

媒介分类

Bootstrap将屏幕大小分为4类

/* 屏幕大小小于768px*/
@media (max-width: 767px) { ... }

/*屏幕最小宽度为768px*/
@media (min-width: 768px) { ... }

/*屏幕最小宽度为992px*/
@media (min-width: 992px) { ... }

/*屏幕最小宽度为1200px*/
@media (min-width: 1200px) { ... }

代表屏幕大小的几个缩写形式：
xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px；
sm：small 窄屏幕，默认指浏览器像素宽度大于等于768px，通常是平板宽度；
md：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px，通常是桌面显示器，略缩小的情况；
lg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px。

实例1：列宽比例展示展示

代码如下：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">

        .row {
            margin-bottom: 20px;
        }

        .row div {
            min-height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .row1 div {
            border: 1px solid #ff0000;
        }

        .row2 div {
            border: 1px solid #00ff00;
        }

        .row3 div {
            border: 1px solid #0000ff;
        }

        .row3 div {
            border: 1px solid #ccad00;
        }

        .row4 div {
            border: 1px solid #ffaf00;
        }
    </style>

</head>
<body>
<div class="row row1">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row row2">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row row3">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row row4">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>
</body>
</html>

预期结果：
.col--1样式在控制范围内会使其控制块宽度为父容器的1/12;
.col--8样式在控制范围内会使其控制块宽度为父容器的8/12;
.col--4样式在控制范围内会使其控制块宽度为父容器的4/12;
.col--6样式在控制范围内会使其控制块宽度为父容器的6/12;

实际运行结果：

col布局比例

实例1：列宽比例展示展示

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">

        .row {
            margin-bottom: 20px;
        }

        .row div {
            min-height: 150px;
            text-align: center;
            line-height: 40px;
        }

        .row1 div {
            border: 1px solid #df24b1;
        }

        #doc-width-info {
            color: #ffaf00;
            font-size: 25px;
            text-align: center;
        }

    </style>

</head>
<body>
<div id="doc-width-info"></div>
<div class="container-fluid">
    <div class="row row1">
        <div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
        <div class="col-sm-4 col-md-3 col-lg-2">.col-sm-4 .col-md-3 .col-lg-2 </div>
        <div class="col-sm-4 col-md-3 col-lg-8">.col-sm-4 .col-md-3 .col-lg-8 </div>
        <div class="col-sm-2 col-md-3 col-lg-1">.col-sm-2 .col-md-3 .col-lg-1 </div>
    </div>
</div>
</body>
<script>
    var divDocWith = document.getElementById("doc-width-info");
    var showDocWidth = function () {
        divDocWith.innerHTML = "文档宽度:" + document.body.scrollWidth + 'px';
    }
    window.onload = function () {
        showDocWidth();
    }
    window.onresize = function () {
        showDocWidth();
    }
</script>
</html>

预期结果：
（1）container≥1200px(lg):4列布局1：2：8：1；
（2）container≥992px && container＜1200px(md)：3:3:3:3
（3）container≥768px && container＜991px(sm)：2:4:4:2
（3）container＜768px(xs)：div 默认display:block

实际运行结果：