文件頭：
DOCTYPE HTML
> <html> <head> <meta charset="utf-8"> <title>基礎表格</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head>
bootstrap在reset.css文件中設置margin為0，因此其他的標簽需要重新設計margin。
1.h
<h>標簽和普通使用方法一樣。
定義了.h1~.h6六個類名，樣式和標題樣式一樣。
副標題用<small>標簽指出，必須包含在h標簽內。
h1
>Bootstrap標題一</h1> <div class="h1">Bootstrap標題一</div>
<h1>Bootstrap標題一<small>我是副標題</small></h1>
2.p
定義<body>的字體庫、字號、行高、顏色，<p>標簽繼承這些設置，單獨設置margin-bottom為10px，使用方法同普通方法。
強調內容
增大：.lead;
加粗：<strong>; <b>（設置font-weight: bold）
斜體：<em>;<i> （設置font-style: italic）
不變：<cite>
變小：<small>,.small
強調類（顏色）
-
.text-muted：提示，使用淺
灰色（#999）
-
.text-primary：主要，使用
藍色（#428bca）
-
.text-success：成功，使用
淺綠色(#3c763d)
-
.text-info：通知信息，使用
淺藍色（#31708f）
-
.text-warning：警告，使用
黃色（#8a6d3b）
-
.text-danger：危險，使用
褐色（##a94442）
文本對齊
（設置text-align：center、left、right、justify）
☑ .text-left：左對齊
☑ .text-center：居中對齊
☑ .text-right：右對齊
☑ .text-justify：兩端對齊
3.列表（ul ol dl）
Bootstrap對於列表，只是在margin上做了一些調整
margin-top: 0;
margin-bottom: 10px;
（padding-left: 0;
list-style: none;）
<pre class=“.pre-scrollable”> 設置最大代碼區域
4.表格
千萬注意，你的<table>元素中一定不能缺少類名table
☑ .table：基礎表格
☑ .table-striped：斑馬線表格
☑ .table-bordered：帶邊框的表格
☑ .table-hover：鼠標懸停高亮的表格
☑ .table-condensed：緊湊型表格
☑ .table-responsive：響應式表格
table
class="table"> <thead> <tr> <th>表格標題</th> <th>表格標題</th> <th>表格標題</th> </tr> </thead> <tbody> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> </tbody> </table>
<tr>的不同行顏色
tbody
> <tr class="active"> <td>.active</td> <td>表示當前活動的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正確的行為</td> </tr> <tr class="info"> <td >.info</td> <td>表示中立的信息或行為</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告，需要特別注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危險或者可能是錯誤的行為</td> </tr> </tbody>
5.表單
<form role=”form”>
默認垂直顯示
用<div class=“form-group”>包圍控件及其標簽
對input select textarea設置.form-control
1、寬度變成了100%
2、設置了一個淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設置陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化
5、設置了placeholder的顏色為#999
水平風格表單：標簽在左，控件在右
1、在<form>元素是使用類名“form-horizontal”。
2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）
內聯表單 ：控件一行顯示
在<form>元素中添加類名“form-inline”
表單控件
select：<select multiple class="form-control"> 選擇多個
textarea： <textarea class="form-control" rows="3"></textarea>
radio，checkbox：div包着label包着input
div
class="checkbox"> <label> <input type="checkbox" value=""> 記住密碼 </label> </div>
radio，checkbox：水平排列
div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input
禁用控件：在控件上添加disabled屬性
<input class="input-lg" id="disabledInput" type="text" placeholder="表單已被禁用，不可輸入" disabled>
驗證狀態：form-group容器添加has-success等類;若想label同步變色需要在label上加.control-label;顯示icon需要在form-group加.has-feedback，最后加一個span存放icon
表單提示信息：
在form-group容器后加一個span，添加類名.help-block
button：四種方式，bootstrap用button實現，建議用button和a標簽來制作按鈕
<input type="button">
<input type="reset">
<input type="submit">
<button></button>
button樣式
.btn
.btn-default
大小：
.btn-lg
.btn-sm
.btn-xs
塊狀按鈕：按鈕充滿整個容器，沒有padding和margin .btn-block
禁用按鈕：添加類.disabled 或者添加屬性disabled=“disabled”
網格系統
分為12列，可以嵌套
.col-md-offset-4 .col-md-4 .col-md-push-* .col-md-pull-*
<div class="container"> <div class="row"> <div class="col-md-8"> 我的里面嵌套了一個網格 <div class="row"> <div class="col-md-6">col-md-6</div> <div class="col-md-6">col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> </div> </div> </div>
縮略圖
div
class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt=""> </a> </div> … </div> </div>
還可以添加標題、說明、按鈕，添加caption容器。
div
class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt=""> </a> <div class="caption"> <h3>Bootstrap框架系列教程</h3> <p>Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p> <p> <a href="##" class="btn btn-primary">開始學習</a> <a href="##" class="btn btn-info">正在學習</a> </p> </div> </div> … </div> </div>
警示框
1、成功警示框：告訴用用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；
2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；
3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；
4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色。
div
class="alert alert-success" role="alert">恭喜您操作成功！</div>
進度條
提供了兩個容器，外容器使用“progress”樣式，子容器使用“progress-bar”樣式。其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度。
div
class="progress"> <div class="progress-bar" style="width:40%"></div> </div>
媒體對象
div
class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">系列：十天精通CSS3</h4> <div>全方位深刻詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div> </div> </div>
列表組
ul
class="list-group"> <li class="list-group-item">揭開CSS3的面紗</li> <li class="list-group-item">CSS3選擇器</li> <li class="list-group-item">CSS3邊框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul>
在列表項的任何區域都可點擊
.list-group-item中可以包括：.list-group-text, .list-group-heading
.list-group-item可以設置：.active .disabled .list-group-item-success
div
class="list-group"> <a href="##" class="list-group-item">圖解CSS3</a> <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a> <a href="##" class="list-group-item">玩轉Bootstrap</a> </div>
面板
h3
>面板中嵌套列表組（一）</h3> <div class="panel panel-default"> <div class="panel-heading">圖解CSS3</div> <div class="panel-body"> <p>詳細講解了選擇器、邊框、背景、文本、顏色、盒模型、伸縮布局盒模型、多列布局、漸變、過渡、動畫、媒體、響應Web設計、Web字體等主題下涵蓋的所有CSS3新特性 </p> <ul class="list-group"> <li class="list-group-item">我是列表項</li> <li class="list-group-item">我是列表項</li> <li class="list-group-item">我是列表項</li> </ul> </div> <div class="panel-footer">作者：大漠</div> </div>
彈出框
modal
1.button觸發
觸發模態彈出窗的元素
--> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點擊我會彈出模態彈出窗</button> <!-- 模態彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態彈出窗內容 --> <div class="modal-header"> <h4>對話框</h4> </div> <div class="modal-body"><p>對話框內容</p></div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">關閉</button> <button class="btn btn-primary" data-dismiss="modal">完成</button> </div> </div> </div> </div>
2.綁定javascript事件
觸發模態彈出窗元素
--> <button class="btn btn-primary" type="button">點擊我</button> <!-- 模態彈出窗內容 --> <div class="modal" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模態彈出窗標題</h4> </div> <div class="modal-body"> <p>模態彈出窗主體內容</p> </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-dialog --> </div><!-- /.modal -->
$(function(){ $(".btn").click(function(){ $("#mymodal").modal(); }); });
