bootStrap的布局容器和网格系统

布局容器

给div加对应的类名：1、.container    2、.container-fluid

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

使用：

<div class="container"></div>

.container-fluid类用于100%宽度，占据全部视口(viewport)的容器，简单理解就是我们看到的网页两侧没有留白

使用：

<div class="container-fluid"></div>

 

建议：两种布局容器不要嵌套使用

网格系统

放在布局容器中使用，行用.row类；列用.col-xs-数值（列数）、.col-sm-数值、.col-md-数值、.col-lg-数值   类，分别对应超小屏（自动）、小屏（750px）、中屏（970px）、大屏（1170px）；列放在行标签内。

bootstrap中最大只能分12列，其他框架可能不同。

使用展示：一行三列，将一行化成12分第一列占2份，第二列占3份，第三列占4份

 <div class="container">
        <div class="row">
            <div class="col-md-2" style="background-color:red ;">2</div>
            <div class="col-md-3" style="background-color:blue ;">3</div>
            <div class="col-md-4" style="background-color:green ;">4</div>
        </div>
    </div>

 

运行看一下：

 在网格系统中使用的最多的就是列合并，即上述效果，规定一个标签占几列，我们要注意的在一行中所有列的数值加起来不能超过12，否则会换行。

列偏移 有时候我们想让标签有点间距，即就需要列偏移.col-屏大小(xs\xm\md\lg)-offset-数值，

使用方法：加在列标签的类名中

 <div class="container">
        <div class="row">
            <div class="col-md-2" style="background-color:red ;">2</div>
            <div class="col-md-3 col-md-offset-2" style="background-color:blue ;">3</div>
            <div class="col-md-4" style="background-color:green ;">4</div>
        </div>
    </div>

 即第二个列标签会相对于第一个标签偏移两列的距离，效果：

 注意：列偏移的数值和一行中所有列合并的数值不能超过12，否则也会换行

列排序 就是改变左右浮动，并且设置浮动的距离，通过给列标签添加类名col-md-pull-数值（向左浮动一定数值的列数）和col-md-push-数值（向右浮动一定数值的列数）实现

列嵌套 可以在一个列中添加一个或者多个行（row）容器，返回在这个行容器中插入列。每个列都可以在均分为12列。

使用一下

 <div class="container">
        <div class="row">
            <div class="col-md-6" style="background-color:red ;">
                <div class="row">
                    <div class="col-md-2" style="background-color:gold ;">2</div>
                    <div class="col-md-5" style="background-color:purple ;">5</div>
                    <div class="col-md-4" style="background-color:brown;">4</div>

                </div>
            </div>
            <div class="col-md-4" style="background-color:green ;">4</div>
        </div>
    </div>

效果：

 

 补充：不同的设备分辨率不同，如果我们在设置列的时候固定了col-类型，如col-md-*,那么当我们用移动端设备打开时不会达成我们想要的结果

展示一下：我们运行以下代码

 <div class="container">
        <div class="row">
            <div class="col-md-2" style="background-color:red ;">2</div>
            <div class="col-md-3" style="background-color:blue ;">3</div>
            <div class="col-md-4" style="background-color:green ;">4</div>
        </div>
    </div>

 效果：

可以看到原本应该显示为三列的，但是在移动端设备上显示为了三行，因为我们设置的md中屏，在移动端应该使用小屏xs,所以我们修改以下代码，在 col-md 后并列写上col-xs

如：

 <div class="col-md-2 col-xs-4" style="background-color:red ;">2</div>

表示在中屏上显示为2列，在小屏上显示为4列，即可实现不同设备上不同效果的显示。

修改后：

<div class="container">
        <div class="row">
            <div class="col-md-2 col-xs-4" style="background-color:red ;">2</div>
            <div class="col-md-3 col-xs-4" style="background-color:blue ;">3</div>
            <div class="col-md-4 col-xs-4" style="background-color:green ;">4</div>
        </div>
    </div>

 

效果：