Bootstrap的栅格系统为12列(最大列数),形成一个940px宽的容器。
Bootstrap的栅格系统有俩种,一种是固定式的,一种是流式的(也就是可适应宽度的)。
1.固定式栅格
固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的,列宽为60px,列间距为20px。如下图:
在Bootstrap中定义了俩个样式。容器为 .row ,可在容器中加入合适数量的 .span* 列。
用法如下:
1.<div class="row">
2.<div class="span4">...</div>
3.<div class="span8">...</div>
4.</div>
用法非常类似<table> 标签。"<div class='row'>"相当于是<table>,"<div class='span4'>"、"<div class='span8'>" 相当于"<td cols='4'>"、"<td cols='8'>"。注意:由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
源码的css样式如下:
1.[class*="span"] {
2.float: left;
3.min-height: 1px;
4.margin-left: 20px;
5.}
上面是个属性选择器。定义属性名为"class"的值包含子串"span",也就是span1、span2、span3....。"margin-left:20px"定义了每列的左边距为20px,也就是上图中的间距20px。
1..row {
2.margin-left: -20px;
3.*zoom: 1;
4.}
.row是定义栅格容器的,可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。"margin-left:-20px" 定义容器的左边距负的20px(-20px),作用是抵销第1列前面的20px,在上图中已经标出。
01..span12 {
02.width: 940px;
03.}
04.
05..span11 {
06.width: 860px;
07.}
08.
09..span10 {
10.width: 780px;
11.}
12.
13..span9 {
14.width: 700px;
15.}
16.
17..span8 {
18.width: 620px;
19.}
20.
21..span7 {
22.width: 540px;
23.}
24.
25..span6 {
26.width: 460px;
27.}
28.
29..span5 {
30.width: 380px;
31.}
32.
33..span4 {
34.width: 300px;
35.}
36.
37..span3 {
38.width: 220px;
39.}
40.
41..span2 {
42.width: 140px;
43.}
44.
45..span1 {
46.width: 60px;
47.}
span1、span2...很像表格元素<table>中<td>的cols,即合并多少列。span1就是合并1列(即不合并),span2就是合并2列,span3是合并3列...。那为什么span2的宽度是140px那,我们可以算下:
先看下span2。由于上面的属性选择器已经规定了span1、span2.....span12 的左边距都是20px,所以span2自身有20px的左边距(margin-left:20px),也就是上图中第3列与第4列的间距。所以对于上面图来说span2的宽度就是等于=第4列的宽度60px+第5列的宽度60px+第4列与第5列的间距20px =140px。span3的算法也是如此。 最后总结的公式就是spanN的宽度(width) = N*60 + (N-1)*20。大家可以验证下。
偏移列
把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如,.offset4 将 .span4 右移了4个列的宽度。
源码如下:
01..offset12 {
02.margin-left: 980px;
03.}
04.
05..offset11 {
06.margin-left: 900px;
07.}
08.
09..offset10 {
10.margin-left: 820px;
11.}
12.
13..offset9 {
14.margin-left: 740px;
15.}
16.
17..offset8 {
18.margin-left: 660px;
19.}
20.
21..offset7 {
22.margin-left: 580px;
23.}
24.
25..offset6 {
26.margin-left: 500px;
27.}
28.
29..offset5 {
30.margin-left: 420px;
31.}
32.
33..offset4 {
34.margin-left: 340px;
35.}
36.
37..offset3 {
38.margin-left: 260px;
39.}
40.
41..offset2 {
42.margin-left: 180px;
43.}
44.
45..offset1 {
46.margin-left: 100px;
47.}
.offset1即移动一列,.offset2移动俩列。margin-left是如何得出来的,以.offset1移动一列为例,如下图:
上图演示了从第2列偏移1列到第3列。未移动前第2列的margin-left为20px,移动后由于占了俩个间距和一个列宽,所以最终的margin-left就是100px。
2.流式栅格
流式也固定式栅格的区别就是,每列的宽度是按照百分比来瓜分外围包裹的宽度的,看下源码:
view sourceprint?
1..row-fluid {
2.width: 100%;
3.*zoom: 1;
4.}
定义容器的宽度完全填充包裹外围容器的宽度。
1..row-fluid [class*="span"]:first-child {
2.margin-left: 0;
3.}
清空第一列前面的边距,与固定式中的margin-left:-20px效果是一样的
01..row-fluid [class*="span"] {
02.display: block;
03.float: left;
04.width: 100%;
05.min-height: 30px;
06.margin-left: 2.127659574468085%;
07.*margin-left: 2.074468085106383%;
08.-webkit-box-sizing: border-box;
09.-moz-box-sizing: border-box;
10.box-sizing: border-box;
11.}
我们这里只关注与宽度有关的代码。上面代码中margin-left: 2.127659574468085% 以百分比设置列的左边距(margin-left),约等于2.12%,
我们以上面固定式中的940px 为例来算下大约是多少px。2.12% * 940 = 19.928 。 与20px很接近。
01..row-fluid .span12 {
02.width: 100%;
03.*width: 99.94680851063829%;
04.}
05.
06..row-fluid .span11 {
07.width: 91.48936170212765%;
08.*width: 91.43617021276594%;
09.}
10.
11..row-fluid .span10 {
12.width: 82.97872340425532%;
13.*width: 82.92553191489361%;
14.}
15.
16..row-fluid .span9 {
17.width: 74.46808510638297%;
18.*width: 74.41489361702126%;
19.}
20.
21..row-fluid .span8 {
22.width: 65.95744680851064%;
23.*width: 65.90425531914893%;
24.}
25.
26..row-fluid .span7 {
27.width: 57.44680851063829%;
28.*width: 57.39361702127659%;
29.}
30.
31..row-fluid .span6 {
32.width: 48.93617021276595%;
33.*width: 48.88297872340425%;
34.}
35.
36..row-fluid .span5 {
37.width: 40.42553191489362%;
38.*width: 40.37234042553192%;
39.}
40.
41..row-fluid .span4 {
42.width: 31.914893617021278%;
43.*width: 31.861702127659576%;
44.}
45.
46..row-fluid .span3 {
47.width: 23.404255319148934%;
48.*width: 23.351063829787233%;
49.}
50.
51..row-fluid .span2 {
52.width: 14.893617021276595%;
53.*width: 14.840425531914894%;
54.}
55.
56..row-fluid .span1 {
57.width: 6.382978723404255%;
58.*width: 6.329787234042553%;
59.}
上面的代码是设置列的宽度(width),其中的百分比的得来也是按照固定式中的原则算的。
强大的Bootstrap可视化编辑器:
http://www.layoutit.com/build
转自:http://hi.baidu.com/cubeking/item/67a204dc91c0bbeeb2f7774c
分享到:
相关推荐
bootstrap实现响应式登录页面
layoutit+Bootstrap可视化网站编辑拖动面板布局系统是一款可拖放排序在线编辑的Bootstrap可视化布局系统,可使用的组件很多,支持栅格化排列布局,最大的亮点支持拖拽并且可视化,即拖即用,功能十分强大!
如果你以前使用过Bootstrap2或者了解过响应式技术,那么肯定对Bootstrap栅格系统并不陌生,由于栅格系统的引入,使得Bootstrap的跨设备布局显示变得可能。 什么是栅格系统 栅格系统是指,将页面布局划分为等宽的列,...
starbucks-home Bootstrap:星巴克官网 Bootstrap 栅格化布局实现不同尺寸下良好的展示体验 使用 请在Vscode下用安装Live Server 右键 open with Live Server 打开
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目,本文介绍了bootstrap的常用组件和栅格式布局详解,有兴趣的可以了解一下
所谓栅格化布局就是指把网页屏幕分成横向分十二份,在多大的媒体屏幕就分成多少份,使网页内容随着屏幕大小变化而变化,方便在各种媒体浏览网页。 栅格化布局的写法 row指的是在网页里的一行,而col则指的是网页中这...
第2章 Bootstrap布局 1 Bootstrap的结构 1.1 使用栅格系统 1.1.1 绘制栅格 1.1.2 栅格系统的列偏移 操作案例1:制作音乐网站首页 1.1.3 栅格系统的列交换 1.1.4 栅格系统的嵌套 1.2 响应式栅格 操作案例2:组合栅格...
主要介绍了浅谈CSS 栅格系统原理分析,详细介绍了Foundation、Pure、Bootstrap的使用方法,非常具有实用价值,需要的朋友可以参考下
12列栅格布局 栅格系统不是万能的,不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格或是自己手写。 响应式设计 从Bootstrap 2开始,提供完整的响应式特性。所有...
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的,它在 jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件,为实现快速开发提供了一套前端工具包,包括丰富的...
supplyWeb供水系统(数据列表、图表、地图、表单、列表树)bootstrap:响应式布局,兼容至1280,栅格系统bootstrap-table:数据列表(表格初始化设置、列表高度自适应)ztree:列表树layer:弹框(提示层、页面层、...
2、栅格化系统 采用了12列格子技术,将网页平分成12列,可以满足多种布局的网页,为网页的多样性提供了便捷性,和灵活性。 3、响应式设计 可以根据浏览器的大小自动缩放和调整,对web标签的重构实现了最大化的...
2、栅格化系统 采用了12列格子技术,将网页平分成12列,可以满足多种布局的网页,为网页的多样性提供了便捷性,和灵活性。 3、响应式设计 可以根据浏览器的大小自动缩放和调整,对web标签的重构实现了最大化的浏览器...