Bootstrap的排版樣式大致和html基本元素一樣,沒什么大的區別,就是對元素加了樣式。
(1)標題
HTML 中的所有標題標簽,<h1>
到 <h6>
均可使用。另外,還提供了 .h1
到 .h6
類,為的是給內聯(inline)屬性的文本賦予標題的樣式。
代碼如下:

Code
<div class="container"> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </div>
結果如下:

其實就是html元素標簽的h1-h6.不過,在標題內還可以包含 <small>
標簽或賦予 .small
類的元素,可以用來標記副標題。

Code
<div class="container"> <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> </div>

(2)頁面主體
Bootstrap 將全局 font-size
設置為 14px,line-height
設置為 1.428。這些屬性直接賦予 <body>
元素和所有段落元素。另外,<p>
(段落)元素還被設置了等於 1/2 行高(即 10px)的底部外邊距(margin)。
實例

Code
<div class="container"> <p> 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. </p> </div>

(3)中心內容
通過添加 .lead
類可以讓段落突出顯示。

Code
<div class="container"> <div class="lead"> Welcome to our world </div> <p> 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. </p> </div>

(4 )內聯文本元素
通過添加 <mark>標簽可以為元素添加背景顏色並高亮文本。
實例:

Code
<div class="container"> <div class="lead"> Welcome to our <mark>world</mark> </div> </div>

在上面的結果中,world背景顏色變成了#fcf8e3,圖片上看不清,大家可以在自己的瀏覽器中查看下,而且world也被高亮了。
(5)被刪除的文本
我們要顯示某些被刪除的文本,可以使用<del>標簽。
實例:

Code
<div class="container"> <div class="lead"> Welcome to our <mark>world</mark> <p>hello everybody <del>this is delete</del></p> </div> </div>

(6)無用文本
對於沒有用的文本我們可以使用<s>標簽。
實例:

Code
<div class="container"> <div class="lead"> Welcome to our <mark>world</mark> <p>hello everybody <del>this is delete</del></p> <s>This line of text is meant to be treated as no longer accurate.</s> </div> </div>

對於這個<s>標簽的結果我沒有看出來和上面那個<del>標簽的結果有什么不同,也許只是表達方式不同吧,有知道有什么不同的大神,請告知。下面的插入文本和帶下划線的文本也是。
(7)插入文本
額外插入的文本使用 <ins>
標簽。
實例:

Code
<div class="container"> <ins>Welcome to our world</ins> </div>

(8)帶下划線的文本
為文本添加下划線,使用 <u>
標簽。

Code
<div class="container"> <ins>Welcome to our world</ins> <br /> <u>Welcome to our world</u> </div>

(9)對齊
通過文本對齊類text-*,可以簡單方便的將文字重新對齊。
實例:

Code
<div class="container"> <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> </div>

(10)改變大小寫
通過下面幾個類改變文本的大小寫。

Code
<div class="container"> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> </div>
(11)地址
讓聯系信息以最接近日常使用的格式呈現。在每行結尾添加 <br>
可以保留需要的樣式。

Code
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
對於其他的排版內容,大家可以查看官方文檔。謝謝