BootStrap

一、设置大小

lg、sm、xs

二、设置颜色

promary(首选项)、success(成功)、info(信息)、warning(警告)、danger(危险)、

三、两端对齐排列按钮组

兼容 IE8，每个按钮组放入另一个 .btn-grop中；
对于a 元素，只需将 .btn 包裹到 .btn-group .btn-group-justified 中即可

<div class="btn-group btn-group-justified">
    <a  class="btn btn-default">Left</a>
    <a  class="btn btn-success">Middle</a>
    <a  class="btn btn-default">Middle</a>  
</div><hr />

四、表单的水平排列 .form-horizontal

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-1 control-label">Email</label>

        <div class="col-sm-5">
          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        </div>
    </div>
</form>

五、内联单选、多选框 添加 .checkbox-inline 或 radio-inline

六、标签页

   <ul class="nav nav-tabs nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home列表</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile列表</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages列表</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings列表</a></li>
  </ul>
  <!-- Tab panes -->
 <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">home内容</div>
    <div role="tabpanel" class="tab-pane" id="profile">profile内容</div>
    <div role="tabpanel" class="tab-pane" id="messages">messages内容</div>
    <div role="tabpanel" class="tab-pane" id="settings">settings内容</div>
  </div>

js:

// ---------------------------- 标签页
$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)