在去年的这个时候写过关于bootstrap的相关文章（见：），然后就搁置了，原因是因为当时对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时才在一行内。
&div class="row"&
&div class="col-xs-4"&&/div&
&div class="col-xs-4"&&/div&
&div class="col-xs-4"&&/div&
如上，xs宽度下，同行多列始终在一行内：
&div class="row"&
&div class="col-sm-4"&&/div&
&div class="col-sm-4"&&/div&
&div class="col-sm-4"&&/div&
如预期的一样，在大于等于768px的时候，多列是水平排列的，否则是垂直排列的：
对于md、lg和sm是同理的，惟独xs特殊。
在处理不同像素宽度的时候，大宽度的适配优先于窄宽度（即ls>md>sm>xs）。
&div class="row"&
&div class="col-sm-4 col-md-1"&&/div&
&div class="col-sm-4 col-md-10"&&/div&
&div class="col-sm-4 col-md-1"&&/div&
如上，md的优先级就高于sm，即：
在大于等于992px（md）的时候（即使此时也是大于等于768px（sm）的），该行多列是水平方向1:10:1栅格宽度排列的；
在小于992px并且大于等于768px的时候，该行多列遵循sm规则，在水平方向4:4:4栅格宽度排列；
在小于768px的时候，该行多列呈垂直方向排列（即水平方向12:12:12）。
简要说明：
// 遵循md规则
if( width &= 992 ) 1:10:1
// 遵循sm规则
else if( width & 992 && width &= 768 ) 4:4:4
// 普通规则
else 12:12:12
&div class="row"&
&div class="col-xs-4 col-sm-1 col-md-1 col-lg-5"&&/div&
&div class="col-xs-4 col-sm-3 col-md-10 col-lg-2"&&/div&
&div class="col-xs-4 col-sm-8 col-md-1 col-lg-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单位栅格宽度排列。
简要说明：
// 遵循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
&div class="row"&
&div class="col-xs-4"&&/div&
&div class="col-xs-4 col-xs-offset-4"&&/div&
结果如图：
&div class="row"&
&div class="
&div class="
col-xs-4 col-xs-offset-4
col-sm-1 col-sm-offset-10
col-md-1 col-md-offset-1
col-lg-1 col-lg-offset-5
结果如图：
另外push和pull主要用来调整列顺序的，比如视图情况需要内容区域在右边，侧边栏在左边，但源代码则必须内容在左边，侧边栏在右边，内容的代码在前面，对SEO据说有一点的好处。
&div class="row"&
&div class="col-md-9 col-md-push-3"&
源代码左边，但视图在右边
&div class="col-md-3 col-md-pull-9"&
源代码右边，但视图在右边
4、布局实例
例8，经典的左侧边栏+右内容栏：
例9，经典的单内容栏：
5、参考资料
bootstrap栅格系统：文章声明：文章正文已结束，感谢阅读。本文系作者原创，如需转载请注明文章来源（
），不胜感激。文章标题：
文章链接：
文章分享：
相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然35328523712712412011411097723367183086951673001610141507421410751390831273511000839740621632170217021732174217421742174217421742365325829553086951673002846275521742178102302014年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。用 Bootstrap 的哥们，你们是怎么居中的？ · Ruby China
基础布局一般用Bootstrap都是向下面那样吧。
&div class=&container&&
&div class=&row&&
&div class=&span2&&
如果我想在一个span12里，居中，请问大家是用什么方法的？
我之前一直用着个不太好的方法，如：
&div class=&row&&
&div class=&offset5 span7&&
但是必须根据文本的长度来不停调节offset1,offset2....这样。而且好像不是完全居中。
请问有什么更方便的方法吗？
好像margin:0用不了哦。
block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是 display: table
display: table
width: auto
margin-left: auto
margin-right: auto
&center&&/center&
二楼什么状况？？
哦。是在span12里面的div设置为display: table吗？
哥们，本贴出现bug了。
m@QueXuQ 我来测试下新功能
原来真是bug。。。
可以加个 class
margin-left:
margin-right:
.text-center {
text-align:
&div class=&center&&
pla pla pla
这里有一个居中的实列
在span2加入下面的css
margin ：0 auto；
float：none；
9楼 已删除
直接text-align:center就可以了啊
可以参考这个网址
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
In markup this would look like:
&div class="row"&
&div class="col-md-2 col-md-offset-5"&&/div&
Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.
后方可回复, 如果你还没有账号请点击这里 。
共收到 10 条回复响应式布局及bootstrap（实例）_CSS教程_
响应式布局及bootstrap（实例）
来源：人气：2738
响应式布局及bootstrap（实例）说明：　　这几天公司要求网站实现响应式布局，所以对响应式布局进行了相对全面的了解，并做了几个实例。　　转载请注明源地址，谢谢^_^，/liu-zhen/p/4493679.html响应式布局介绍参考：维基百科，3 @media 查询，Bootstrap中文官网，鄙视IE，2014年5个最流行前端框架对比，自适应网页设计-阮一峰，响应式网页设计，响应式布局-百度百科，响应式网站设计原则，响应式布局这件小事，响应式 Web 设计新原则，什么是响应式布局设计？，自适应与响应式的区别，Foundation中文网响应式布局是什么意思？
响应式布局可以根据不同的浏览设备（PC端，平板，智能手机等）呈现不同的网页布局，同时减少缩放、平移和滚动。
适应移动端的大趋势，提高用户体验，减少开发成本。为什么要使用响应式布局？
主要是使网页适用于用于移动端设备，屏幕分辨率是出现的最大的兼容性问题。
可以为不同的设备提供不同的网站，也就是同一网站做普通PC端和移动端两种页面。不论是前期的开发还是后期的维护改版，都非常的麻烦。响应式布局的缺点？
兼容代码多，工作量大设计原则？适合什么样的项目？
向下兼容，移动优先。
对于非常复杂的网页布局，不适合进行网页自适应的布局，原因之一是实现成本太高，其次就是复杂页面（例如容商网首页，中国企业集群首页等）也不适合移动端的浏览。其他的响应式布局的框架？
ue框架是Yahoo的一款轻量级的框架，兼容IE7以上，性能好，但是中文文档少，不利于团队开发，没有。
Foundation by ZURB，次于Bootstrap，重量级，362K大小Bootstrap优势？
学习成本低
是目前最流行的自适应框架
性能非常好，最基础的文件大小只有149.1k
bootstrap.min.js
bootstrap.min.css
中文文档完善，还有全套的视频教程
有许多组件可以选择，如Bootstrap switch，Sco.js，Flat UI等，便于快速开发 兼容性Internet ExplorerSafariAndroid支持支持N/A不支持N/AiOS支持N/A不支持支持Mac OS X支持支持支持支持Windows支持支持支持支持不支持
windows平台，支持IE8，如果不用框架则需要IE9以上支持,而且通过插件Bsie（鄙视IE）可以兼容IE6。响应式布局实例响应式页面实例地址
/bootstrap-1/
/bootstrap-2/
/bootstrap-3/兼容性问题（分辨率分解-*~768手机,768~992平板,992~1200普通PC,1200~*大屏幕PC）
chrome18firefox11（firefox3.6）IE7（较少用户）IE8（主流）IE9（代表最新版本）IE6实例1-微博无无（无圆角）无无无崩溃实例2-相册圆角错误无圆角（无圆角，不支持背景尺寸属性）无无无崩溃实例3-博客圆角错误无圆角，进度条无动画（无圆角，进度条无动画）无无无崩溃其它说明chrome18和firefox都是旧版本的，用户非常少不支持背景属性可以用position和z-index属性解决IE6崩溃可以使用针对Bootstrap的插件Bsie解决大部分，但如果不要求对IE6支持，不建议使用，影响性能下图分别是无圆角，正常圆角，圆角错误，圆角是CSS3属性，所以会出现兼容问题，但IE7以上都支持，已经很好了（w3school说IE9以上才支持，说明使用了css hack）且官方文档里说明说明了这一点：/css/#images-shapes总结：支持主流浏览器，旧版本的浏览器出现的兼容性问题不大。　　其它需要改进
移动端测试兼容性问题（分辨率分解-1.
*~768手机，1栏2.
768~992平板，2栏3.
992~1200普通PC，2栏4.
1200~*大屏幕PC，3栏）分辨率dpippi型号竖横（手机）546MX4 pro1栏1栏720x1280（手机）华为荣耀3c1栏1栏（手机平板）华为 x1 7.01栏2栏800x1280（平板）toshiba wt8a(win 8.1系统)2栏3栏Acer win8.1--另外不知道为什么分辨率不能显示三栏而是只显示一栏，不知道dpi和ppi是什么意思，希望知道的大牛请回复，谢谢！^_^
优质网站模板在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问
h3. 这是一套可视化布局系统.
Git是一个分布式的版本控制系统，最初由Linus Torvalds编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在Ruby社区中。
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
github是一个全球化的开源社区.
关键词 开源
劳力士创始人为汉斯.威尔斯多夫，1908年他在瑞士将劳力士注册为商标。
Vacheron Constantin
始创于1775年的江诗丹顿已有250年历史，
是世界上历史最悠久、延续时间最长的名表之一。
创立于1868年的万国表有“机械表专家”之称。
卡地亚拥有150多年历史，是法国珠宝金银首饰的制造名家。
TB - Monthly
01/04/2012
TB - Monthly
01/04/2012
TB - Monthly
02/04/2012
TB - Monthly
03/04/2012
这里填写帮助信息.
Remember me
Hello, world!
这是一个可视化布局模板, 你可以点击模板里的文字进行修改, 也可以通过点击弹出的编辑框进行富文本修改. 拖动区块能实现排序.
本可视化布局程序在HTML5浏览器上运行更加完美, 能实现自动本地化保存, 即使关闭了网页, 下一次打开仍然能恢复上一次的操作.
冯诺尔曼结构
也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
改进型哈佛结构
改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
请尽量使用HTML5兼容的视频格式和视频代码实现视频播放, 以达到更好的体验效果.
第一部分内容.
第二部分内容.
警告! 请注意你的个人隐私安全.
手风琴切换
棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.