响应式布局---3. Bootstrap栅格系统

1.1 栅格系统介绍

利用Bootstrap做响应式内部采取的是一种叫做栅格系统的方式。
栅格系统：英文名girdsystems,又称网格系统，它是指将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局。
与rem划分等份数不同的是：rem响应式布局中是将整个屏幕划分成若干等分，而栅格系统是将页面内容(container)划分成若干等份。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
Bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不一样，我们再把container划分为12等份。
Bootstrap也采用了normalize.css的初始化，以后在引用Bootstrap的时候就不再需要另外引入normalize.css文件。
https://v3.bootcss.com/css/

1.2 栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
体会Bootstrap中文网：https://www.bootcss.com/ 的以下部分的伸缩布局：

实现

行row必须放到container布局容器里面
我们实现列的平均分配需要给列添加类前缀
xs-extral small:超小；sm-small:小；md-medium：中等；lg-lage:大；
列column大于12，多余的列所在元素将被作为一个整体另起一行排列
每一列默认有15px的padding
可以同时为一列指定多个设备的类名，以便划分不同的份数，例如：class="col-md-4 col-sm-6"

举例1：

<body>
    <div class="container">
        <p> 当孩子的份数相加等于12 则孩子可以占满整个container宽度</p>
        <div class="row">
            <!-- 3+3+3+3=12 -->
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
        <div class="row">
            <!-- 6+2+2+2=12 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-2">4</div>
        </div>

        <p> 当孩子的份数相加小于12 则孩子可以占不满整个container宽度</p>
        <div class="row">
            <!-- 6+2+2+1=11 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <p>当孩子的份数相加大于12 则多出的那一列另起一行显示</p>
        <div class="row">
            <!-- 6+2+2+3=13 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-2">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
        解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        解决ie9以下浏览器对css3 Media Query 的不识别问题
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 一定不要忘记引入bootstrap的样式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        [class^="col"] {
            border: 1px solid #ccc;
        }
    </style>
</head>

下次看第10节