文件頭：
<!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;
去除項目符號
.list-unstyled
（padding-left: 0; list-style: none;）
內聯列表，制作水平導航
.list-inline
代碼
<code> <pre> <kbd>
<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>