bootstrap——css樣式（二、排版）

1、標題

HTML 中的所有標題標籤，h1到h6 均可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<label class="h1">h1. Bootstrap heading</label>
<label class="h2">h2. Bootstrap heading</label>
<label class="h3">h3. Bootstrap heading</label>
<label class="h4">h4. Bootstrap heading</label>
<label class="h5">h5. Bootstrap heading</label>
<label class="h6">h6. Bootstrap heading</label>

.h1到.h6只是有標題的樣式，但是還是內聯元素，不換行

---

2、副標題

在標題內還可以包含 標籤或賦予 .small 類的元素，可以用來標記副標題。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

副標題跟在主題後面，字體稍微小一些，顏色是灰色的

---

3、頁面主體

Bootstrap 將全局 font-size 設置爲 14px，line-height 設置爲 1.428。這些屬性直接賦予 body 元素和所有段落元素。另外，p（段落）元素還被設置了等於 1/2 行高（即 10px）的底部外邊距（margin）。

---

4、中心內容

通過添加 .lead 類可以讓段落突出顯示。

<p class="lead">...</p>

---

5、文本
1）被刪除的文本

<del>This line of text is meant to be treated as deleted text.</del>

2）無用文本

<s>This line of text is meant to be treated as no longer accurate.</s>

3）插入文本

<ins>This line of text is meant to be treated as an addition to the document.</ins>

表現形式就是帶下劃線
4）帶下劃線的文本

<u>This line of text will render as underlined</u>

5）小號文本
還可以爲行內元素賦予 .small 類以代替任何 元素。

<small>This line of text is meant to be treated as fine print.</small>

6）着重

<strong>rendered as bold text</strong>

7）斜體

<em>rendered as italicized text</em>

在 HTML5 中可以放心使用 和 標籤。 用於高亮單詞或短語，不帶有任何着重的意味；而 標籤主要用於發言、技術詞彙等。

---

6、對齊

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

---

7、縮略語
1）基本縮略語
如想看完整的內容可把鼠標懸停在縮略語上, 但需要爲 abbr 元素設置 title屬性。

<abbr title="attribute">attr</abbr>

2）首字母縮略語
爲縮略語添加 .initialism 類，可以讓 font-size 變得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

---

8、地址

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> [phone]
</address>

---

9、引用
將任何 HTML 元素包裹在

中即可表現爲引用樣式。對於直接引用，我們建議用 p 標籤。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

---

10、列表
1）無序列表

<ul>
  <li>...</li>
</ul>

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

2）有序列表

<ol>
  <li>...</li>
</ol>

3）無樣式列表
.list-unstyled
移除了默認的 list-style 樣式和左側外邊距的一組元素（只針對直接子元素）

<ul class="list-unstyled">
  <li>...</li>
</ul>

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

4）內聯列表
.list-inline
通過設置 display: inline-block; 並添加少量的內補（padding），將所有元素放置於同一行。同時ul會產生padding-left：-5px

<ul class="list-inline">
  <li>...</li>
</ul>

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

5）描述
帶有描述的短語列表。

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

6）水平排列的描述
.dl-horizontal 可以讓 dl 內的短語及其描述排在一行。開始是像 dl 的默認樣式堆疊在一起，隨着導航條逐漸展開而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>