Bootstrap3.0学习:栅格系统和应用案例剖析(3)

http://www.itjxue.com  2015-08-07 20:42  来源:未知  点击次数: 

Responsive column resets

通过上面两个案例的解析,可以通过这四个栅格class设计出比较轻松的设计出比较复杂的页面布局了。但是还是会有一些情况中出现一行中的某一列比其他的列高的情况。可能现在你还不太清楚我说的意思,不过没关系,我们直接上案例。

4

首先来看一下大屏幕下的页面展示效果

第一个元素的高度的确不太一样。然后看一下小屏幕的。

看现在是这样进行排列的,因为小屏幕下选择的都是.col-xs-*的样式类,而且都是占用6份的。不知道这样的效果是不是你想要的。原来是不是想在小屏幕下看到这四个元素在两行然后每行两个元素呢?

接下来我们将上面的代码稍微改动一下,其实也就是添加了一行代码

5

这样的效果还是达到了两行两列的。当然你也可以通过响应式工具,这个会在以后进行详细说明,这里暂时不进行示例演示了。

列偏移

这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

6

通过阅读上面的代码大概可以想象出它的排版布局了吧。

嵌套列

为了使用内置的栅格进行内容的嵌套,通过添加一个新的.row和一系列的.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套列所包含的列加起来应该等于12。

7

通过上面的代码可以发现,首先定义了一个row,然后在此row中添加了一个.col-md-9的列,代表这个元素占有9列。

然后在这个占有9列的元素里面添加了两个不同的row。

即第一个row:将第一个row分成了两份,每份占有的6列,这12列,但是其总宽度和它外面的占有9列的元素的宽度是一样的。

第二个row:将第二个row分成了两份,第一份占有3列,第二份占有6列,然后剩余的3列没有进行填充。

列排序

中文网的解释是:通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

通过代码实现了,看到效果了,对于这句话的理解我还是没有摸透。

8

可以看出,我定义了三行。

第一行被平均分成三份,每份占有四列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且是占有两列,然后对此元素也添加了.col-md-push-4的样式类。(让占有两个列的元素又向右移动了4列那么现在就是占据了第五列和第六列。)

第三列被分为两份,第一份占有七列,不过是空的,然后第二份占有五列,并且对此元素也添加了一个.col-md-pull-4的样式类,当然此类和上一行附加的类应该正好有相反的效果。(让占有5列的元素又向左移动了四列,原来是从第八列开始的,那么现在是从第四列开始的。)

现在来看一下效果展示

总结

本文都是通过最简单的案例,来剖析案例中涉及到的布局要点。这一篇下来,自己感觉学到的还是蛮多的,感觉需要从头再看一遍。其中对有些地方的理解可能不是很到位,希望有理解的、并且看到的前辈大牛可以帮小弟指正一下,小弟在此先谢过你们了。写完这一篇感觉很不错,学到了好多,当然也希望对各位看官能有点儿帮助。

(责任编辑:IT教学网)

更多