标签：
Bootstrap:简洁、直观、强悍、移动设备优先的前端开发框架，让web开发更加迅速、简单。
Bootstrap设置了全局样式，有显示，排版和链接。
用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配栅格系统。
例如：<div class=”container”>
………
<div>
栅格系统
栅格系统是bootstrap内置的一套响应式布局的系统。它可以随着设备屏幕的大小变化而变化，它包含了易于使用的预定义classe，还有强大的mixin用于生成更好的语义布局。
栅格系统可以通过.row（行）和coiumn（列）的组合来对页面进行布局，
超小屏幕设备（手机）： 小于768px。最大在.container的宽度是100%自动变化。Class前缀为.col-xs-。列数为12。
小屏幕设备（平板）： 大于768px，小于992px。最大在.container的宽度是750px。Class前缀为.col-sm-。列数为12。
中等屏幕设备（电脑桌面）：大于992px，小于1200px。最大在.container的宽度是970px。Class前缀为.col-md-。列数为12。
大屏幕设备（电脑桌面）：大于1200px。最大在.container的宽度是1170px。Class前缀为.col-lg-。列数为12。
列偏移
通过编写.col-md-offset-可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如：.col-md-offset-5将该元素享有移动4个列的宽度。
<div class="row">
<div class="col-md-4">第一部分</div>
<div class="col-md-4 col-md-offset-4">第二部分</div>
</div>
第一部分占前四格。第二部分占四格。但运用了.col-md-offset-4，向右移动四个，所以第一部分在最左边的4格。第二部分在最右边的4格。
嵌套
为了更方便布局，可以在栅格系统中将内容嵌套。方法便是通过在嵌套元素上添加新的.row和乙烯利的.col-md-列到已经存在的.col-md列内就能实现你自己想要的布局效果.新添加的row也包含了12个列。且能自行选择数值。
例如：
<div class=”row”>
<div class=”col-md-9”>
haha
<div class=”row”>
<div class=”col-md-9”>
Hehe
</div>
</div>
</div>
</div>
含有“haha”的文本占9个栅格。在这个文本将其分为12列，hehe占其中的9个栅格。
排列序
可以通过使用.col-md-push和.col-md-pull来改变序列的顺序位置。
<div class="row">
<div class="col-md-9 col-md-push-3">
呵呵
</div>
<div class="col-md-3 col-md-pull-9">
哈哈
</div>
</div>
包含“呵呵”的文本占9个栅格。偏向左移动3个栅格的位置，同理。包含“哈哈”的文本占3个栅格。占取前3个栅格的位置。
排版
标题：在HTML中的所有标题标签都可以使用<h1>到<h6>的标签，除此之外，其还提供了<h1>到<h6>的标签的class样式。
主题页面：bootstrap内置将包含在内所有文字的大小默认设置为了14px。行高为1.428，这些属性直接赋给了<body>元素。<p>元素还被谁知了1/2的行高的底部外边局为10px。
标签：
原文地址：http://www.cnblogs.com/z5206808/p/4581984.html
