Bootstrap栅格系统研究

转载地址：http://www.see-source.com/blog/300000033/273

上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。

Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。

Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。

1.固定式栅格

固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为60px，列间距为20px。如下图：

在Bootstrap中定义了俩个样式。容器为 .row ，可在容器中加入合适数量的 .span* 列。

用法如下：

view sourceprint?

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样式如下：

view sourceprint?

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。

view sourceprint?

1..row {

2.margin-left: -20px;

3.*zoom: 1;

4.}

.row是定义栅格容器的，可以看到其中并没有定义宽度(width),所以其宽度就由内部栅格的总列宽决定。"margin-left:-20px" 定义容器的左边距负的20px(-20px)，作用是抵销第1列前面的20px，在上图中已经标出。

view sourceprint?

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个列的宽度。

源码如下：

view sourceprint?

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.}

定义容器的宽度完全填充包裹外围容器的宽度。

view sourceprint?

1..row-fluid [class*="span"]:first-child {

2.margin-left: 0;

3.}

清空第一列前面的边距，与固定式中的margin-left:-20px效果是一样的

view sourceprint?

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很接近。

view sourceprint?

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栅格系统研究相关推荐

Bootstrap 栅格系统理解与总结
Bootstrap 栅格系统学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行的效果,如下: 具体代码如下: <div class=" ...
Bootstrap栅格参数
Bootstrap栅格参数跨设备组合定义定义一行,在中等分辨率下是8:4,在超小分辨率下是6:6,在小分辨率下是3:6 <hr /> <div class="row&q ...
BootStrap栅格之间留出空隙
BootStrap栅格系统可以把我们的container容器划分为若干等分,如果想要每个部分之间留出一定的空隙,我们很可能首先想到的方法就是用margin外边距来使它们分离从而产生空隙,这样做真的的可 ...
Bootstrap栅格布局
1.栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin ...
Bootstrap栅格布局解析
文章目录栅格布局初始栅格栅格布局源码 grid.less mixin中的grid.less clearfix.less 栅格布局源码分析流体容器&固定容器公共样式 @grid-gutt ...
Bootstrap栅格系统扩展五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...

Bootstrap栅格系统研究

Bootstrap栅格系统研究相关推荐

最新文章

热门文章