推薦閱讀：Bootstrap入門書籍之（零）Bootstrap簡介
Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧。
使用 Bootstrap 的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素。
1. 標(biāo)題
在Bootstrap中使用標(biāo)題的方式和常規(guī)html一樣：從 <h1> 到 <h6> 分別從大到小安排標(biāo)題元素，只不過在Bootstrap中重新設(shè)置了其默認(rèn)樣式，從源碼中可以看到有如下共性：
字體顏色與字體樣式繼承自父元素，字體粗細(xì)為500，且行高全部設(shè)為1.1（也就是font-size的1.1倍）
{ font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;} 在不同大小的標(biāo)題中有著如下區(qū)別：
在Bootstrap中對于不同級別標(biāo)題字體大小設(shè)置為： h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
重新設(shè)置了 margin-top 和 margin-bottom 的值， h1~h3 重置后的值都是 20px ； h4~h6 重置后的值都是 10px 。
除此之外在Bootstrap中為了 讓非標(biāo)題元素和標(biāo)題使用相同的樣式 ，還特意定義了 .h1~.h6 六個類名。如下所示：
在Bootstrap中，下面的代碼，顯示效果相同。
<!--Bootstrap中的標(biāo)題--><h1>Bootstrap標(biāo)題一</h1><h2>Bootstrap標(biāo)題二</h2><h3>Bootstrap標(biāo)題三</h3><h4>Bootstrap標(biāo)題四</h4><h5>Bootstrap標(biāo)題五</h5><h6>Bootstrap標(biāo)題六</h6><!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式--><div class="h1">Bootstrap標(biāo)題一</div><div class="h2">Bootstrap標(biāo)題二</div><div class="h3">Bootstrap標(biāo)題三</div><div class="h4">Bootstrap標(biāo)題四</div><div class="h5">Bootstrap標(biāo)題五</div><div class="h6">Bootstrap標(biāo)題六</div>
因?yàn)樵趯?shí)際應(yīng)用中，我們可能經(jīng)常會遇到除了主標(biāo)題外，之后緊跟著一個副標(biāo)題的情況。Bootstrap人性化的為我們設(shè)置了這樣一個效果。使用方式也特別簡單，如下：
<h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1>
當(dāng)然毋庸置疑的是，從 <h1> 到 <h6> 都可以使用該設(shè)置。副標(biāo)題 <small> 有著自己一些獨(dú)特的樣式：
行高全部都設(shè)置為了1，而且字體粗細(xì)變成了常規(guī)效果（不加粗），同時顏色被設(shè)置為灰色（ #999 ）。
在h1~h3內(nèi)的 <small> 標(biāo)簽文本，其大小都設(shè)置為當(dāng)前字號的65%；而在h4~h6內(nèi)的字號都設(shè)置為當(dāng)前字號的75%；
2. 正文文本
Bootstrap中的文本全局樣式如下：
字體大小為14px
行高為1.42867143（約等于20px）
字體顏色為 #333
p標(biāo)簽外部有著10個像素的下外邊距 margin-bottom:10px;
當(dāng)然，你是可以自行設(shè)置重置樣式的。^_^
3. 強(qiáng)調(diào)
字體風(fēng)格相關(guān)
<p class="lead">lead</p><!-- 字體變大，行高變大，下外邊距變大 --><i>i</i><!--無特殊意義， 斜體 --><small>small</small><!-- 小號字體--><strong>strong</strong><!-- 語氣強(qiáng)烈的強(qiáng)調(diào)，粗體 --><em>em</em><!-- 強(qiáng)調(diào)，斜體 -->
強(qiáng)調(diào)相關(guān)的類
在Bootstrap中定義了一系列的這樣的類，用于不同的情景，出去text外，還有bg（背景顏色）等等。使用方法類似，只是前面的文本進(jìn)行了一些改變！所以。 記住這6個單詞吧
<p class="text-muted">提示，使用淺灰色（#999）</p><p class="text-primary">主要，使用藍(lán)色（#428bca）</p><p class="text-success">成功，使用淺綠色(#3c763d)</p><p class="text-info">通知信息，使用淺藍(lán)色（#31708f）</p><p class="text-warning">警告，使用黃色（#8a6d3b）</p><p class="text-danger">危險，使用褐色（#a94442）</p>
4. 文本對齊風(fēng)格
<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">我兩端對齊</p>
在Bootstrap中，為了簡化操作，方便使用，使用了上面這四個類分別對應(yīng)我們在CSS中常常使用 text-align 來實(shí)現(xiàn)文本的對齊風(fēng)格的設(shè)置。
5. 列表
在Bootstrap中對于列表的設(shè)置與原生的html基本一致，需要注意的有：
在列表之間有10px的下外邊距
在嵌套列表中，不含有下邊距
Bootstrap當(dāng)然不會就這么簡單做一點(diǎn)點(diǎn)修改，它定義了一些關(guān)于列表的類給我們使用。
去點(diǎn)列表 .list-unstyled
.list-unstyled {padding-left: 0;list-style: none;} 從源碼中，我們可以看到這樣的信息，它除了將項目編號去除之外，還將默認(rèn)的左邊距也清除掉了。
<ol><li class="list-unstyled">項目列表<ul class="list-unstyled"><li>帶有項目編號</li><li>帶有項目編號</li></ul></li></ol>
在這樣一段代碼中，三個列表項會整齊的 排列在一起 ，且都沒有 項目符號
內(nèi)聯(lián)列表 .list-inline
除了去點(diǎn)列表之外，Bootstrap還可以通過添加類名“.list-inline”來實(shí)現(xiàn)內(nèi)聯(lián)列表，簡單點(diǎn)說就是 把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示。 也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。
水平定義列表 .dl-horizontal
現(xiàn)有代碼如下：
<dl class="dl-horizontal"><dt>標(biāo)題一：</dt><dd>描述內(nèi)容，我很喜歡前端，也很喜歡響應(yīng)式布局，它能在個不同大小的屏幕下提供很好的體驗(yàn)，我現(xiàn)在是初學(xué)者，但是我會越來強(qiáng)的</dd><dt>標(biāo)題二：標(biāo)題二：標(biāo)題二：標(biāo)題二：</dt><dd>描述內(nèi)容</dd></dl>
在瀏覽器全屏顯示中可以看到效果如下：
我們來把屏幕大小進(jìn)行改變，在遇到一個臨界值時（小屏），水平定義列表將回復(fù)到原始的狀態(tài)，如下改變：
這是為什么呢？我們?nèi)タ纯丛创a吧！
原來在這里添加了一個媒體查詢，只有 屏幕大于768px 的時候，添加類名 .dl-horizontal 才具有水平定義列表效果。其實(shí)現(xiàn)主要方式：
將dt設(shè)置了一個左浮動，并且設(shè)置了一個寬度為160px
將dd設(shè)置一個margin-left的值為180px，達(dá)到水平的效果
當(dāng)標(biāo)題寬度超過160px時，將會顯示三個省略號
現(xiàn)在再看看上面的效果是不是和這里的描述都是一樣的呢？答案當(dāng)然是肯定的 ^ ^
6. 代碼
在Bootstrap主要提供了三種代碼風(fēng)格：
使用 <code></code> 來顯示單行內(nèi)聯(lián)代碼——針對于 單個單詞或單個句子 的代碼
使用 <pre></pre> 來顯示多行塊代碼——針對于 多行代碼 （也就是成塊的代碼）
使用 <kbd></kbd> 來顯示用戶輸入代碼——表示 用戶要通過鍵盤輸入的內(nèi)容
直接來看效果吧!
代碼如下：（需要注意的是，**不管使用哪種代碼風(fēng)格，在代碼中碰到小于號（ < ）和大于號（ > ）都需要使用轉(zhuǎn)義字符來替代）
code風(fēng)格：
<div>Bootstrap的代碼風(fēng)格有三種：<code><code></code>、<code><pre></code>和<code><kbd></code></div>
pre風(fēng)格：
<div><pre><ul><li>...</li></ul></pre></div>
kbd風(fēng)格：
<div>請輸入<kbd>ctrl+c</kbd>來復(fù)制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>
<pre> 元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點(diǎn)，你只需要在 pre標(biāo)簽 上添加類名 .pre-scrollable ，就可以控制代碼塊區(qū)域 最大高度為340px ，一旦超出這個高度，就會在 Y軸（縱向）出現(xiàn)滾動條。
當(dāng)然，你也可以進(jìn)行自定義配置，例如：只需要在自定義的css中，對于該類添加一個 word-wrap: normal; ，這樣的話，在代碼塊邊框橫向?qū)挾刃∮趦?nèi)部代碼橫向長度時，就會出現(xiàn)橫向滾動條。
7. 表格
表格是Bootstrap的一個基礎(chǔ)組件之一，Bootstrap為表格提供了 1種基礎(chǔ)樣式 和 4種附加樣式 以及 1個支持響應(yīng)式的表格 。
對應(yīng)上面所說的，Bootstrap為表格不同的樣式風(fēng)格提供了不同的類名，主要包括：
.table 基礎(chǔ)表格
.table-striped 斑馬線表格
.table-bordered 帶邊框的表格
.table-hover 鼠標(biāo)懸停高亮的表格
.table-condensed 緊湊型表格
.table-responsive 響應(yīng)式表格
.table 主要有三個作用：
給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距
在thead底部設(shè)置了一個2px的淺灰實(shí)線
每個單元格頂部設(shè)置了一個1px的淺灰實(shí)線
具體大家可以在源碼中查看，后幾種附加的樣式在這里也不多說，但是下面說一些 注意事項：
后幾種表格附加樣式，必須在基礎(chǔ)樣式 .table 之后，例如 <table class="table table-bordered table-hover">
響應(yīng)式表格：其原理是在表格 外部添加容器 把普通表格 包裹 起來，下面進(jìn)行詳細(xì)說明：
<div class="table-responsive"><!-- 關(guān)鍵！容器包裹后實(shí)現(xiàn)響應(yīng)式 --><table class="table table-bordered"><!-- 設(shè)置表格樣式，帶邊框的表格 --><thead><!-- 一個表格應(yīng)該有表頭，若直接寫tr>td這樣的結(jié)構(gòu)，瀏覽器會自動創(chuàng)建一個tbody包裹 --></thead><tbody><!--與上同理，即使你不創(chuàng)建，瀏覽器也會自動添加tbody包裹你的代碼 --></tbody></table></div>
下面是寬屏的效果（和普通的表格無區(qū)別）：
此處是窄屏的效果（可以看到滾動條的出現(xiàn)）：
表格行的類，表格情景
在上面已經(jīng)說到了在Bootstrap中，為不同的情景做了不一樣的顏色，用于不同的信息展示。只是在類名上做了一些小小的改變。下面就可以看到：
只需要在 <tr> 標(biāo)簽添加上這些類就可以使用了。
除此之外，通過源碼可以看到，在這些顏色設(shè)置之外，Bootstrap還單獨(dú)設(shè)置了 hover效果（懸浮狀態(tài)） 的 顏色加深 效果（它對于不同的情況單獨(dú)進(jìn)行了顏色設(shè)置）。
實(shí)現(xiàn)也特別簡單，只需要像 <table class="table-hover"> 這樣，在 <table> 標(biāo)簽加上一個 table-hover 的類。（在未對 <tr> 進(jìn)行情景顏色設(shè)置時，該類依然有效果，只是效果不一樣，上面已經(jīng)說到了，因?yàn)樗膯为?dú)設(shè)置，具體請到源碼中查看）
也正因?yàn)檫@樣，如果你想自定義顏色的話， 除了修改 tr 元素的顏色樣式外，在 .table-hover 表格中也要做相應(yīng)的調(diào)整!
排版的內(nèi)容到這里就結(jié)束了，希望對大家學(xué)習(xí)Bootstrap排版相關(guān)知識有所幫助！
