一、列表去除樣式和橫排排列 classs=“list-unstyled”,“list-inline”
二、【表格】.table 類指定基本樣式，.table-striped 條紋樣式，.table-bordered 類為邊框樣式，.table-hover 類帶鼠標懸停樣式，.table-condensed 類緊湊樣式。
狀態類(行或單元格設置顏色)：active，success，info，warning，info。
將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格.
響應式表格: 會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。
三、【按鈕】
1. 基本樣式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active、disabled（禁用）
2. 展現形式，btn-link、btn-block（塊形）、close、btn-outline(線性) btn-circle（圓形）btn-rounded（圓角）
3. 尺寸樣式，.btn-lg(大)、.btn-sm（小） 、.btn-xs（很小） 。
4.3D樣式， dim類
5.下拉按鈕組
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="buttons.html#">置頂</a></li>
<li><a href="buttons.html#">修改</a></li>
<li><a href="buttons.html#">禁用</a></li>
<li class="divider"></li>//分割線
<li><a href="buttons.html#">刪除</a></li>
</ul>
</div>
6.帶圖標的按鈕
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">上傳</span></button>
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 編輯</button>
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span></button>
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> 百度地圖</button>
<a class="btn btn-success">
<i class="fa fa-weixin"> </i> 分享到微信</a>
<a class="btn btn-success btn-outline">
<i class="fa fa-qq"> </i> 使用QQ賬號登錄</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-user-md"></i></a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-group"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-wrench"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-exchange"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-check-circle-o"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-road"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-ambulance"></i>
</a>
<a class="btn btn-white btn-bitbucket">
<i class="fa fa-star"></i> 收藏
</a>
四、【文本】
1. 文本對齊類，text-left，text-center，text-right，text-justify（兩端對齊），text-nowrap（禁止單元格內容換行）
2. 文本大小寫類，text-lowercase，text-uppercase，text-capitalize
3.內聯文本，使用<mark> 標簽表示標注文本，<del>刪除，<s>無用，<ins>插入，<u>下划線，<small>小號（父容器字體大小的 85%），<strong>着重，<em>斜體。
4.縮略語類，為 <abbr> 元素設置 title屬性並使用.initialism 類讓 font-size 變得稍微小些。例：<abbr title="attribute" class="initialism">attr</abbr>。
五、【表單】
1.內聯表單，<form> 元素添加 .form-inline 類可使其內容左對齊並且表現為 inline-block 級別的控件。只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。
2.所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中可以獲得最好的排列。不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。form-group，input-group，control-group，例子：
<form class="form-inline">
<div class="form-group">
<label>電子郵件</label>
<input type="email" class="form-control" placeholder="請輸入您的電子郵件">
</div>
<div class="form-group">
<label>編號</label>
<input type="number" class="form-control" placeholder="請輸入您的編號">
</div>
<div class="input-group">
<label class="input-group-addon">￥</label>
<input type="number" class="form-control" placeholder="輸入價錢">
</div>
</form>
圖例如下：全部水平放置
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" >電子郵件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="請輸入您的電子郵件">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" >密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="請輸入您的電子郵件">
</div>
</div>
</form>
圖例：輸入框和它前面的文字水平
3.復選框和單選框，用法一樣（.radio、.radio-inline、.checkbox、.checkbox-inline）
<div class="checkbox">
<label>
<input type="checkbox">體育
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled>科學
</label>
</div>
圖例：
4. 水平排列的表單。通過為表單添加 .form-horizontal 類改變 .form-group 的行為，使其表現為柵格系統中的行（row）
col-sm-2 水平柵格的兩列
col-sm-10水平柵格的十列
5.下拉列表
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
6.校驗狀態（錯誤，成功，警告）.has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。
<div class="form-group has-success">
<label class="col-sm-2 control-label" >密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" placeholder="請輸入您的電子郵件">
</div>
</div>
圖例：
7.添加額外的圖標： plyphicon-ok （成功狀態） plyphicon-warning-sign(警告狀態) plyphicon-remove（錯誤狀態）
控制大小：input-lg（大） input-sm(小)
<div class="form-group has-error has-feedback">
<label class="control-label" >電子郵件</label>
<input type="email" class="form-control input-lg" placeholder="請輸入您的電子郵件">
<span class="plyphicon plyphicon-remove form-control-feedback"></span>
</div>
8.圖片：img-rounded（圓角矩形）img-circle（橢圓）thumbnail（加邊框的矩形）img-responsive（響應式的格式）
<img src="img/a1.jpg" alt="圖片" class="img-rounded img-responsive">
<img src="img/a2.jpg" alt="圖片" class="img-circle">
<img src="img/a3.jpg" alt="圖片" class="img-thumbnail">
9. bootstrap用於使得頁面自適應移動設備的聲明語句
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
10.柵格系統 12列 超小屏幕（<768px）小屏幕（<=768px sm）中等屏幕（>=992px md）大屏幕（>=1200px lg）
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 a">1</div>
<div class="col-sm-1 a">2</div>
.
.
.
<div class="col-sm-1 a">11</div>
<div class="col-sm-1 a" >12</div>
</div>
</div>
圖例：
<div class="col-lg-3 col-md-4 col-sm-6 a" >12</div>//意味着當縮小屏幕，有4列，然后3列，2列依次減小
10.1 偏移
<div class="row">//
<div class="col-sm-8 a" >12</div>
<div class="col-sm-3 col-sm-offset-1 a" >12</div>//向右偏移一格
</div>
10.2 嵌套
10.3 交換
col-sm-push-5 //向右移動5個位置
col-sm-pull-7 //向左移動7個位置
六.搜索框
<div class="input-group">
<input type="text" placeholder="查找客戶" class="input form-control">
<span class="input-group-btn">
<button type="button" class="btn btn btn-primary"> <i class="fa fa-search"></i> 搜索</button>
</span>
</div>
七.提示notification
代碼：
<div class="tooltip-demo">
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="left" data-content="這里是提示內容">左側提示</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="top" data-content="這里是提示內容">頂部提示</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="這里是提示內容">底部提示</button>
<button type="button" class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="right" data-content="這里是提示內容">右側提示
</button>
</div>
加一個js文件：<script src="js/content.min.js?v=1.0.0"></script>
八.使用 Fancybox 插件實現圖片的美化展示
1.額外js文件的引入
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script>
$(document).ready(function(){$(".fancybox").fancybox({openEffect:"none",closeEffect:"none"})});
</script>
2.額外CSS的引入
<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
3.html代碼
<div class="ibox-content">
<a class="fancybox" href="img/p1.jpg" title="圖片1">
<img alt="image" src="img/p_big1.jpg" />
</a>
<a class="fancybox" href="img/p2.jpg" title="圖片2">
<img alt="image" src="img/p_big2.jpg" />
</a>
<a class="fancybox" href="img/p3.jpg" title="圖片3">
<img alt="image" src="img/p_big3.jpg" />
</a>
。。。
<a class="fancybox" href="img/p2.jpg" title="圖片8">
<img alt="image" src="img/p_big2.jpg" />
</a>
</div>
九.電子相冊滑動播放功能
1.額外js文件的引入
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
2.額外CSS的引入
<link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
3.html代碼
<div class="lightBoxGallery">
<a href="img/p_big1.jpg" title="圖片" data-gallery=""><img src="img/p1.jpg"></a>
<a href="img/p_big2.jpg" title="圖片" data-gallery=""><img src="img/p2.jpg"></a>
<a href="img/p_big3.jpg" title="圖片" data-gallery=""><img src="img/p3.jpg"></a>
<a href="img/p_big1.jpg" title="圖片" data-gallery=""><img src="img/p1.jpg"></a>
<a href="img/p_big2.jpg" title="圖片" data-gallery=""><img src="img/p2.jpg"></a>
<a href="img/p_big3.jpg" title="圖片" data-gallery=""><img src="img/p3.jpg"></a>
<a href="img/p_big1.jpg" title="圖片" data-gallery=""><img src="img/p1.jpg"></a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
十.單圖滑動 HTML內容
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="img/p_big3.jpg">
</div>
<div class="item">
<img alt="image" class="img-responsive" src="img/p_big1.jpg">
</div>
<div class="item ">
<img alt="image" class="img-responsive" src="img/p_big2.jpg">
</div>
</div>
<a data-slide="prev" href="carousel.html#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="carousel.html#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
十一.徽章，標簽，進度條
1.徽章類 badge badge-primary（基本）， badge-info，badge-success。。。
2.標簽類 label label-primary（基本），label-info，label-success，label-danger...
3.進度條：
<div class="ibox-content">
<h5>基本</h5>
<div class="progress">
<div style="width: 35%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="35" role="progressbar" class="progress-bar progress-bar-success">
<span class="sr-only">35% Complete (success)</span>
</div>
</div>
<div class="progress progress-bar-default">
<div style="width: 43%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="43" role="progressbar" class="progress-bar">
<span class="sr-only">43% Complete (success)</span>
</div>
</div>
<h5>條紋</h5>
<div class="progress progress-striped">
<div style="width: 50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar" class="progress-bar progress-bar-warning">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<h5>動畫</h5>
<div class="progress progress-striped active">
<div style="width: 75%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-danger">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>