bootstrap网格系统

我学习bootstrap,主要值针对它的栅格系统来学，对于它其它的css来说，用的并不是很多。

网格系统，通俗来说，就是把网页划分为12列，来适应于移动端和PC端，但是它又是以移动设备优先的，优先设计更小的宽度，随着屏幕大小增加而添加元素

工作原理及相应的规范

1.首先需要定义 div 为 .container的 class ，以便获得适当的对齐（alignment）和内边距（padding）。
2.再使用行 row 来包裹所需的 12列
3.我们要加的内容 因全部添加到 列中，例如 .col-xs-4。

以下就是基本的网格 结构，知乎我们写的网格 都可以以这个为基础:

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

代码中列的class “col--” 就比较重要了，以下为各种情况下对应来使用

.col-xs- :适用于超小设备的手机 <768px;div显示一直是水平的

.col-sm- :适用于小型设备平板电脑 768px—992px,div以折叠开始，断点以上是水平的

.col-md- :适用于中型设备台式电脑 992px—1200px,div以折叠开始，断点以上是水平的

.col-lg- :适用于大型设备台式电脑 >1200px,div以折叠开始，断点以上是水平的

列重置

所谓响应就是根据不同屏幕来对应显示，那就需要针对不同屏幕来对各种div进行显示，以下代码就是 在超小屏幕下就显示 两行两列，在小型设备以上屏幕就显示一行4列

<div class="container">
   <div class="row" >
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
      </div>



      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;
         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
         </p>
      </div>
      <div class="col-xs-6 col-sm-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
         </p>
      </div>
   </div>
</div>

列偏移
一般来说，使用列偏移是针对大屏幕而言，使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
以下例子就是在小屏幕下显示6列，没有偏移，但是到了大屏幕就向做偏移3列

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-xs-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet
            </p>
        </div>
    </div>
</div>

嵌套列

嵌套列无非就是在列中 在 嵌套一个contanier 12列的栅格，嵌套栅格的用法与普通栅格一样。

栅格系统最基本的应该就是这么多了，下片将讲解 响应式的实用工具