在去年的这个时候写过关于bootstrap的相关文章(见:bootstrap2学习1:基本CSS样式),然后就搁置了,原因是因为当时对bootstrap的了解不深,并且当时v2版本对响应式设计的不是非常好。如今,bootstrap的v3版本很早就出来了,现在又拿出来老调重弹一次。
这次学习bootstrap,希望是一次比较深入的了解bootstrap,但愿能够在实际开发中运用的得心应手。学习的步骤大致根据bootstrap的中文翻译文档(见参考资料)来,但也有部分地方会深入或者浅出。
在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:
这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。
和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为col-*
,栅格的外包class为row
。每一个行可以有多个列组成的多行栅格,每一个行在形象意义上称为版块(模块、区域),是一个相对独立的部分。但一行有且只能一个行出现,不能出现多个。
结合屏幕宽度分别有:
例1:http://demo.qianduanblog.com/3150/1.html
class="row">
class="col-xs-4">
class="col-xs-4">
class="col-xs-4">
如上,xs宽度下,同行多列始终在一行内:
例2:http://demo.qianduanblog.com/3150/2.html
如预期的一样,在大于等于768px的时候,多列是水平排列的,否则是垂直排列的:
对于md、lg和sm是同理的,惟独xs特殊。
在处理不同像素宽度的时候,大宽度的适配优先于窄宽度(即ls>md>sm>xs)。
例3:http://demo.qianduanblog.com/3150/3.html
class="row">
class="col-sm-4 col-md-1">
class="col-sm-4 col-md-10">
class="col-sm-4 col-md-1">
如上,md的优先级就高于sm,即:
- 在大于等于992px(md)的时候(即使此时也是大于等于768px(sm)的),该行多列是水平方向
1:10:1
栅格宽度排列的;
- 在小于992px并且大于等于768px的时候,该行多列遵循sm规则,在水平方向
4:4:4
栅格宽度排列;
- 在小于768px的时候,该行多列呈垂直方向排列(即水平方向
12:12:12
)。
如下图:
简要说明:
例4:http://demo.qianduanblog.com/3150/4.html
class="row">
class="col-xs-4 col-sm-1 col-md-1 col-lg-5">
class="col-xs-4 col-sm-3 col-md-10 col-lg-2">
class="col-xs-4 col-sm-8 col-md-1 col-lg-5">
如上,sm的优先级大于xs,md的优先级就高于xs,而lg的优先级又高于md,即:
- 在大于等于1200px的时候,呈水平5:2:2单位栅格宽度排列;
- 在大于等于992px并且小于1200px的时候,呈水平1:10:1单位栅格宽度排列;
- 在大于等于768px并且小于992px的时候,呈水平1:3:8单位栅格宽度排列;
- 其余遵守xs规则,呈水平4:4:4单位栅格宽度排列。
如下图:
简要说明:
// 遵循lg规则
if( width >= 1200 ) 5:2:2
// 遵循md规则
else if( width < 1200 && width >= 992 ) 1:10:1
// 遵循sm规则
else if( width < 992 && width >= 768 ) 1:3:8
// 遵循xs规则
else 4:4:4
理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:
其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):
例5:http://demo.qianduanblog.com/3150/5.html
class="row">
class="col-xs-4">
class="col-xs-4 col-xs-offset-4">
结果如图:
例6:http://demo.qianduanblog.com/3150/6.html
结果如图:
另外push和pull主要用来调整列顺序的,比如视图情况需要内容区域在右边,侧边栏在左边,但源代码则必须内容在左边,侧边栏在右边,内容的代码在前面,对SEO据说有一点的好处。
例7:http://demo.qianduanblog.com/3150/7.html
例8,经典的左侧边栏+右内容栏:http://demo.qianduanblog.com/3150/8.html
例9,经典的单内容栏:http://demo.qianduanblog.com/3150/9.html
bootstrap栅格系统:http://getbootstrap.com/css/#grid