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还是等以后单独再开一篇记录吧。
本文详细介绍了栅格系统的基本原理及应用技巧,包括固定布局、流布局、嵌套列、偏移列和列排序等内容。
3167

被折叠的 条评论
为什么被折叠?



