1、標題：
（1）標籤<h1>到<h6>，但是Bootstrap覆蓋了其默認樣式。
（2）通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：
- 重新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
- 所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
- 固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
（3）在Bootstrap中爲了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6六個類名。
<!--Bootstrap中讓非標題元素和標題使用相同的樣式-->
<div class="h1">Bootstrap標題一</div>
<div class="h2">Bootstrap標題二</div>
<div class="h3">Bootstrap標題三</div>
<div class="h4">Bootstrap標題四</div>
<div class="h5">Bootstrap標題五</div>
<div class="h6">Bootstrap標題六</div>
（4）使用了<small>標籤來製作副標題。樣式如下：
- 行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
- 由於<small>內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%；
例如：
<h1>XXXXXXXXXXXX<small>YYYYYYY</small></h1>
2、段落（正文文本）
（1）在Bootstrap中爲文本設置了一個全局的文本樣式（這裏所說的文本是指正文文本）：
- 全局文本字號爲14px(font-size)。
- 行高爲1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。
- 顏色爲深灰色（#333）；
- 字體爲"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family）
（2）該設置都定義在<body>元素上，由於這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。
3、強調突出：
- 如果想讓一個段落p突出顯示，可以通過添加類名“.lead”實現，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。
- Bootstrap還通過元素標籤:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。
<p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>
4、粗體：
- 在普通的元素中我們一般通過font-weight設置爲bold關鍵詞給文本加粗。
- 在Bootstrap中，可以使用<b>和<strong>標籤讓文本直接加粗。
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知識。</p>
5、斜體：
- 斜體類似於加粗一樣，除了可以給元素設置樣式font-style值爲italic實現之外
- 在Bootstrap中還可以通過使用標籤<em>或<i>來實現
<p>我在慕課網上跟<em>大漠</em>一起學習<i>Bootstrap</i>的使用。我一定要學會<i>Bootstrap</i>。</p>
6、強調相關的類：
Bootstrap還定義了一套類名，這裏稱其爲強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：
- .text-muted：提示，使用淺灰色（#999）
- .text-primary：主要，使用藍色（#428bca）
- .text-success：成功，使用淺綠色(#3c763d)
- .text-info：通知信息，使用淺藍色（#31708f）
- .text-warning：警告，使用黃色（#8a6d3b）
- .text-danger：危險，使用褐色（#a94442）
<div class="text-danger"></div>
7、文本對齊：
Bootstrap通過定義四個類名來控制文本的對齊風格：
- .text-left：左對齊
- .text-center：居中對齊
- .text-right：右對齊
- .text-justify：兩端對齊
<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我兩端對齊</p>
8、列表：
Bootstrap根據平時的使用情形提供了六種形式的列表：
☑ 普通列表
☑ 有序列表
☑ 去點列表
☑ 內聯列表
☑ 描述列表
☑ 水平描述列表
（1）無序列表、有序列表：
- 無序列表和有序列表使用方式和我們平時使用的一樣（無序列表使用ul，有序列表使用ol標籤）
- 在樣式方面，Bootstrap只是在此基礎上做了一些細微的優化
- Bootstrap對於列表，只是在margin上做了一些調整
（2）去點列表：
Bootstrap爲衆多開發者考慮的非常周道，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。
（3）內聯列表：
Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內聯列表就是爲製作水平導航而生。
（4）定義列表：
<dl>
<dt>W3cplus</dt>
<dd>一個致力於推廣國內前端行業的技術博客</dd>
<dt>慕課網</dt>
<dd>一個真心在做教育的網站</dd>
</dl>
（5）水平定義列表：
Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一個致力於推廣國內前端行業的技術博客。它以探索爲己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd>
<dt>慕課網</dt>
<dd>一個專業的，真心實意在做培訓的網站</dd>
<dt>我來測試一個標題，我來測試一個標題</dt>
<dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd>
</dl>
寬屏效果：
縮小屏幕後：
9、代碼：
（1）在Bootstrap主要提供了三種代碼風格：
- 使用<code></code>來顯示單行內聯代碼
- 使用<pre></pre>來顯示多行塊代碼
- 使用<kbd></kbd>來顯示用戶輸入代碼
（2）在使用代碼時，用戶可以根據具體的需求來使用不同的類型：
- <code>：一般是針對於單個單詞或單個句子的代碼
- <pre>：一般是針對於多行代碼（也就是成塊的代碼）
- <kbd>:一般是表示用戶要通過鍵盤輸入的內容
（3）示例：
code風格：
<div>Bootstrap的代碼風格有三種：
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
pre風格：
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd風格：
<div>請輸入<kbd>ctrl+c</kbd>來複制代碼，然後使用<kbd>ctrl+v</kbd>來粘貼代碼</div>
（4）注意：
不管使用哪種代碼風格，在代碼中碰到小於號（<）要使用硬編碼“<”來替代，大於號(>)使用“>”來替代。而且對於<pre>代碼塊風格，標籤前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標籤時，就控制好。
（5）控制顯示pre標籤的代碼塊高度：
只需要在pre標籤上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度爲340px，一旦超出這個高度，就會在Y軸出現滾動條。
10、表格：
（1）Bootstrap爲表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。
（2）千萬注意，你的<table>元素中一定不能缺少類名“table”
☑ .table：基礎表格
☑ .table-striped：斑馬線表格
☑ .table-bordered：帶邊框的表格
☑ .table-hover：鼠標懸停高亮的表格
☑ .table-condensed：緊湊型表格
☑ .table-responsive：響應式表格
（3）Bootstrap還爲表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：
特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應的懸浮狀態的樣式設置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應的調整。 注意要實現懸浮狀態，需要在<table>標籤上加入table-hover類。
<table class="table-hover">
（4）基礎表格：
表格結構：
<table>
<thead>
<tr>
<th>表格標題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
…
</tbody>
</table>
在Bootstrap中，對於基礎表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎表格：
<table class="table">
…
</table>
“.table”主要有三個作用：
☑ 給表格設置了margin-bottom:20px以及設置單元內距
☑ 在thead底部設置了一個2px的淺灰實線
☑ 每個單元格頂部設置了一個1px的淺灰實線
（5）斑馬線表格：
就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果並不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可：
<table class="table table-striped">
…
</table>
（6）帶邊框的表格：
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可：
<table class="table table-bordered">
…
</table>
（7）鼠標懸浮高亮的表格：
Bootstrap提供了一個“.table-hover”類名來實現這種表格效果。
鼠標懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可：
<table class="table table-hover">
…
</table>
（8）緊湊型表格：
緊湊型表格，就是單元格沒內距或者內距較其他表格的內距更小。
在Bootstrap中，通過類名“table-condensed”重置了單元格內距值。
緊湊型表格的運用，也只是需要在<table class="table">基礎上添加類名“table-condensed”：
<table class="table table-condensed">
…
</table>
（9）響應式表格：
Bootstrap提供了一個容器，並且此容器設置類名“.table-responsive”, 此容器就具有響應式效果，然後將<table class="table">置於這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現爲：當你的瀏覽器可視區域小於768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大於768px時，表格底部水平滾動條就會消失。示例如下：
<div class="table-responsive">
<table class="table table-bordered">
…
</table>
</div>