bootstrap框架
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。Bootstrap 的響應式 CSS 能夠自適應於台式機、平板電腦和手機。使用bootstrap框架時，切記不能改變class的組名，如果需要建組設置屬性，就再增加一個class組，下面的Bootstrp只是一些比較常用的屬性，如果需要用到其他的屬性，就到http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html網站調用。
1.Bootstrap 的網格系統
Bootstrap 提供了一套響應式、移動設備優先的流式網格系統，隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了用於簡單的布局選項的預定義類，也包含了用於生成更多語義布局的功能強大的混合類。Bootstrap 3 是移動設備優先的，在這個意義上，Bootstrap 代碼從小屏幕設備（比如移動設備、平板電腦）開始，然后擴展到大屏幕設備（比如筆記本電腦、台式電腦）上的組件和網格。移動設備上優先是指1.在內容上決定什么事最重要的；2.在布局上，優先設計更小的寬度，基礎的 CSS 是移動設備優先，媒體查詢是針對於平板電腦、台式電腦；3.逐漸增強，隨着屏幕大小的增加而添加元素；4.響應式網格系統隨着屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列，這12列相鄰的列也可以合並。
2.Bootstrap 排版
a.標題 Bootstrap 中定義了所有的 HTML 標題（h1 到 h6）的樣式。例如h1： <h1>標題 <small>副標題1</small></h1>，副標題顏色和大小不如正標題明顯。
b.引導主題副本 為了給段落添加強調文本，則可以添加 <p class="lead"></p>，這將得到更大更粗、行高更高的文本。
c.強調 <strong>（設置文本為更粗的文本）、<em>（設置文本為斜體）。<strong>增強語氣的文本</strong>。
3. Bootstrap按鈕
常用的按鈕有下列按鈕：
<!-- 標准的按鈕 --> <button type="button" class="btn btn-default">默認按鈕</button>
<!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 --> <button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應謹慎采取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button>
<!-- 並不強調是一個按鈕，看起來像一個鏈接，但同時保持按鈕的行為 --> <button type="button" class="btn btn-link">鏈接按鈕</button>
按鈕的大小控制：
.btn-lg 這會讓按鈕看起來比較大。
.btn-sm 這會讓按鈕看起來比較小。
.btn-xs 這會讓按鈕看起來特別小。
.btn-block 這會創建塊級的按鈕，會橫跨父元素的全部寬度。
按鈕禁用：disabled 當禁用一個按鈕時，它的顏色會變淡 50%，並失去漸變。<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>
4.Bootstrap圖片
.img-rounded 為圖片添加圓角
.img-circle 將圖片變為圓形
.img-thumbnail 縮略圖功能
.img-responsive 圖片響應式
5.Bootstrap響應式實用工具
超小屏幕 小屏幕 中等屏幕 大屏幕
手機 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200px)
.visible-xs-* 可見 隱藏 隱藏 隱藏
.visible-sm-* 隱藏 可見 隱藏 隱藏
.visible-md-* 隱藏 隱藏 可見 隱藏
.visible-lg-* 隱藏 隱藏 隱藏 可見
.hidden-xs 隱藏 可見 可見 可見
.hidden-sm 可見 隱藏 可見 可見
.hidden-md 可見 可見 隱藏 可見
.hidden-lg 可見 可見 可見 隱藏
6.Bootstrap下拉菜單 如需使用下列菜單，只需要在 class .dropdown 內加上下拉菜單即可。
例如：
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li>
<li role="presentation"> <a role="menuitem" tabindex="-1" href="#">數據挖掘</a> </li>
</ul>
上面代碼表示一個下拉菜單，下拉名稱為主題，下拉項有Java和數據挖掘2項。
7.Bootstrap輸入框組
使用輸入框組，可以很容易地向基於文本的輸入框添加作為前綴和后綴的文本或按鈕。通過向輸入域添加前綴和后綴的內容，可以向用戶輸入添加公共的元素。例如用戶名輸入框、密碼輸入框，郵箱輸入，都可以用到。
輸入框組大小的調整：可以通過向 .input-group 添加相對表單大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）來改變輸入框組的大小。輸入框中的內容會自動調整大小。
8.Bootstrap導航元素
導航元素以一個帶有 class .nav 的無序列表開始。代碼示例如下：導航欄的名稱為導航菜單，導航元素里有Home、SVN、iOS、VB.Net、Java、PHP 6個選項。
<p>導航菜單</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
9.Bootstrap警告（Alerts）
創建一個 <div>，並向其添加一個 .alert class 和四個上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，來添加一個基本的警告框。
示例：
<div class="alert alert-success">成功！很好地完成了提交。</div> <div class="alert alert-info">信息！請注意這個信息。</div> <div class="alert alert-warning">警告！請不要提交。</div> <div class="alert alert-danger">錯誤！請進行一些更改。</div>
10.Bootstrap輪播
<div id="myCarousel" class="carousel slide"> <!-- 輪播（Carousel）指標 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- 輪播（Carousel）項目 --> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div> <!-- 輪播（Carousel）導航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a> <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a> </div>