bootstrap学习笔记

1、引入的文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2、栅格系统布局

bootstrap把页面设置为12列，通过改变列的数字来进行布局。

<div  class="container"><!--或者container-fluid-->
        <div  class="row">                               -- col-xs-4 : 指小于768px的小设备
                     <div  class="col-xs-4">11</div>     -- col-sm-4 ：指>=768px的设备
                     <div  class="col-xs-4">22</div>     -- col-md-4 ：指>=992px设备
                     <div  class="col-xs-4">33</div>     -- col-lg-4 ：值1200px设备
        </div>
 </div>

这几个写法应用于不同的分辨率，按像素分，像素不够就下一行，而流式布局是按百分比的。

container有一个maigin，自己把这个margin去了或者把container去了也可以。

3、平移列

offset

 <div  class="row">
                     <div  class="col-xs-4">11</div>
                     <div  class="col-xs-4">22</div>
                     <div  class="col-xs-offset-2   col-xs-4">33</div>---指33向右平移了两列
 </div>

效果如图：会挤到下一列

4、嵌套列

<div  class="container"><!--或者container-fluid-->
        <div  class="row">
                   <div  class="col-xs-8">
                         <div  class="col-xs-2">11</div>
                         <div  class="col-xs-4">22</div>
                         <div  class="col-xs-2">33</div>
                    </div>
         </div>
           <div  class="row">   
                         <div  class="col-xs-8">11</div>
         </div>
           <div  class="row">   
                       <div  class="col-xs-4">11</div>
                         <div  class="col-xs-4">22</div>
                         <div  class="col-xs-4">33</div>
         </div>  
       
</div>

效果如下：

第一行为什么没有按比例分？

5、列排序

主要是使用col-xs-push-*  col-xs-pull-*(*表示0-11的数字)

 <div class="row">        
                    <div class="col-xs-4">21</div>
                    <div class="col-xs-8">24</div>         
     </div>
       <div class="row">
             
                    <div class="col-xs-4  col-xs-push-8">21</div>
                    <div class="col-xs-4  col-xs-pull-4">24</div> 
          
     </div>

6、流式布局

        1：列宽使用百分比，而不是像素
       2：将row类换成row-fluid
       3:其它基本功能与上面的固定布局一样，支持响应式。

        4：平分某一个列时，由于流式布局采用的是百分比，所以应该按照6来计算。

<div class="col-xs-8">
             <div class="col-xs-6">2</div>
             <div class="col-xs-6">2</div>          
</div>

<!-- 流式布局-->
<div  class="container">
            <div  class="col-xs-6">333</div>
            <div  class="col-xs-6">444</div>
</div>
<div   class="container-fluid">   ---声明container-fluid类，表明内容是流式布局，作用：作为一个包含块，来包含流式内容
    <div  class="row-fluid">
                   <div  class="col-xs-6  col-md-12">333</div>
                   <div  class="col-xs-6  col-md-12">444</div>

     </div>
</div>

<div  class="row-fluid">     ----没用声明container和container-fluid类，此时为屏幕的宽度
                   <div  class="col-xs-6">333</div>
                   <div  class="col-xs-6">444</div>

</div>

当屏幕小于768px时，效果如下：

当屏幕大于992px时，效果如下：此时独占一行

 row-fluid类（非常重要），决定是否是流布局。然后里面的内容块代码编写与网格系统一致，依然是从col-md-1到col-md-12，分别对应于不同的百分比.

四：响应式设计 简单来说就是支持不同设备（手机，PC）的分辨率(960PX,1366PX,978PX等等)进行自适应响应。 

   <div class="row">
           
                    <div class="col-xs-6   col-md-12">21</div>
                    <div class="col-xs-6  col-md-12">24</div> 
           
      </div>
    

当设备小于768px时，效果如下：

当设备>=992px时。效果如下：

上面两种类，分别表示的分辨率不一样。col-md-12此时表示每列独占一行即12列。

http://www.cnblogs.com/jtjds/p/5547261.html