bootstrap3学习1：响应式布局layout

在去年的这个时候写过关于bootstrap的相关文章（见：bootstrap2学习1：基本CSS样式），然后就搁置了，原因是因为当时对bootstrap的了解不深，并且当时v2版本对响应式设计的不是非常好。如今，bootstrap的v3版本很早就出来了，现在又拿出来老调重弹一次。

这次学习bootstrap，希望是一次比较深入的了解bootstrap，但愿能够在实际开发中运用的得心应手。学习的步骤大致根据bootstrap的中文翻译文档（见参考资料）来，但也有部分地方会深入或者浅出。

1、像素宽度分类

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

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

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

2、布局栅格化

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

结合屏幕宽度分别有：

• 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. class="row">
2. class="col-xs-4">

class="col-xs-4">

class="col-xs-4">

如上，xs宽度下，同行多列始终在一行内：

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

1. class="row">
2. class="col-sm-4">