Bootstrap笔记-----栅格系统01

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

 

一、网格系统是什么东西

　　Bootstrap把一个页面分为12列，经过指定数字就可以设置宽度。简单的示例:

<div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-6">6</div>
        <div class="col-xs-3">3</div>
    </div>

　显示效果以下：

　　

　　当浏览器的宽度缩小时(为下面说明响应式作铺垫)，显示效果以下：

　　

要点：

　　一、row是容器，网格样式要放在row容器里面。

　　二、1个网页是12列。

　　三、一共有4个前缀的网格class前缀，分别应用于分辨率的设备。

　　图表以下：

　　

　二、响应式网格

　　示例说明：

<div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
        <div class="col-xs-12 col-sm-6 col-md-3">3</div>
    </div>

　　显示效果以下：

　　

　　当浏览器缩小时：

　　

　　当再进一步缩小时：

　　

　　这就是所谓的响应式，说白了"响应式"就是根据浏览器的宽度来决定使用哪个class，以上效果展现了响应式布局的原理:

• 当屏幕宽度u≥1200px时，bootstrap会自动选用col-lg-*这个class；
• 当屏幕宽度u≥992px时，bootstrap会自动选用col-sm-*这个class；
• 当屏幕宽度u≥768px时，bootstrap会自动选用col-md-*这个class；
• 当屏幕宽度u<768px时，bootstrap会自动选用col-lg-*这个class；

三、偏移列　偏移列的意思是隔开多少个列。

　　示例：

<div class="col-xs-12 col-sm-6 col-md-3">3</div>　　//向右偏移2列了
    <div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>

　　显示效果以下：

　　

　　.col-xs=* 类不支持偏移，它们能够简单地经过使用一个空的单元格来实现该效果。

　　这个样式至关于设置了margin:宽度*列数。

　　四、嵌套列

　　在网格里嵌套网格

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

　　输出效果以下：

　　

　　五、列排序

　　经过使用".col-md-push-*"和".col-md-pull-*"可以互换顺序。其中*的范围从1到11。

　　示例以下：

<div style="margin-top:20px"></div>
    无排序：
    <div class="row">
        <div class="col-sm-4">First</div>
        <div class="col-sm-8">Second</div>
    </div>
    有排序：
    <div class="row">
        <div class="col-sm-4 col-sm-push-8">First</div>
        <div class="col-sm-8 col-sm-pull-4">Second</div>
    </div>

　　显示效果以下：

　　

　　以上class使用的理解为：原本First占据4列，Second占据8列，若是要互换位置，则First要向右推(push)8个列，而Second要向左拉4个列。