初学者bootstrap（四）栅格系统在路上（8）

---------------------------------------栅格系统：是bootstrap提供的响应式布局方式--------------------------------------------

栅格系统的核心：
就是把容器container划分12等分，也就是版心被划分12等份。

下面的介绍也是以bootstrap中全局css样式；详情可观看http://v3.bootcss.com/css/了解，在这不再赘述。

现在来总结一下应用步骤：

（1）：首先应该创建一个容器

<div class="container">
    <div class = "row">（行）
        列
        列
    </div>
</div>

注：（container、row是bootstrap中原有的），row要包含在容器中，而容器class类有

container、container-fluid（流式版心）这两个类名是bootstrap提供的，

container是固定宽度，bootstrap已划分好，而container-fluid宽度为100%（浏览器的宽度）

（2）：创建合适的栅格系统

<div class = "row">
    <div class ="col-sm-6 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
    <div class ="col-sm-1 col-md-6 col-lg-2">col-lg-2</div>
</div>

注：这里以屏幕大于1200时做解释
col-lg-2，col-lg-为固定格式，col-lg-2代表屏幕大于1200时，当前的内容占两个格子，

也就是占12个格子的六分之一；也就是col-lg-数字，数字是几，就是占当前行的多少分，

具体可参考下面代码， 这里以屏幕大于992和小于992的显示设置：

屏幕大于992时，效果图如下：

屏幕小于992时，效果图如下：

（3）：栅格系统的划分一共有四种

布局容器：container 版心 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。 

版心取值范围 1.屏幕大小 手机（<768） 宽度100% --------> col-xs- 

2.小屏幕（平板） 768--992 宽度为750px -------> col-sm-

3.显示器（电脑） 992-1200 宽度为970px--------> col-md- 

4.超大屏幕 大于1200 宽度为1170px --------> col-lg-

注：

如果想让页面尽可能的多响应式排版，尽量将四个标准都写上

即：xs  sm  md  lg，那么他们分别有什么特性呢？
第一种情况  只设置md,那么 lg也会和md现象一致。而xs,md没有响应式样子
第二种情况  只设sm，那么  sm\md\lg一个样子，xs没有样子
第三种情况  设置sm\md  那么 sm一个样子， md和lg一个样子，xs没有样子
第四种情况  只设置xs ，那么xs\sm\md\lg全设置上了  （所以说xs特殊）

（4）.关于row

1） 当一个row里面的元素超过12分，会在row里面另起一行 

2）当小于12份，放不满整行时，会有空格部分 。

3）row中若有元素使用列的偏移、列的嵌套、列的排序；

   列的偏移：offset；

列的嵌套：row中有row；

列的排序：

通过使用 .col-md-push- 和 .col-md-pull-类就可以很容易的改变列（column）的顺序。push往后移动，pull往前移动 

注：若有同行中元素A设置offset，元素B不设置，则B还会紧贴着A，并不会覆盖住B；若A偏移，B也偏移，那他们就各自偏移，互不影响；

   也就是offset会影响其他，会带着其他一起偏移，

   但，push-几个单位或者pull-几个单位，不会影响其他，也就是，若A发生偏移，B没有设置偏移，所以会出现A覆盖住了B.

学习心得：

bootstrap为程序员提供了各种炫酷的结构、样式、行为等，

使写代码更加方便，更加轻松，可对于初学者来说，内容显得特别多与繁琐，

所以，不要着急，先掌握基础的知识，

会应用他，明白他是做什么的，就够了。在工作或学习中应用的多了，自然就上手了。
------------------------------------------共勉----------------------------------------------------