标签：pgp sys uek pam cdb nav sroll key bsd
栅格系统是Bootstrap提供的一套响应式，移动设备优先的流式栅格系统，随着屏幕或者视口尺寸的增加，系统会被自动分为最多12列。
栅格系统通过一系列的行和列来组合创建页面布局，我们将内容放入创建好的布局之中，
栅格系统的结构：
<div class="container">
<div class="row">
<div class="col-md-1"></div>
</div>
</div>
行（row）必须包含在一个 （.container）或者 （.container-fluid）的容器内，这两种容器不能嵌套，
关于container和 container-fluid的区别在于：
我们可以通过观察在bootstrap中的源码可以发现：
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
我们可以发现，使用类名时container的容器实现的是响应式布局，实现媒体查询过程来实现的
也就是说对于不同的设备，容器的宽度时不一样的
对于 容器类是 container-fluid我们可以看到源码如下：
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
我们可以看到，默认宽度为100%
2,关于栅格系统在不同页面下的布局
我们可以看到针对于不同的设备，我们设定的类是不同的
移动设备： .col-xs-*
平板：.col-sm-*
笔记本中等设备： .col-md-*
对于栅格系统而言：
如果在一行内内包含的列大于12个，包含多余列的元素将会作为一个整体单元被另起一行排列
3,列偏移
还可以通过 .col-[md|sm|xs]-offset-*实现列偏移， 实现的效果是将当前元素添加左侧的边距，
例如： .col-md-offset-4将 .col-md-4元素向右侧偏移了4个列的宽度
实现效果如下：
代码如下：
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 col-md-offset-4" >
</div>
</div>
<div>
可以看到第二个div向右偏移了4列，注意，因为我们这儿只是使用的col-md-offset,因此只在桌面大小的屏幕上起作用，同样，我们也可以针对平板和手机设备
4，使用嵌套列：
使用嵌套列的原理是在
在已经存在的 .col-sm-*内通过添加一个新的 .row元素 和 一系列的 .col-sm-*元素来实现嵌套效果的
代码如下：
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
效果如上图所示：
5关于列排序
列排序的目的是改变列的顺序
使用的是 .col-md-push-* 和 .col-md-pull-*来实现的
原理：
源码如下：
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
我们可以看到，实际上改变的是距离左边的距离：
对于 .col-md-pull-*改变的是栅格距离右边的距离
代码如下：
<div class="container">
<div class="row">
<div class="col-md-4">排序前col-md-4</div>
<div class="col-md-8">排序前col-md-8</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">排序后col-md-4</div>
<div class="col-md-8 col-md-pull-4">排序后col-me-8</div>
</div>
</div>
效果如下图所示：
其实是用col-md-pull或者col-md-push改变的只是距离左边或者右边的距离
例如上面的效果所示：
排序后：col-md-4距离左边（col-md-push）8个格子
col-md-8距离右边(col-md-pull )4个格子
标签：pgp sys uek pam cdb nav sroll key bsd
原文地址：http://www.cnblogs.com/qianduangaoshou/p/6847011.html
