bootstrap

runoob学bt： http://www.runoob.com/bootstrap/bootstrap-forms.html

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<div class="col-sm-offset-2 col-sm-10">http://www.runoob.com/try/try2.php?filename=bootstrap3-form-horizontal

块级按钮(拉伸至父元素100%的宽度)



a.浮动布局缺陷：
1、每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”
解决：限高height:15px; over-flow:hidden;
参见 
2、要清除浮动，撑开父级元素
解决：兄弟添加clear：both  或者父级：添加 clearfix

b.表格布局

c.流体布局  display:inline-block
就是每一行所有的inline元素和inline-block元素会共同形成一个line boxes，这个line box的高度由里面最高的元素决定。所以，即使inline-block属性的列表元素高度异常，撑开的是整个line boxes的高度，因而，不会与下一行的列表元素发生错位。

参考资料：张鑫旭大神   http://dwz.cn/3ArfR1

所有字体图标： http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

Bootstrap 折叠（Collapse）插件:
    响应式的导航栏:为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

警告框

<div class="alert alert-warning">
   <a href="#" class="close" data-dismiss="alert">
      &times;
   </a>
   <strong>警告！</strong>您的网络连接有问题。
</div>

bootstrap工具： http://www.runoob.com/bootstrap/bootstrap-ui-editor.html

bootstrap规范： http://www.runoob.com/bootstrap/bootstrap-html-codeguide.html