bootstrap:响应式布局layout

乔乔 2016-11-03

1、像素宽度分类

在bootstrap的v3版本中,已经将各种媒介分为4种像素宽度类型:

bootstrap:响应式布局layout

  • xs:extra small 特别窄屏幕,默认指浏览器像素宽度小于768px
  • sm:small 窄屏幕,默认指浏览器像素宽度大于等于768px
  • md:middle 中等宽度屏幕,默认值指浏览器像素宽度大于等于992px
  • lg:large 大屏幕,默认值指浏览器像素宽度大于等于1200px

这四种屏幕宽度对应的尺寸缩写死记硬背记住,对布局来说非常的重要。

2、布局栅格化

和v2一样,bootstrap将内容区域分为了12等分,平均每一等分都有相等的间距,左右无外边距。一个栅格宽度为栅格单位宽度,一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算,使之能够自适应各种宽度。栅格的class为col-*,栅格的外包class为row。每一个行可以有多个列组成的多行栅格,每一个行在形象意义上称为版块(模块、区域),是一个相对独立的部分。但一行有且只能一个行出现,不能出现多个。

bootstrap:响应式布局layout

结合屏幕宽度分别有:

  • xs:col-xs-1 ~ col-xs-12,多列始终在一行内。
  • sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
  • md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
  • lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。

例1:http://demo.qianduanblog.com/3150/1.html

  1. <divclass="row">
  2. <divclass="col-xs-4"></div>
  3. <divclass="col-xs-4"></div>
  4. <divclass="col-xs-4"></div>
  5. </div>

如上,xs宽度下,同行多列始终在一行内:

bootstrap:响应式布局layout

例2:http://demo.qianduanblog.com/3150/2.html

  1. <divclass="row">
  2. <divclass="col-sm-4"></div>
  3. <divclass="col-sm-4"></div>
  4. <divclass="col-sm-4"></div>
  5. </div>

如预期的一样,在大于等于768px的时候,多列是水平排列的,否则是垂直排列的:

bootstrap:响应式布局layout

对于md、lg和sm是同理的,惟独xs特殊。

在处理不同像素宽度的时候,大宽度的适配优先于窄宽度(即ls>md>sm>xs)。

例3:http://demo.qianduanblog.com/3150/3.html

  1. <divclass="row">
  2. <divclass="col-sm-4 col-md-1"></div>
  3. <divclass="col-sm-4 col-md-10"></div>
  4. <divclass="col-sm-4 col-md-1"></div>
  5. </div>

如上,md的优先级就高于sm,即:

  • 在大于等于992px(md)的时候(即使此时也是大于等于768px(sm)的),该行多列是水平方向1:10:1栅格宽度排列的;
  • 在小于992px并且大于等于768px的时候,该行多列遵循sm规则,在水平方向4:4:4栅格宽度排列;
  • 在小于768px的时候,该行多列呈垂直方向排列(即水平方向12:12:12)。

如下图:

bootstrap:响应式布局layout

简要说明:

  1. // 遵循md规则
  2. if( width >=992)1:10:1
  3. // 遵循sm规则
  4. elseif( width <992&& width >=768)4:4:4
  5. // 普通规则
  6. else12:12:12

例4:http://demo.qianduanblog.com/3150/4.html

  1. <divclass="row">
  2. <divclass="col-xs-4 col-sm-1 col-md-1 col-lg-5"></div>
  3. <divclass="col-xs-4 col-sm-3 col-md-10 col-lg-2"></div>
  4. <divclass="col-xs-4 col-sm-8 col-md-1 col-lg-5"></div>
  5. </div>

如上,sm的优先级大于xs,md的优先级就高于xs,而lg的优先级又高于md,即:

  • 在大于等于1200px的时候,呈水平5:2:2单位栅格宽度排列;
  • 在大于等于992px并且小于1200px的时候,呈水平1:10:1单位栅格宽度排列;
  • 在大于等于768px并且小于992px的时候,呈水平1:3:8单位栅格宽度排列;
  • 其余遵守xs规则,呈水平4:4:4单位栅格宽度排列。

如下图:

bootstrap:响应式布局layout

简要说明:

// 遵循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

3、栅格偏移

理解了栅格化,那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种:

  • offset:左外边距(margin-left);
  • pull:右位移(right);
  • push:左位移(left)。

其中offset使用的频率最高。不同的列宽度对应的外边距是不同的,所以每一种类型偏移都有四种,以offset为例(以下皆以offset为例):

  • xs:col-xs-offset-0 ~ col-xs-offset-12
  • sm:col-sm-offset-0 ~ col-sm-offset-12
  • md:col-md-offset-0 ~ col-md-offset-12
  • lg:col-lg-offset-0 ~ col-lg-offset-12

例5:http://demo.qianduanblog.com/3150/5.html

  1. <divclass="row">
  2. <divclass="col-xs-4"></div>
  3. <divclass="col-xs-4 col-xs-offset-4"></div>
  4. </div>

结果如图:

bootstrap:响应式布局layout

例6:http://demo.qianduanblog.com/3150/6.html

  1. <divclass="row">
  2. <divclass="
  3. col-sm-1
  4. col-lg-6
  5. <divclass="
  6. col-sm-1 col-sm-offset-10
  7. col-lg-1 col-lg-offset-5
  8. </div>

结果如图:

bootstrap:响应式布局layout

另外push和pull主要用来调整列顺序的,比如视图情况需要内容区域在右边,侧边栏在左边,但源代码则必须内容在左边,侧边栏在右边,内容的代码在前面,对SEO据说有一点的好处。

例7:http://demo.qianduanblog.com/3150/7.html

  1. <divclass="row">
  2. <divclass="col-md-9 col-md-push-3">
  3. 源代码左边,但视图在右边
  4. </div>
  5. <divclass="col-md-3 col-md-pull-9">
  6. 源代码右边,但视图在右边
  7. </div>
  8. </div>

4、布局实例

例8,经典的左侧边栏+右内容栏:http://demo.qianduanblog.com/3150/8.html

例9,经典的单内容栏:http://demo.qianduanblog.com/3150/9.html

5、参考资料

bootstrap栅格系统:http://getbootstrap.com/css/#grid

相关推荐