Bootstrap之布局

Bootstrap,又一个流行的前端框架，也是我非常喜欢的框架之一，因为他轻量，和html，css结合的很好，如果只考虑样式，可以不用引用js，它的响应式样式效果很好，做起界面来非常快速，不需要知道很多知识，只要熟悉html,css就可以了，对于做切图或页面布局的员工来说，是个福音。
来看下网上对Bootstrap的描述：

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目.

Bootstrap官方提供了很详细的功能和实例:
点击打开 Bootstrap官方网站

加入手机适应的meta:

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap使用了Normalize.css样式重置库，以前项目里引用这个文件的，如果使用bootstrap就需要Normalize.css了。
.container和.container-fluid是两个自适应的包裹器，前者是中间布局，后者是100%宽的。
Bootstrap最强大的就是它的栅格系统，想想我们的网站大多都是两列或三列布局，一个页面中常有某些部分是可以分成几行几列的，这些都可以用栅格样式。如果产品经理也了解这个栅格系统，从设计和原型上遵从栅格式设计，那么开发的效率可以提高很多，最重要的是，它的学习成本很小。

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面显示器 (≥992px)	大屏幕 大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

上表显示了Bootstrap在不同屏幕尺寸下container 的宽度。它定义了四种尺寸的设备：超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)。它是移动优先的框架，也就是首先考虑的是移动设备。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

上面是一个栅格布局的示例，你可以定义xs,sm,md,lg四种样式，可以在不同屏幕分辨率下显示不同的列数，达到自适应的目的。样式是从低分辨率向高分辨率兼容的，你可以只定义xs样式，这样sm,md,lg三种尺寸下也显示和xs一样的布局，当然你可以覆盖，对每种尺寸都定义。
Bootstrap对主要的标签都进行了重新定义，这样在各种浏览器下都有一致的表现。另外，对一些ul,dl,h1~h5, table等也增加了很多常用样式，如：

<div class="table-responsive">
  <table class="table table-bordered">
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
  </table>
</div>

对form表单定义了form-inline form-horizontal和默认样式，还对表单元素增加了form-group，form-control checkbox radio checkbox-inline radio-inline等样式，再结合栅格系统，布局非常灵活。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

无论是文本颜色，还是按钮，表格行等，都默认定义了五种颜色，也可以依照增加更多种颜色样式：

还可以使用hidden-xs .visible-xs来控制不同屏幕下的元素显示与隐藏。