bootstrap基础学习二篇

这篇学习网格系统（Grid System）

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1.网格选项：

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列 #	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

2.基本的网格结构：

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

3.示例一：

 <div class="container">
         <div class="row">
             <div class="col-xs-4" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-4" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-4" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>
         </div>
         
         </div>

4.中型和大型设备

    <div class="col-md-6 col-lg-4">....</div>
    <div class="col-md-6 col-lg-8">....</div>

5.示例：

 <div class="container">
         <div class="row">
             <div class="col-xs-2 col-md-4" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-4 col-md-4" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-6 col-md-4" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
              </p>
             </div>
         </div>
         
         </div>

6.适应于：手机、平板电脑、台式电脑

    <div class="col-sm-3 col-md-6 col-lg-4">....</div>
    <div class="col-sm-9 col-md-6 col-lg-8">....</div>

7.示例：

<div class="container">
         <div class="row">
             <div class="col-xs-1 col-sm-5 col-md-8 col-lg-9" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-2 col-sm-5 col-md-2 col-lg-1" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
              </p>
             </div>
         </div>
         
         </div>

8.响应式的列重置

使用：

<div class="clearfix visible-xs"></div>解决小设备浏览时无法确定网格显示的位置。

9.代码示例：

 <div class="container">
         <div class="row">
             <div class="col-xs-2 col-sm-3" style="background:green;">
                  
            nisi ut aliquip ex ea commodo consequat.
             </div> 

             <div class="col-xs-6 col-sm-3" style="background:pink;">            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 
            
            <div class="clearfix visible-xs"></div>

             <div class="col-xs-6 col-sm-3" style="background:blue;">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 

             <div class="col-xs-6 col-sm-3" style="background:gray;">            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 

         
         </div>
     </div>

10.偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。

例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。

这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

11.示例：居中效果

<div class="container">
         <div class="row">
              <div class="col-xs-6 col-xs-offset-3" style="background:#abcdef;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.
                 </p>
              </div>
         
         </div>
     </div>

12.嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。

被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

13.示例：

 <div class="container">
         <div class="row">
              <div class="col-xs-2" style="background:yellow;">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              </div>

              <div class="col-xs-10" style="border:1px solid red;">
                  <div class="row">
                      <div class="col-xs-5" style="background:#abcdef;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>

                      <div class="col-xs-7" style="background:#fedcba;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>

                  </div>
                  
                  <div class="row">
                      <div class="col-xs-10" style="background:blue;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>
                  </div>
              </div>
         
         </div>
     </div>

14.列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

15.示例：

<div class="container">
         <div class="row">
           <p>排序前：</p>
           <div class="col-xs-4" style="background:green;">
               this is a test!
           </div>

           <div class="col-xs-8" style="background:#abcdef;">
               this is a demo!
           </div>
                
         </div>

         <br>
         <div class="row">
             <p>排序后：</p>
             <div class="col-xs-4 col-xs-push-8" style="background:red;">
                 this is a test!
             </div>
             <div class="col-xs-8 col-xs-pull-4" style="background:yellow;">
                 this is a demo!
             </div>
         </div>

     </div>