@(Bootstrap)[網(wǎng)頁(yè)]

導(dǎo)言

本篇文章中將會(huì)學(xué)習(xí)bootstrap中用于排版的元素（由于用的MarkDown編輯器toc生成的目錄，把標(biāo)題下的幾個(gè)演示標(biāo)題也生成了，真的是呵呵噠）

[toc]

1.標(biāo)題

HTML 中的所有標(biāo)題標(biāo)簽，h1到h6均可使用。另外，還提供了 .h1 到 .h6 類(lèi)，為的是給內(nèi)聯(lián)（inline）屬性的文本賦予標(biāo)題的樣式。包含small標(biāo)簽，用來(lái)標(biāo)記副標(biāo)題。 下面我們來(lái)看下實(shí)例，部分源碼如下

<

額，放不了代碼，放代碼就會(huì)顯示結(jié)果，印象中簡(jiǎn)書(shū)支持MarkDown編輯啊。

對(duì)這個(gè)有興趣可以訪(fǎng)問(wèn)我的CSDN博客

>

顯示結(jié)果如下

1.我是浩子hehe

2.我是肚子hehe

3.我是小胖hehe

4.我是呵呵hehe

5.我是彬哥hehe

6.我是泡泡hehe

2.頁(yè)面主題

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

頁(yè)面主體

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

網(wǎng)頁(yè)顯示結(jié)果如下

頁(yè)面主體

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

2.強(qiáng)調(diào)

a.通過(guò)添加 .lead 類(lèi)可以讓段落突出顯示。

...

b.著重通過(guò)增加 font-weight 值強(qiáng)調(diào)一段文本。

rendered as bold text

c.用斜體強(qiáng)調(diào)一段文本。

rendered as italicized text

3.對(duì)齊

通過(guò)文本對(duì)齊 class，可以簡(jiǎn)單方便的將文字重新對(duì)齊。

Left aligned text.Center aligned text.Right aligned text.

Left aligned text.

Center aligned text.

Right aligned text.

4.強(qiáng)調(diào) class

這些 class 通過(guò)顏色來(lái)表示強(qiáng)調(diào)。也可以應(yīng)用于鏈接，當(dāng)鼠標(biāo)盤(pán)旋于鏈接上時(shí)，其顏色會(huì)變深，就像默認(rèn)的鏈接樣式。

強(qiáng)調(diào) Class

Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas sed diam eget risus varius blandit sit amet non magna..Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas sed diam eget risus varius blandit sit amet non magna..Maecenas sed diam eget risus varius blandit sit amet non magna...Maecenas sed diam eget risus varius blandit sit amet non magna.

強(qiáng)調(diào) Class

Maecenas sed diam eget risus varius blandit sit amet non magna.

Maecenas sed diam eget risus varius blandit sit amet non magna.

.Maecenas sed diam eget risus varius blandit sit amet non magna.

Maecenas sed diam eget risus varius blandit sit amet non magna..

Maecenas sed diam eget risus varius blandit sit amet non magna..

.Maecenas sed diam eget risus varius blandit sit amet non magna.

5.縮略語(yǔ)

當(dāng)鼠標(biāo)懸停在縮寫(xiě)和縮寫(xiě)詞上時(shí)就會(huì)顯示完整內(nèi)容，Bootstrap 實(shí)現(xiàn)了對(duì) HTML 的 元素的增強(qiáng)樣式?？s略語(yǔ)元素帶有 title 屬性，外觀表現(xiàn)為帶有較淺的虛線(xiàn)框，鼠標(biāo)移至上面時(shí)會(huì)變成帶有“問(wèn)號(hào)”的指針。如想看完整的內(nèi)容可把鼠標(biāo)懸停在縮略語(yǔ)上（對(duì)使用輔助技術(shù)的用戶(hù)也可見(jiàn)）, 但需要包含 title 屬性。

attr

6.地址

讓聯(lián)系信息以最接近日常使用的格式呈現(xiàn)。在每行結(jié)尾添加
可以保留需要的樣式。

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P:(123) 456-7890Full Name
first.last@example.com

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

7.引用

將任何 HTML 元素包裹在 blockquote 中即可表現(xiàn)為引用樣式。對(duì)于直接引用，我們建議用 p>標(biāo)簽。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

添加 footer用于標(biāo)明引用來(lái)源。來(lái)源的名稱(chēng)可以包裹進(jìn) 標(biāo)簽中。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous inSource Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

通過(guò)賦予 .blockquote-reverse 類(lèi)可以讓引用呈現(xiàn)內(nèi)容右對(duì)齊的效果。

...

8.列表

無(wú)序列表用ul-li有序列表用ol-li無(wú)樣式列表移除了默認(rèn)的 list-style 樣式和左側(cè)外邊距的一組元素（只針對(duì)直接子元素）。這這是針對(duì)直接子元素，也就是說(shuō)，你需要對(duì)所有嵌套的列表都添加此 class 才能具有同樣的樣式。

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

內(nèi)聯(lián)列表.list-inline除了去點(diǎn)列表之外，Bootstrap還可以通過(guò)添加類(lèi)名“.list-inline”來(lái)實(shí)現(xiàn)內(nèi)聯(lián)列表，簡(jiǎn)單點(diǎn)說(shuō)就是 把垂直列表?yè)Q成水平列表，而且去掉項(xiàng)目符號(hào)（編號(hào)），保持水平顯示。 也可以說(shuō)內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。水平定義列表 .dl-horizontal

標(biāo)題一：描述內(nèi)容，我很喜歡前端，也很喜歡響應(yīng)式布局，它能在個(gè)不同大小的屏幕下提供很好的體驗(yàn)，我現(xiàn)在是初學(xué)者，但是我會(huì)越來(lái)強(qiáng)的標(biāo)題二：標(biāo)題二：標(biāo)題二：標(biāo)題二：描述內(nèi)容

標(biāo)題一： 描述內(nèi)容，我很喜歡前端，也很喜歡響應(yīng)式布局，它能在個(gè)不同大小的屏幕下提供很好的體驗(yàn)，我現(xiàn)在是初學(xué)者，但是我會(huì)越來(lái)強(qiáng)的 標(biāo)題二：標(biāo)題二：標(biāo)題二：標(biāo)題二： 描述內(nèi)容

參考文檔Bootstrap官方文檔推庫(kù)文章