积跬步，聚小流------Bootstrap学习记录(4)

来源：互联网发布：java中的集合编辑：程序博客网时间：2024/05/01 16:53

1、基本栅格系统分析回顾

上一篇记录了最基本简单的栅格系统，简单的固定布局，先来回顾下需要注意的几个点：

* 布局要放在布局容器中，而固定布局中的布局容器含class="container"；

* 可以用.row和.col-md-*等预定义类来快速的创建栅格布局；

* .row(行)必须防止在.container(容器)内，而只有.col-*-*(列)可以作为.row(行)的子元素，而内容必须放在列内；

* 如果一行包含的列大于12，多余的元素会作为一个整体另起一行排列；

像：

 <div class="row-fluid part-msg">    <div class="col-md-4 col-lg-2 col-sm-5">          <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />        </div>        <div class="col-md-4 col-lg-2 col-sm-5">       <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />        </div>        <div class="col-md-4 col-lg-2 col-sm-5">       <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />        </div>        <div class="col-md-4 col-lg-2 col-sm-5">       <img src="img/261877.jpg" alt="显示的图片片" class=" img-responsive" />        </div>        <div class="col-md-4 col-lg-2  col-sm-5">         <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />        </div>        <div class="col-md-4 col-lg-3 col-sm-5"><!-- 修改了这个地方的col-lg-2 -->         <img src="img/261877.jpg" alt="显示的图片" class=" img-responsive" />        </div>    </div>

看效果：

2、偏移列

通过class="col-md-offset-6"等类似来实现列的偏移，至于偏移的原理，我们可以看一下其中的部分源码：

@media (min-width: 768px) {/*根据视口的宽度设置的不同样式*/  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {    float: left;  }  .col-sm-12 {    width: 100%;  }  .col-sm-11 {    width: 91.66666667%;  }  .col-sm-10 {    width: 83.33333333%;  }  .col-sm-9 {    width: 75%;  }  .col-sm-8 {    width: 66.66666667%;  }  .col-sm-7 {    width: 58.33333333%;  }  .col-sm-6 {    width: 50%;  }  .col-sm-5 {    width: 41.66666667%;  }  .col-sm-4 {    width: 33.33333333%;  }  .col-sm-3 {    width: 25%;  }  .col-sm-2 {    width: 16.66666667%;  }  .col-sm-1 {    width: 8.33333333%;  }  .col-sm-pull-12 {<!--这里包含了列排序啊，第5部分讲述-->    right: 100%;  }  .col-sm-pull-11 {    right: 91.66666667%;  }  .col-sm-pull-10 {    right: 83.33333333%;  }  .col-sm-pull-9 {    right: 75%;  }  .col-sm-pull-8 {    right: 66.66666667%;  }  .col-sm-pull-7 {    right: 58.33333333%;  }  .col-sm-pull-6 {    right: 50%;  }  .col-sm-pull-5 {    right: 41.66666667%;  }  .col-sm-pull-4 {    right: 33.33333333%;  }  .col-sm-pull-3 {    right: 25%;  }  .col-sm-pull-2 {    right: 16.66666667%;  }  .col-sm-pull-1 {    right: 8.33333333%;  }  .col-sm-pull-0 {    right: auto;  }  .col-sm-push-12 {    left: 100%;  }  .col-sm-push-11 {    left: 91.66666667%;  }  .col-sm-push-10 {    left: 83.33333333%;  }  .col-sm-push-9 {    left: 75%;  }  .col-sm-push-8 {    left: 66.66666667%;  }  .col-sm-push-7 {    left: 58.33333333%;  }  .col-sm-push-6 {    left: 50%;  }  .col-sm-push-5 {    left: 41.66666667%;  }  .col-sm-push-4 {    left: 33.33333333%;  }  .col-sm-push-3 {    left: 25%;  }  .col-sm-push-2 {    left: 16.66666667%;  }  .col-sm-push-1 {    left: 8.33333333%;  }  .col-sm-push-0 {    left: auto;  }  .col-sm-offset-12 {/*offset都是通过margin-left来实现的*/    margin-left: 100%;  }  .col-sm-offset-11 {    margin-left: 91.66666667%;  }  .col-sm-offset-10 {    margin-left: 83.33333333%;  }  .col-sm-offset-9 {    margin-left: 75%;  }  .col-sm-offset-8 {    margin-left: 66.66666667%;  }  .col-sm-offset-7 {    margin-left: 58.33333333%;  }  .col-sm-offset-6 {    margin-left: 50%;  }  .col-sm-offset-5 {    margin-left: 41.66666667%;  }  .col-sm-offset-4 {    margin-left: 33.33333333%;  }  .col-sm-offset-3 {    margin-left: 25%;  }  .col-sm-offset-2 {    margin-left: 16.66666667%;  }  .col-sm-offset-1 {    margin-left: 8.33333333%;  }  .col-sm-offset-0 {    margin-left: 0;  }}

这里需要注意的是.col-xs-*不支持偏移，这种情况我们可以通过添加空的表格来实现。

3、流布局

我们上面所说的都是针对固定布局，而实际上我们还是可以通过流布局的，而这时我们所需要做的修改就是讲container修改成container-fluid，row修改成为row-fluid，这样我们来看一下效果：

4、嵌套列

嵌套列的本职就是讲已经分开的列，再从内部进行分列，例如：

 <div class="row"><!-- 这里开始分列 -->         <div class="col-md-8 col-sm-12 part-slide">             <img src="img/261877.jpg" alt="轮播的图片" />             </div>             <div class="clearfix visible-xs-block"></div>             <div class="col-md-4 col-sm-12 part-info"><!--注意这一列是占用了4列栅格-->             <ul class=" col-md-offset-1"><!--但是内部的offset都是针对该列进行分栅格的-->                    <li><h1>公告部分</h1></li>                    <li >公告部分</li>                    <li>公告部分</li>                         <li>公告部分</li>                    <li>公告部分</li>                    <li>公告部分</li>                    <li>公告部分</li>                                          </ul>                <div class="row"><!--这里在其中的一个列中再一次分列，内部的再分列也是以该列为母版的-->                    <div class="col-md-6"><!--注意这里是6哦-->                    第一部分                    </div>                     <div class="col-md-6">                    第二部分                    </div>                </div>             </div>    </div>

而来看一下效果：

这里需要注意的是.col-md-*都是针对上次元素的，而不是针对整个视口的。

5、列排序

在刚才公告新嵌套部分添加如下代码：

  <div class="row">                    <div class="col-md-2  col-md-push-8">                    8                    </div>                     <div class="col-md-2  col-md-push-4">                    4                    </div>                     <div class="col-md-2  col-md-pull-2">                    2                    </div>                     <div class="col-md-2  col-md-pull-3">                    3                    </div>                    <div class="col-md-2  col-md-pull-4">                    1                    </div>                    <div class="col-md-2  col-md-pull-11">                        11                    </div>                </div>

来看实现效果：

这里的排序是11最先，8最后，这里排序的原理是什么呢，我们还是来看下源码里怎么写的吧，返回头去看上方偏移列部分的源码，同时你肯定还记得这个：

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {  position: relative;/*看看这里，看看这里*/  min-height: 1px;  padding-right: 15px;  padding-left: 15px;}

这就显而易见了吧，相对位置加上相应的right和left，当然可以排序了。

对于栅格系统的介绍比较杂乱，还有隐藏和显示，我们从源码中很容易看到它的实现方法，通过class的.visible-*或者.hidden-*来实现，而对于前文中提到的less mixin还是等以后单独再开一篇记录吧。

1 1