Bootstrap框架的要点--栅格系统
不同的公司要求使用框架有所不同，而Bootstrap框架在工作中使用频次较高，其中栅格系统在这一框架中的地位不容小觑，下面我们开始聊聊它吧。
简单介绍：
Bootstrap提供了一套响应式、移动设备优先的栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，栅格系统用于通过一系列的行或列的组合来创建页面布局，而你的内容就放在这些创建好的布局中。这一框架的使用主要是合理且灵活的使用类，因此笔者在下文中聊的大部分是如果给元素加上相应的类。
聊聊各种屏幕：在讲其他的之前，我们有必要先回忆下各种屏幕，暂且将其分为4类，它们分别是超小屏幕，比如手机，一般小于768px;小屏幕，比如平板，一般大于768px;中等屏幕，比如桌面显示器,大于992px;还有就是大于1200px 的大屏幕，比如大桌面显示器。
栅格参数：
在超小屏幕上总是水平排列，这时候你要给它加上的类的前缀是.col-xs-；而除此之外的屏幕开始时堆叠在一起的，当大于这些阈值时将变成水平排列。小屏幕的类前缀是.col-sm-,中等屏幕的类前缀是.col-md-,大屏幕的类前缀是.col-lg-。以上各种的槽宽都是30px(每列左右均有15px),都可偏移(offset)、嵌套、列排序，这些笔者将在下文中一一解释。
实例：布局的变化过程
顺便提一下，写Bootstrap框架式一定不要忘记引用以下3个文件，首先你需要把这3个提前下载好，由于每个人的存放路径不同，在此贴出图片，具体引用情况因每个人的存放路径而异。
(1) Bootstrap层叠样式表
(2) jQuery库，这里只是加载一个jQuery库就可以了，你也可以引用其他版本的
(3) 加载Bootstrap的核心JS库
代码主要部分如下，记住所有的列都必须写在行(.row)内！
<div class="container bg-info"> <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 class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <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"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div>
你将得到如下页面：
通过缩放屏幕你可以看到布局由堆叠到对平排列。
列偏移：使用.col-md-offset-*的类使该列向右偏移
代码演示如下：
<div class="container bg-info"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-1">.col-md-6 .col-md-offset-3</div> </div> </div>
你将看到如下页面：
你可以改变.col-md-offset-*中的*来感受下偏移的效果
嵌套列：通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的.col-sm-* 元素内，记住！被嵌套的行的列数不要超过12
代码演示如下：
<div class="container bg-info"> <div class="row"> <div class="col-sm-9"> Lever 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Lever 2:.col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Lever 2:.col-xs-4 .col-sm-6 </div> </div> </div> </div> </div>
你将看到如下页面
Lever 2的元素总宽度是继承Lever1:.col-sm-9的，以此为基础来把1行再化成12列的。
列排序：用.col-md-push-*和.col-md-pull-*来改变列的顺序，我们从字面翻译来就可以很轻松的来理解这两个类的含义，push就是推，把这个东西从原来的位置推走，就是把它推到后面去了，pull就是拉，把这个东西拉过来，意思就是把它拉倒前面
下面来看下代码演示：
<div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> </div>
你就可以看到如下页面：
我们在代码里明明是把.col-md-9 .col-md-push-3写在了前面，它却实际上显示在了后面，这就是push在其中作梗。
以上就是今天要分享的，希望对您有帮助
