兼容ie:<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
移動設備: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/static/assets/js/respond.min.js"></script>
<![endif]-->
網格：
超小設備 小型設備 中型設備 大型設備
寬度：col-xs .col-sm .col-md .col-lg
偏移：col-md-offset-1
排序：col-md-push col-md-pull
排版：
<h1><h1><small><small><h1> .lead <blockquote></blockquote> .initialism 縮寫 list-inline list-unstyled
containter 居中 containter-fluid 流式佈局
page-header 頭
page-body
row 行 span 塊
表格類
.table .table-bordered .table-hover
.table-striped 內添加斑馬線形式的條紋 ( IE8 不支持)
.active .success .info .warning .danger
表單
垂直表單：role="form" .form-group .form-control
內聯並排表單： .form-inline role="form" .form-group .form-control
水平表單(lable、input元素在同一行)：.form-horizontal role="form" .form-group .control-label
.form-control
單選擇框 radio 與checkbox
垂直： checkbox checkbox radio radio
內聯: checkbox-inline radio-inline
選擇框 select: .multiple 可多選
靜態控件 .form-control-static
focus 獲取焦點
disabled 禁用
按鈕：.btn .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link .active
.disabled .btn-lg .btn-sm .btn-xs .btn-block
大小：.input-lg .input-sm <span class="help-block"></span>標籤label label-default label-primary label-success label-info label-warning label-danger
圖片.img-rounded 添加圓角 .img-circle 圓形.img-thumbnail 添加一些內邊距（padding）和一個灰色的邊框.img-responsive
文本：.text-left .text-center .text-right .text-muted .text-primary .text-success .text-info .text-warning .text-danger背景：.bg-primary .bg-success .bg-info .gb-waning .bg-danger提示警告 alert-success alert-info alert-warning alert-danger alert-dismissable
其他：.pull-left .pull-right .center-block .clearflax .hidden show sr-only
<code>< pre> 顯示代碼
.text-hide 將頁面元素所包含的文本內容替換爲背景圖 .close 顯示關閉按鈕 .caret 顯示下拉式功能 caret 插入符
下拉菜單：.
按鈕組：.btn-group .btn-toolbar .btn-group-vertical 垂直堆疊顯示
按鈕下拉：input-group-addon
導航：nav nav-tables nav-pills(膠囊樣式)nav-stacked .nav-justified disabled
導航欄：.navbar navbar-default role="navigation" nav navbar-navnavbar-inverse麪包屑 .breadcrumb 徽章 badge大屏幕 jumbotron縮略圖.thumbnail進度條 progress-bar多媒體 media
列表組 list-group list-group-item面板 panel panel-heading panel-body panel-info panel-success panel-error well
模擬框Modal
下拉菜單（Dropdown）
滾動監聽（Scrollspy）
標籤頁（Tab）
提示工具（Tooltip）
彈出框（Popover）
警告框（Alert）
按鈕（Button）插件
摺疊（Collapse）
輪播（Carousel）
附加導航（Affix）
旋轉木馬carousel-inner
摺疊內容collapse
選項卡：
table-p
breadcrmb 導航路徑分頁器ul/li
-----------modal 對話框----------------------------
<a href="page.html" data-toggle="modal" data-targer-"#mymodel">彈出</a>
<div id="mymodal" class="modal hide fade">
<div class="modal-header">
<button type="btn" class="colose" data-dismiss="modal"></button>
<h3>對話框標題<h3>
</div>
<div class="modal-body">
<p>對話框主題</p>
</div>
<div class="modal-footer">
<a href="btn" data-dismiss="modal">取消</a>
<a href="#" class="btn btn-primary" data-dismiss = "modal">確定</a>
<div>
</div>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
在這裏添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">關閉
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div>
<!-- /.modal -->
--------左右可切換式標籤頁
------------------
<ulclass="nav
nav-tabs"id="myTab">
<liclass="active"><ahref="#home">首頁</a></li>
<li><ahref="#profile">Profile</a></li>
</ul>
<divclass="tab-content">
<divclass="tab-pane
active"id="home">...</div>
<divclass="tab-pane"id="profile">...</div>
</div>
--------彈出提示
------------------
--------警告
------------------
<aclass="close"data-dismiss="alert"href="#">×</a>
--------上下摺疊---------------------------------
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in"> … </div>
左側導航
<div class="">
<a href="#userMeun" class="nav-header collapsed" data-toggle="collapse"><i class="icon-user-md icon-large"></i> 用戶管理</a>
<ul id="userMeun" class="nav nav-list collapse">
<li><a href="#"><i class="icon-user"></i> 增加用戶</a></li>
<li><a href="#"><i class="icon-edit"></i> 修改用戶</a></li>
<li><a href="#"><i class="icon-trash"></i> 刪除用戶</a></li>
<li><a href="#"><i class="icon-list"></i> 用戶列表</a></li>
</ul>
<a href="#articleMenu" class="nav-header collapsed" data-toggle="collapse"><i class="icon-book icon-large"></i> 文章管理</a>
<ul id="articleMenu" class="nav nav-list collapse">
<li><a href="#"><i class="icon-pencil"></i> 添加文章</a></li>
<li><a href="#"><i class="icon-list-alt"></i> 文章列表</a></li>
</ul>
</div>