bootstrap初学备忘
在grid layout的时候，不同屏幕如果布局不同，比如：md设备我们想布局4列，而xs设备我们想布局2列，那么可以使用clearfix来换行。
<div class="col-xs-6 col-md-3">...</div> <div class="col-xs-6 col-md-3">...</div> <div class="clearfix visible-xs-block"></div> //表示针对xs设备会清除浮动，这样在电脑上是4列，在768像素一下的手机上面就是2列了 <div class="col-xs-6 col-md-3">...</div> <div class="col-xs-6 col-md-3">...</div>
bootstrap是移动优先的。
<div class="row">
<div class="col-xs-6"> 表示xs设备占据6列，并且其他设备也会同样占据6列
</div>
<div>
<div class="col-md-6"> xs设备默认占据12列，md以及lg设备占据6列。如果不指定xs，则每一个div都会自动占据一整行
</div>
label for的作用
label一般是用在form里面的。for属性用来和一个表单元素来绑定，绑定后，当我们点击该label的时候，被绑定的表单元素会自动获得焦点。 for有显示和隐式两种写法.
显式的联系：
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSn" />
隐式的联系：
<label>Date of Birth: <input type="text" name="DofB" /></label>
可折叠的panel-group
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 响应式的列重置</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <style> </style> </head> <body> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开，再次点击我进行折叠。第 1 部分 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开，再次点击我进行折叠。第 2 部分 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开，再次点击我进行折叠。第 3 部分 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> </div> </html>
inline-block
具备inline属性的元素，高度、行高、top, botoom, padding-top/bottom的设置都是无效的。但是inline-block具备了inline的特性，同时高度属性设置有效。
可以用inline-block来做float的效果。他不需要做clear的操作。相邻的inline-block属性会自动同行顺序排列，当遇到第一个不具有inline-block属性的元素的时候，则效果自动停止。
导航条去除边距圆角
设置navbar-static-top/fixed-top/fixed-bottom会去除掉
