Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：
通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：
1、重新設置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。3、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
標題的具體運用非常簡單，和我們平時運用是一樣的，使用<h1>~<h6>標簽，分別表示標題一至標題六，h 后面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。
在Bootstrap中為了讓非標題元素和標題使用相同的樣式，還特意定義了.h1~.h6六個類名。
除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：
1、行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置為灰色（#999）。2、由于<small>內的文本字體在h1~h3內，其大小都設置為當前字號的65%；而在h4~h6內的字號都設置為當前字號的75%；詳細代碼請參閱bootstrap.CSS文件中第407行~第443行。
h1 small,.h1 small,h2 small,.h2 small,h3 small,.h3 small,h1 .small,.h1 .small,h2 .small,.h2 .small,h3 .small,.h3 .small { font-size: 65%;}h4,.h4,h5,.h5,h6,.h6 { margin-top: 10px; margin-bottom: 10px;}h4 small,.h4 small,h5 small,.h5 small,h6 small,.h6 small,h4 .small,.h4 .small,h5 .small,.h5 .small,h6 .small,.h6 .small { font-size: 75%;}來簡單看其使用方法與最終效果：如右側代碼編輯器中12-17行代碼所示。
段落（正文文本）
段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式（這里所說的文本是指正文文本）：
1、全局文本字號為14px(font-size)。
2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。
3、顏色為深灰色（#333）；
4、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文并不太合適，但在實際項目中，大家可以根據自己的需求進行重置，在此我們不做過多闡述，我們回到這里。該設置都定義在<body>元素上，由于這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果。
/*源碼請查看bootstrap.css文件中第274行~280行*/
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}另外在Bootstrap中，為了讓段落p元素之間具有一定的間距，便于用戶閱讀文本，特意設置了p元素的margin值（默認情況之下，p元素具有一個上下外邊距，并且保持一個行高的高度）：/*源碼請查看bootstrap.css文件中第467行~469行*/
p { margin: 0 0 10px;}如果你對CSS預處理器有所了解，那么你完全可以根據Bootstrap提供的預編譯版本LESS(或者Sass)進行自定義排版設置。在Bootstrap中，排版設置的默認值都存在variables.less文件中(Sass版本存在_variables.scss中)的兩個變量：
LESS版本：
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14Sass版本：
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14第一條語句用于設置字體大小，第二條語句用于設置行高。系統默認使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說，你只需要修改這兩個變量的值，然后重新編譯，就可以自定義自己的Bootstrap排版樣式。
強調內容
在實際項目中，對于一些重要的文本，希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
如果想讓一個段落p突出顯示，可以通過添加類名“.lead”實現，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應的處理。用法如下：
<p>我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，</p><p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>效果查看最右側結果窗口。
“.lead”對應的樣式如下：/*源碼查看bootstrap.css文件第470行~480行*/
.lead {margin-bottom: 20px;font-size: 16px;font-weight: 200;line-height: 1.4;}@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/.lead {font-size: 21px; }}除此之外，Bootstrap還通過元素標簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/}/*源碼查看bootstrap.css文件第481行~第484行*/
small,.small { font-size: 85%; /*標準字體的85%,也就是14px * 0.85px，差不多12px*/}/*源碼查看bootstrap.css第485行~第487行*/
cite {font-style: normal;}粗體
粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設置為bold關鍵詞給文本加粗。在Bootstrap中，可以使用<b>和<strong>標簽讓文本直接加粗。/*源碼查看bootstrap.css文件第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/}例如，下面的代碼使用<strong>標簽定義了強調文本：
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知識。</p>斜體
在排版中，除了用加粗來強調突出的文本之外，還可以使用斜體。斜體類似于加粗一樣，除了可以給元素設置樣式font-style值為italic實現之外，在Bootstrap中還可以通過使用標簽<em>或<i>來實現。例如，下面的代碼使用了<em>和<i>標簽定義了強調文本：
<p>我在慕課網上跟<em>大漠</em>一起學習<i>Bootstrap</i>的使用。我一定要學會<i>Bootstrap</i>。</p>效果查看最右側結果窗口。
強調相關的類
在Bootstrap中除了使用標簽<strong>、<em>等說明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：
.text-muted：提示，使用淺灰色（#999）.text-PRimary：主要，使用藍色（#428bca）.text-success：成功，使用淺綠色(#3c763d).text-info：通知信息，使用淺藍色（#31708f）.text-warning：警告，使用黃色（#8a6d3b）.text-danger：危險，使用褐色（#a94442）具本源碼查看bootstrap.css文件第500行~第532行：
.text-muted {color: #999;}.text-primary {color: #428bca;}a.text-primary:hover {color: #3071a9;}.text-success {color: #3c763d;}a.text-success:hover {color: #2b542c;}.text-info {color: #31708f;}a.text-info:hover {color: #245269;}.text-warning {color: #8a6d3b;}a.text-warning:hover {color: #66512c;}.text-danger {color: #a94442;}a.text-danger:hover {color: #843534;}文本對齊風格
在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格：
? 左對齊，取值left
? 居中對齊，取值center
? 右對齊，取值right
? 兩端對齊，取值justify
為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：
? .text-left：左對齊
? .text-center：居中對齊
? .text-right：右對齊
? .text-justify：兩端對齊
具體源碼查看bootstrap.css文件第488行~第499行：
.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}例如下面的四行代碼，分別定義文本的四種不同的對齊風格：
<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">我兩端對齊</p>特別聲明：目前兩端對齊在各瀏覽器下解析各有不同，特別是應用于中文文本的時候。所以項目中慎用。
列表--簡介
在HTML文檔中，列表結構主要有三種：有序列表、無序列表和定義列表。具體使用的標簽說明如下：無序列表
<ul> <li>…</li></ul>有序列表
<ol> <li>…</li></ol>定義列表
<dl> <dt>…</dt> <dd>…</dd></dl>Bootstrap根據平時的使用情形提供了六種形式的列表：
? 普通列表
? 有序列表
? 去點列表
? 內聯列表
? 描述列表
? 水平描述列表
列表--無序列表、有序列表
無序列表
無序列表和有序列表使用方式和我們平時使用的一樣（無序列表使用ul，有序列表使用ol標簽），在樣式方面，Bootstrap只是在此基礎上做了一些細微的優化，源碼請查看bootstrap.css文件的第569行~第579行：
ul,ol { margin-top: 0; margin-bottom: 10px;}ul ul,ol ul,ul ol,ol ol { margin-bottom: 0;}從源碼上我們可以得知，Bootstrap對于列表，只是在margin上做了一些調整。我們來看一個簡單的示例(右側代碼編輯器10-16行)。
列表嵌套
在Bootstrap中列表也是可以嵌套的
列表--去點列表
小伙伴們可以看到，在Bootstrap中默認情況下無序列表和有序列表是帶有項目符號的，但在實際工作中很多時候，我們的列表是不需要這個編號的，比如說用無序列表做導航的時候。Bootstrap為眾多開發者考慮的非常周道，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。/*源碼請查看bootstrap.css文件第580行~第583行*/
.list-unstyled {padding-left: 0;list-style: none;}從示例中可以看出，除了項目編號之外，還將列表默認的左邊內距也清０了。
實現下圖效果：
代碼：<ol> <li>有序列表項目一</li> <li>有序列表項目二</li> <ul> <li class = "list-unstyled">有序二級項目列表一</li> <li class = "list-unstyled">有序二級項目列表二</li> <ul>無序三級項目列表一</ul> <ul>無序三級項目列表二</ul> <ul> <li class="list-unstyled">無序四級項目列表一</li> <li class="list-unstyled">無序四級項目列表二</li> </ul> <ul>無序三級項目列表三</ul> </ul> <li>有序列表項目三</li></ol>列表--內聯列表
Bootstrap像去點列表一樣，通過添加類名“.list-inline”來實現內聯列表，簡單點說就是把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。也可以說內聯列表就是為制作水平導航而生。/*源碼查看bootstrap.css文件第584行~第593行*/
.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}看個示例：
<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>php</li></ul>列表--定義列表
對于定義列表而言，Bootstrap并沒有做太多的調整，只是調整了行間距，外邊距和字體加粗效果。/*源碼請查看bootstrap.css文件第594行~第607行*/
dl {margin-top: 0;margin-bottom: 20px;}dt,dd {line-height: 1.42857143;}dt {font-weight: bold;}dd {margin-left: 0;}對于定義列表使用，其實很簡單，與我們以前的使用定義列表的方法是相同的：
<dl> <dt>W3cplus</dt> <dd>一個致力于推廣國內前端行業的技術博客</dd> <dt>慕課網</dt> <dd>一個真心在做教育的網站</dd></dl>列表--水平定義列表
水平定義列表就像內聯列表一樣，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現水平顯示效果。/*源碼請查看bootstrap.css文件第608行~第621行*/
@media (min-width: 768px) {.dl-horizontal dt {float: left;width: 160px;overflow: hidden;clear: left;text-align: right;text-overflow: ellipsis;white-space: nowrap; }.dl-horizontal dd {margin-left: 180px; }}此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實現主要方式：1、將dt設置了一個左浮動，并且設置了一個寬度為160px2、將dd設置一個margin-left的值為180px，達到水平的效果3、當標題寬度超過160px時，將會顯示三個省略號
其用法如下：
<dl class="dl-horizontal"> <dt>W3cplus</dt> <dd>一個致力于推廣國內前端行業的技術博客。它以探索為己任，不斷活躍在行業技術最前沿，努力提供高質量前端技術博文</dd> <dt>慕課網</dt> <dd>一個專業的，真心實意在做培訓的網站</dd> <dt>我來測試一個標題，我來測試一個標題</dt> <dd>我在寫一個水平定義列表的效果，我在寫一個水平定義列表的效果</dd></dl>寬屏下的效果（屏幕大于768px）：
當你縮小你的瀏覽器屏幕時，水平定義列表將回復到原始的狀態。
注：結果可以在最右側結果窗口中看到（鼠標滑過結果窗口時會出現“全屏”按鈕）
代碼（一）
本節內容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用于顯示代碼的風格。在Bootstrap主要提供了三種代碼風格：1、使用<code></code>來顯示單行內聯代碼2、使用<pre></pre>來顯示多行塊代碼3、使用<kbd></kbd>來顯示用戶輸入代碼
預編譯版本的Bootstrap將代碼的樣式單獨提取出來：1、LESS版本，請查閱code.less文件2、Sass版本，請查閱_code.scss文件編譯出來的CSS代碼請查閱bootstrap.css文件第688行~第730行，由于代碼太長，此處不一一列舉。
在使用代碼時，用戶可以根據具體的需求來使用不同的類型：1、<code>：一般是針對于單個單詞或單個句子的代碼2、<pre>：一般是針對于多行代碼（也就是成塊的代碼）3、<kbd>:一般是表示用戶要通過鍵盤輸入的內容
雖然不同的類型風格不一樣，但其使用方法是類似的。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>不管使用哪種代碼風格，在代碼中碰到小于號（<）要使用硬編碼“<”來替代，大于號(>)使用“>”來替代。而且對于<pre>代碼塊風格，標簽前面留多少個空格，在顯示效果中就會留多少個空格。建議在編寫HTML標簽時，就控制好，例如查看右側代碼編輯器上的15-19行。
代碼（二）
正如前面所示，<pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。/*源碼請查看bootstrap.css第731行~第734行*/
.pre-scrollable {max-height: 340px;overflow-y: scroll;}友情提示：如果您了解LESS或Sass這樣的CSS預定定義處理器，你完全可以通過code.less或者_code.scss文件修改樣式，然后重新編譯，你就可以得到屬于自己的代碼樣式風格。
表格
表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格。在使用Bootstrap的表格過程中，只需要添加對應的類名就可以得到不同的表格風格，在接下來的內容中，我們會詳細介紹Bootstrap的表格使用。
同樣的，如果你對CSS預處理器熟悉，你可以使用Bootstrap提供的預處理版本： ? LESS版本，對應的文件是 tables.less ? Sass版本，對應的文件是 _tables.scss
如果你不懂LESS或Sass也不妨，你在bootstrap.css文件中第1402行~第1630行中可以查閱到所有有關于table的樣式代碼。由于代碼太長，此處不一一列舉。
剛已經說了，Bootstrap為表格不同的樣式風格提供了不同的類名，主要包括：
? .table：基礎表格
? .table-striped：斑馬線表格
? .table-bordered：帶邊框的表格
? .table-hover：鼠標懸停高亮的表格
? .table-condensed：緊湊型表格
? .table-responsive：響應式表格
表格--表格行的類
Bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說明如下表所示：
其使用非常的簡單，只需要在<tr>元素中添加上表對應的類名，就能達到你自己需要的效果：
<tr class="active"> <td>…</td></tr>對應的源碼，請查看bootstrap.css文件中第1484行~第1583行。
特別提示：除了”.active”之外，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應的懸浮狀態的樣式設置，所以如果需要給tr元素添加其他顏色樣式時，在”.table-hover”表格中也要做相應的調整。
注意要實現懸浮狀態，需要在<table>標簽上加入table-hover類。
如下代碼：
<table class="table-hover">表格--基礎表格
大家對表格并不太陌生，但對于Bootstrap中的表格如何使用，或許還有點陌生，接下來的內容，將根據不同的表格類型向大家介紹Bootstrap表格的實際使用方法。對表格的結構，跟我們平時使用表格是一樣的：
<table><thead><tr><th>表格標題</th>…</tr></thead><tbody><tr><td>表格單元格</td>…</tr> …</tbody></table>如無特別聲明，下面介紹表格類型的時候，結構都是類似上面的代碼?；A表格在Bootstrap中，對于基礎表格是通過類名“.table”來控制。如果在<table>元素中不添加任何類名，表格是無任何樣式效果的。想得到基礎表格，我們只需要在<table>元素上添加“.table”類名，就可以得到Bootstrap的基礎表格：
<table class="table">…</table>Bootstrap的基礎表格，大致長得像下圖所示的樣子：
主要源碼查看bootstrap.css文件第1402行～第1441行，由于代碼太長，此處不一一列舉。
“.table”主要有三個作用：
? 給表格設置了margin-bottom:20px以及設置單元內距
? 在thead底部設置了一個2px的淺灰實線
? 每個單元格頂部設置了一個1px的淺灰實線
表格--斑馬線表格
有時候為了讓表格更具閱讀性，需要將表格制作成類似于斑馬線的效果。簡單點說就是讓表格帶有背景條紋效果。在Bootstrap中實現這種表格效果并不困難，只需要在<table class="table">的基礎上增加類名“.table-striped”即可：
<table class="table table-striped">…</table>其效果與基礎表格相比，僅是在tbody隔行有一個淺灰色的背景色。其實現原理也非常的簡單，利用CSS3的結構性選擇器“:nth-child”來實現，所以對于IE8以及其以下瀏覽器，沒有背景條紋效果。
源碼請查看bootstrap.css文件第1465行~第1468行：
.table-striped > tbody > tr:nth-child(odd) > td,.table-striped > tbody > tr:nth-child(odd) > th {background-color: #f9f9f9;}表格--帶邊框的表格
基礎表格僅讓表格部分地方有邊框，但有時候需要整個表格具有邊框效果。Bootstrap出于實際運用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎表格<table class="table">基礎上添加一個“.table-bordered”類名即可：
<table class="table table-bordered"> …</table>樣式如下圖所示：
其源碼可以查看bootstrap.css文件第1450行~第1464行：
.table-bordered { border: 1px solid #ddd;/*整個表格設置邊框*/}.table-bordered > thead > tr > th,.table-bordered > tbody > tr > th,.table-bordered > tfoot > tr > th,.table-bordered > thead > tr > td,.table-bordered > tbody > tr > td,.table-bordered > tfoot > tr > td { border: 1px solid #ddd; /*每個單元格設置邊框*/}.table-bordered > thead > tr > th,.table-bordered > thead > tr > td { border-bottom-width: 2px;/*表頭底部邊框*/}表格--鼠標懸浮高亮的表格
當鼠標懸停在表格的行上面有一個高亮的背景色，這樣的表格讓人看起來就是舒服，時刻告訴用戶正在閱讀表格哪一行的數據。Bootstrap的確沒有讓你失望，他也考慮到這種效果，其提供了一個“.table-hover”類名來實現這種表格效果。鼠標懸停高亮的表格使用也簡單，僅需要<table class="table">元素上添加類名“table-hover”即可：
<table class="table table-hover">…</table>效果圖如下：
從效果圖中可以看出，當你鼠標懸浮在某一單元格上時，單元格所在行的背景色都會變成淺灰色。
鼠標懸浮高亮的效果主要是通過“hover”事件來實現，設置了“tr:hover”時的th、td的背景色為新顏色。其源碼請查看bootstrap.css文件中第1469行~第1472行：
.table-hover > tbody > tr:hover > td,.table-hover > tbody > tr:hover > th {background-color: #f5f5f5;}注：其實，鼠標懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡單點說，只要你想讓你的表格具備懸浮高亮效果，你只要給這個表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結合使用：
<table class="table table-striped table-bordered table-hover">…</table>表格--緊湊型表格
何謂緊湊型表格，簡單理解，就是單元格沒內距或者內距較其他表格的內距更小。換句話說，要實現緊湊型表格只需要重置表格單元格的內距padding的值。那么在Bootstrap中，通過類名“table-condensed”重置了單元格內距值。緊湊型表格的運用，也只是需要在<table class="table">基礎上添加類名“table-condensed”：
<table class="table table-condensed">…</table>效果圖如下：
從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎表格差別不大，因為只是將單元格的內距由8px調至5px。
源碼請查看bootstrap.css文件第1442行~第1449行：
.table-condensed > thead > tr > th,.table-condensed > tbody > tr > th,.table-condensed > tfoot > tr > th,.table-condensed > thead > tr > td,.table-condensed > tbody > tr > td,.table-condensed > tfoot > tr > td {padding: 5px;}正如上一小節中懸浮高亮表格中所講解的，在Bootstrap中制作表格中，可以將上面幾種表格樣式結合在一起使用，從而制作出更為精美的表格。結合的方法也很簡單，就是在<table class="table">基礎上添加你需要的表格樣式類型。
另外從上面的示例中大家可能也發現了，不管制作哪種表格都離不開類名“table”。所以大家在使用Bootstrap表格時，千萬注意，你的<table>元素中一定不能缺少類名“table”。
表格--響應式表格
隨著各種手持設備的出現，要想讓你的Web頁面適合千羅萬像的設備瀏覽，響應式設計的呼聲越來越高。在Bootstrap中也為表格提供了響應式的效果，將其稱為響應式表格。Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置于這個容器當中，這樣表格也就具有響應式效果。Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。示例如下：
<div class="table-responsive"><table class="table table-bordered"> …</table></div>運行效果如下：
（寬屏效果）
（窄屏效果）
新聞熱點
疑難解答
