Bootstrap--全局CSS样式之栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

一，简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

二，栅格参数

可以通过下表了解栅格系统的参数

三，实例

（1）从堆叠到水平排列

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

<div class="container">        <div class="row">            <div class="row">                <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>

运行的结果如下所示

当然在手机里看到的会是另一种效果,这里就不使用手机了,最简单的测试方式,就是将浏览器窗口缩小到手机屏幕大小,就可以实现手机浏览相同的效果,如图

使用这种方式一行最多只能显示12列,多的列将会在下一行显示,如下面的例子

  <div class="container">        <div class="row">            <div class="row">                <div class="col-md-1">1</div>                <div class="col-md-1">2</div>                <div class="col-md-1">3</div>                <div class="col-md-1">4</div>                <div class="col-md-1">5</div>                <div class="col-md-1">6</div>                <div class="col-md-1">7</div>                <div class="col-md-1">8</div>                <div class="col-md-1">9</div>                <div class="col-md-1">10</div>                <div class="col-md-1">11</div>                <div class="col-md-1">12</div>                <div class="col-md-1">13</div>            </div></div>

结果

当我们使用 .col-md-*属性的时候,后面的数字代表了我们想要这1列相对于12列中占几列，如下例子：

  <div class="row">                <div class="col-md-9">11</div>                <div class="col-md-3">12</div>            </div>

（2）移动设备与桌面屏幕不同显示

当我们想让移动设备和我们使用计算机屏幕显示的结果不同时，我们可以使用适合移动屏幕的属性来设置。

例如我想让一行在计算机浏览器中看到的是 1:1的比例，而在手机屏幕看到的是 9:3的比例，如下所示：