Bootstrap 排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其預設的字型棧。

使用 Bootstrap 的排版特性，您可以建立标題、段落、清單及其他内聯元素。

Bootstrap 中定義了所有的 HTML 标題（h1 到 h6）的樣式。請看下面的執行個體：

<h1>我是标題1 h1</h1>

<h2>我是标題2 h2</h2>

<h3>我是标題3 h3</h3>

<h4>我是标題4 h4</h4>

<h5>我是标題5 h5</h5>

<h6>我是标題6 h6</h6>

結果如下所示：

如果需要向任何标題添加一個内聯子标題，隻需要簡單地在元素兩旁添加 &lt;small&gt;，或者添加 <b>.small</b> class，這樣子您就能得到一個字号更小的顔色更淺的文本，如下面執行個體所示：

&lt;h1&gt;我是标題1 h1. &lt;small&gt;我是副标題1 h1&lt;/small&gt;&lt;/h1&gt;

&lt;h2&gt;我是标題2 h2. &lt;small&gt;我是副标題2 h2&lt;/small&gt;&lt;/h2&gt;

&lt;h3&gt;我是标題3 h3. &lt;small&gt;我是副标題3 h3&lt;/small&gt;&lt;/h3&gt;

&lt;h4&gt;我是标題4 h4. &lt;small&gt;我是副标題4 h4&lt;/small&gt;&lt;/h4&gt;

&lt;h5&gt;我是标題5 h5. &lt;small&gt;我是副标題5 h5&lt;/small&gt;&lt;/h5&gt;

&lt;h6&gt;我是标題6 h6. &lt;small&gt;我是副标題6 h6&lt;/small&gt;&lt;/h6&gt;

為了給段落添加強調文本，則可以添加 class="lead"，這将得到更大更粗、行高更高的文本，如下面執行個體所示：

&lt;h2&gt;引導主體副本&lt;/h2&gt;

&lt;p class="lead"&gt;這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。這是一個示範引導主體副本用法的執行個體。&lt;/p&gt;

HTML 的預設強調标簽 &lt;small&gt;（設定文本為父文本大小的 85%）、&lt;strong&gt;（設定文本為更粗的文本）、&lt;em&gt;（設定文本為斜體）。

Bootstrap 提供了一些用于強調文本的類，如下面執行個體所示：

&lt;small&gt;本行内容是在标簽内&lt;/small&gt;&lt;br&gt;

&lt;strong&gt;本行内容是在标簽内&lt;/strong&gt;&lt;br&gt;

&lt;em&gt;本行内容是在标簽内，并呈現為斜體&lt;/em&gt;&lt;br&gt;

&lt;p class="text-left"&gt;向左對齊文本&lt;/p&gt;

&lt;p class="text-center"&gt;居中對齊文本&lt;/p&gt;

&lt;p class="text-right"&gt;向右對齊文本&lt;/p&gt;

&lt;p class="text-muted"&gt;本行内容是減弱的&lt;/p&gt;

&lt;p class="text-primary"&gt;本行内容帶有一個 primary class&lt;/p&gt;

&lt;p class="text-success"&gt;本行内容帶有一個 success class&lt;/p&gt;

&lt;p class="text-info"&gt;本行内容帶有一個 info class&lt;/p&gt;

&lt;p class="text-warning"&gt;本行内容帶有一個 warning class&lt;/p&gt;

&lt;p class="text-danger"&gt;本行内容帶有一個 danger class&lt;/p&gt;

HTML 元素提供了用于縮寫的标記，比如 WWW 或 HTTP。Bootstrap 定義 &lt;abbr&gt; 元素的樣式為顯示在文本底部的一條虛線邊框，當滑鼠懸停在上面時會顯示完整的文本（隻要您為 &lt;abbr&gt; title 屬性添加了文本）。為了得到一個更小字型的文本，請添加 .initialism 到 &lt;abbr&gt;。

&lt;abbr title="World Wide Web"&gt;WWW&lt;/abbr&gt;&lt;br&gt;

&lt;abbr title="Real Simple Syndication" class="initialism"&gt;RSS&lt;/abbr&gt;

使用 &lt;address&gt; 标簽，您可以在網頁上顯示聯系資訊。由于 &lt;address&gt; 預設為 display:block;，您需要使用 &lt;br&gt; 标簽來為封閉的位址文本添加換行。

&lt;address&gt;

&lt;strong&gt;Some Company, Inc.&lt;/strong&gt;&lt;br&gt;

007 street&lt;br&gt;

Some City, State XXXXX&lt;br&gt;

