bootstrap网格系统

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

工作原理及相应的规范

1.首先需要定义 p 为 .container的 class ，以便获得适当的对齐(alignment)和内边距(padding)。

2.再使用行 row 来包裹所需的 12列

3.我们要加的内容 因全部添加到 列中，例如 .col-xs-4。

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

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

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

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

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

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

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

列重置

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

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



      <p 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>
      </p>
      <p 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>
   </p>
</p>

列偏移

一般来说，使用列偏移是针对大屏幕而言，使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列，其中 * 范围是从 1 到 11。

以下例子就是在小屏幕下显示6列，没有偏移，但是到了大屏幕就向做偏移3列

<p class="container">
    <h1>Hello, world!</h1>
    <p class="row" >
        <p 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>
        </p>
    </p>
</p>

嵌套列

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

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