bootstrap(3)关于栅格系统
一:栅格系统的介绍
栅格系统是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个格子