&lt;abbr title="Phone"&gt;P:&lt;/abbr&gt; [phone]

&lt;/address&gt;

&lt;strong&gt;Full Name&lt;/strong&gt;&lt;br&gt;

&lt;a href="mailto:#"&gt;[email protected]&lt;/a&gt;

您可以在任意的 HTML 文本旁使用預設的 &lt;blockquote&gt;。其他選項包括，添加一個 &lt;small&gt; 标簽來辨別引用的來源，使用 class .pull-right 向右對齊引用。下面的執行個體示範了這些特性：

&lt;blockquote&gt;

&lt;p&gt;

這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。這是一個預設的引用執行個體。

&lt;/p&gt;

&lt;/blockquote&gt;

這是一個帶有源标題的引用。

&lt;small&gt;Someone famous in &lt;cite title="Source Title"&gt;Source Title&lt;/cite&gt;&lt;/small&gt;

&lt;blockquote class="pull-right"&gt;

這是一個向右對齊的引用。

Bootstrap 支援有序清單、無序清單和定義清單。

<b>有序清單</b>：有序清單是指以數字或其他有序字元開頭的清單。

<b>無序清單</b>：無序清單是指沒有特定順序的清單，是以傳統風格的着重号開頭的清單。如果您不想顯示這些着重号，您可以使用 class .list-unstyled 來移除樣式。您也可以通過使用 class .list-inline 把所有的清單項放在同一行中。

<b>定義清單</b>：在這種類型的清單中，每個清單項可以包含 &lt;dt&gt; 和 &lt;dd&gt; 元素。&lt;dt&gt; 代表 定義術語，就像字典。接着，&lt;dd&gt; 是 &lt;dt&gt; 的描述。<code>.dl-horizontal</code> 可以讓 <code>&lt;dl&gt;</code> 内的短語及其描述排在一行。開始是像 <code>&lt;dl&gt;</code> 的預設樣式堆疊在一起，随着導覽列逐漸展開而排列在一行。

下面的執行個體示範了這些類型的清單：

&lt;h4&gt;有序清單&lt;/h4&gt;

&lt;ol&gt;

&lt;li&gt;Item 1&lt;/li&gt;

&lt;li&gt;Item 2&lt;/li&gt;

&lt;li&gt;Item 3&lt;/li&gt;

&lt;li&gt;Item 4&lt;/li&gt;

&lt;/ol&gt;

&lt;h4&gt;無序清單&lt;/h4&gt;

&lt;ul&gt;

&lt;/ul&gt;

&lt;h4&gt;未定義樣式清單&lt;/h4&gt;

&lt;ul class="list-unstyled"&gt;

&lt;h4&gt;内聯清單&lt;/h4&gt;

&lt;ul class="list-inline"&gt;

&lt;h4&gt;定義清單&lt;/h4&gt;

&lt;dl&gt;

&lt;dt&gt;Description 1&lt;/dt&gt;

&lt;dd&gt;Item 1&lt;/dd&gt;

&lt;dt&gt;Description 2&lt;/dt&gt;

&lt;dd&gt;Item 2&lt;/dd&gt;

&lt;/dl&gt;

&lt;h4&gt;水準的定義清單&lt;/h4&gt;

&lt;dl class="dl-horizontal"&gt;

下表提供了 Bootstrap 更多排版類的執行個體：

類

描述

執行個體

.lead

使段落突出顯示

嘗試一下

.small

設定小文本 (設定為父文本的 85% 大小)

.text-left

設定文本左對齊

.text-center

設定文本居中對齊

.text-right

設定文本右對齊

.text-justify

設定文本對齊,段落中超出螢幕部分文字自動換行

.text-nowrap

段落中超出螢幕部分不換行

.text-lowercase

設定文本小寫

.text-uppercase

設定文本大寫

.text-capitalize

設定單詞首字母大寫

.initialism

顯示在 &lt;abbr&gt; 元素中的文本以小号字型展示，且可以将小寫字母轉換為大寫字母

.blockquote-reverse

設定引用右對齊

.list-unstyled

移除預設的清單樣式，清單項中左對齊 ( &lt;ul&gt; 和 &lt;ol&gt; 中)。 這個類僅适用于直接子清單項

(如果需要移除嵌套的清單項，你需要在嵌套的清單中使用該樣式)

.list-inline

将所有清單項放置同一行

.dl-horizontal

該類設定了浮動和偏移，應用于 &lt;dl&gt; 元素和 &lt;dt&gt; 元素中，具體實作可以檢視執行個體

.pre-scrollable

使 &lt;pre&gt; 元素可滾動，代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條