有了Bootstrap前端框架預(yù)處理好的排版類，我們從此不必再為每個(gè)排版的標(biāo)簽元素寫大量的CSS代碼了，可以使用 Bootstrap 的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素預(yù)定義好的樣式，排版出很規(guī)范的網(wǎng)頁(yè)。

那我們接下來一起學(xué)習(xí)下，bootstrap前端框架到底為我們預(yù)定義了那些排版的類呢？ 

第一：Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧，這些字體都是目前所有網(wǎng)頁(yè)最經(jīng)常用的字體了。從此我們不必再為body定義全局樣式的字體樣式了。只要用了Bootstrap前端框架font-family默認(rèn)使用了上面的字體系列了。
即：font-family:sans-serif;
我們來驗(yàn)證下吧，打開bootstrap前端的框架CSS文件bootstrap.css

各位小伙伴會(huì)想，我們只可以用bootstrap前端框架默認(rèn)的字體嗎？顯然不是的，后面我會(huì)教你如何定制bootstrap框架，打造我們自己喜歡，想要效果的bootstrap框架。 

第二：bootstrap前端框架預(yù)定義了h1-h6的CSS樣式，我從bootstrap前端的框架CSS文件bootstrap.css中把定義的樣式抽取了一部分出來，可以看到分別為hn定義了font-size的屬性值。
 h1 {font-size: 36px;}
 h2 {font-size: 30px;}
 h3 {font-size: 24px;}
 h4 {font-size: 18px;}
 h5 {font-size: 14px;}
 h6 {font-size: 12px;}
 實(shí)際效果如下：
 網(wǎng)頁(yè)代碼：

 網(wǎng)頁(yè)效果：

第三：內(nèi)聯(lián)子標(biāo)題，如果需要向任何標(biāo)題添加一個(gè)內(nèi)聯(lián)子標(biāo)題，只需要簡(jiǎn)單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能得到一個(gè)字號(hào)更小的顏色更淺的文本，如下面實(shí)例所示： 

網(wǎng)頁(yè)代碼：

網(wǎng)頁(yè)效果：

第四：引導(dǎo)主體副本，為了給段落添加強(qiáng)調(diào)文本，則可以添加 class=”lead”，這將得到更大更粗、行高更高的文本，如下面實(shí)例所示： 

網(wǎng)頁(yè)代碼：

網(wǎng)頁(yè)效果：

以下bootstrap前端框架類不再舉例，我只寫出用途，因?yàn)榭梢愿厦娴睦右粯尤ピ囼?yàn)小效果。 

第五：強(qiáng)調(diào)，HTML 的默認(rèn)強(qiáng)調(diào)標(biāo)簽 <small>（設(shè)置文本為父文本大小的 85%）、<strong>（設(shè)置文本為更粗的文本）、<em>（設(shè)置文本為斜體）。

第六：縮寫，HTML元素提供了用于縮寫的標(biāo)記，比如WWW或HTTP。Bootstrap定義<abbr>元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為<abbr>title屬性添加了文本）。為了得到一個(gè)更小字體的文本，請(qǐng)?zhí)砑?initialism到<abbr>。 

第七：地址（Address），使用<address>標(biāo)簽，您可以在網(wǎng)頁(yè)上顯示聯(lián)系信息。由于<address>默認(rèn)為display:block;，您需要使用標(biāo)簽來為封閉的地址文本添加換行。 

第八：引用（Blockquote），您可以在任意的HTML文本旁使用默認(rèn)的<blockquote>。其他選項(xiàng)包括，添加一個(gè)<small>標(biāo)簽來標(biāo)識(shí)引用的來源，使用class.pull-right向右對(duì)齊引用。下面的實(shí)例演示了這些特性：

第九：列表
Bootstrap支持有序列表、無序列表和定義列表。
 有序列表：有序列表是指以數(shù)字或其他有序字符開頭的列表。
 無序列表：無序列表是指沒有特定順序的列表，是以傳統(tǒng)風(fēng)格的著重號(hào)開頭的列表。如果您不想顯示這些著重號(hào)，您可以使用class.list-unstyled來移除樣式。您也可以通過使用class.list-inline把所有的列表項(xiàng)放在同一行中。
 定義列表：在這種類型的列表中，每個(gè)列表項(xiàng)可以包含<dt>和<dd>元素。<dt>代表定義術(shù)語，就像字典，這是被定義的屬于（或短語）。接著，<dd>是<dt>的描述。您可以使用classdl-horizontal把<dl>行中的屬于與描述并排顯示。
 其他更多bootstrap前端框架類需要非常精通的如下，大家必須熟記和熟練去使用。

 .lead 使段落突出顯示
 .small 設(shè)定小文本(設(shè)置為父文本的85%大小)
 .text-left 設(shè)定文本左對(duì)齊
 .text-center 設(shè)定文本居中對(duì)齊
 .text-right 設(shè)定文本右對(duì)齊
 .text-justify 設(shè)定文本對(duì)齊,段落中超出屏幕部分文字自動(dòng)換行
 .text-nowrap 段落中超出屏幕部分不換行
 .text-lowercase 設(shè)定文本小寫
 .text-uppercase 設(shè)定文本大寫
 .text-capitalize設(shè)定單詞首字母大寫
 .initialism 顯示在<abbr>元素中的文本以小號(hào)字體展示
 .blockquote-reverse設(shè)定引用右對(duì)齊
 .list-unstyled 移除默認(rèn)的列表樣式，列表項(xiàng)中左對(duì)齊(<ul>和<ol>中)。這個(gè)類僅適用于直接子列表項(xiàng)(如果需要移除嵌套的列表項(xiàng)，你需要在嵌套的列表中使用該樣式)
 .list-inline 將所有列表項(xiàng)放置同一行
 .dl-horizontal 該類設(shè)置了浮動(dòng)和偏移，應(yīng)用于<dl>元素和<dt>元素中，具體實(shí)現(xiàn)可以查看實(shí)例
 .pre-scrollable 使<pre>元素可滾動(dòng)scrollable

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論