本章主要是介紹Bootstrap默認(rèn)的基礎(chǔ)樣式定義，利用這些基礎(chǔ)的定義相互組合，完成頁面的整體風(fēng)格定義甚至是更具體的效果。
Bootstrap應(yīng)該是一個基礎(chǔ)工具，它的好處在于已經(jīng)幫你定義了一個基礎(chǔ)的樣式風(fēng)格，對一個網(wǎng)站來說，風(fēng)格統(tǒng)一的頁面?zhèn)兪窍喈?dāng)重要的（除非你的站點(diǎn)已經(jīng)復(fù)雜到需要做一些定制化的頁面）；還解決了主流瀏覽器兼容問題。但對于國內(nèi)的使用者來說，存在一個比較嚴(yán)重的問題——并不支持IE6。
就我個人的認(rèn)知來看，在使用的時候，我們總是需要根據(jù)自己的需求對Bootstrap框架做一些調(diào)整，比如兼容ie6，比如更換部分組件的風(fēng)格，比如增加圖標(biāo)或去除不需要的圖標(biāo)，比如增加一些組件樣式支持等等等等。
本章內(nèi)容包含：基礎(chǔ)排版樣式，代碼塊樣式，表單樣式，按鈕樣式和圖標(biāo)。本章的所有示例，包括翻譯都在示例頁面中。

基礎(chǔ)排版樣式標(biāo)題，段落，列表和其他

Bootstrap的排版體系基于兩個在variables.less文件中定義的變量： @baseFontSize?和?@baseLineHeight。其含義正如其變量名一樣，第一個變量是字體大小的基礎(chǔ)值，而第二個變量是行高的基礎(chǔ)值。
通過對兩個基礎(chǔ)值的計(jì)算來創(chuàng)建如外邊距、內(nèi)補(bǔ)白、行高等值。

強(qiáng)調(diào)，地址和縮寫

元素標(biāo)簽用法可選項(xiàng)

<strong>	用來強(qiáng)調(diào)文本中重要（important）的片段	無
<em>	用來強(qiáng)調(diào)文本片段的重要性（stress）	無
<abbr>	用來包裹縮略語和首字母縮寫，在鼠標(biāo)懸浮時顯示完整的詞句	有title屬性用來顯示完整的詞句 ? 使用樣式名.initialism將標(biāo)簽內(nèi)的字母顯示為大寫。
<address>	用來顯示聯(lián)系信息 （For contact information for its nearest ancestor or the entire body of work）	需要在每一行內(nèi)容末尾添加<br>以保證顯示樣式是正確的。

<strong>和<em>標(biāo)簽，都是用來表示強(qiáng)調(diào)的，但是具體的差別在哪里呢？可以參考一下這篇文章——《em和strong的區(qū)別》。
<address>標(biāo)簽實(shí)際表示的不僅僅是地址信息這么簡單，而是聯(lián)系信息的概念。在HTML5中，根據(jù)它的位置有不同的含義。具體可以參考W3CSchools的介紹。
縮略語標(biāo)簽<abbr>的title屬性用來定義該縮略語的完整定義，在顯示上會有一條虛線底邊，且懸浮時鼠標(biāo)樣式為問號。

blockquote標(biāo)簽

元素標(biāo)簽用法可選項(xiàng)

<blockquote>	用來顯示從其他地方引入的內(nèi)容的塊級元素標(biāo)簽	增加cite屬性來標(biāo)識引用來源的URL地址 使用樣式名.pull-left和.pull-right來設(shè)置浮動選項(xiàng)。
<small>	可選的元素標(biāo)簽，用以顯示一些面向用戶的引用信息，典型的用法是用來標(biāo)識引用內(nèi)容的標(biāo)題和作者名。	用標(biāo)簽來標(biāo)識標(biāo)題或者名稱。

關(guān)于列表的樣式

Bootstrap默認(rèn)定義了幾種樣式，包括無序列表，無默認(rèn)樣式的列表，有序列表，定義列表(definition list)。
具體展示樣式，請看示例。

代碼片段

內(nèi)聯(lián)的代碼片段使用<code>標(biāo)簽，而代碼塊的展示則使用<pre>標(biāo)簽。一定要注意將尖括號（<>）轉(zhuǎn)義為實(shí)體符號以保證能正確的展現(xiàn)代碼。可以添加樣式名.pre-scrollable，來限制代碼塊展示的最大高度。
使用Google Prettify來美化和高亮顯示代碼。只需要設(shè)置樣式名prettyprint 和 linenums即可。具體可以下載google-code-prettify源碼，查看說明文檔。

表格

表格相關(guān)標(biāo)簽說明

標(biāo)簽名說明

<table>

用表格的形式來顯示數(shù)據(jù)的容器標(biāo)簽。

<thead>

用來包裹多列表格的表頭(<tr>)的容器標(biāo)簽

<tbody>

用來包裹多列表格的表格行(<tr>)的容器標(biāo)簽

<tr>

用來包裹單元格(<td>或<th>)集合的表格行。

<td>

用來定義單元格

<th>

用來標(biāo)注列（或行，依賴于上下文和擺放的位置）中的特殊的單元格。 必須放在<thead>標(biāo)簽中。

<caption>

用來描述和概括表格的作用，尤其適合在屏幕閱讀器。

表格樣式選項(xiàng)

選項(xiàng)名稱樣式名說明

默認(rèn)	無	沒有樣式
基本樣式	.table	只有單元行之間的分割線
邊框	.table-bordered	表格外邊框和圓角
斑馬線	.table-striped	在奇數(shù)行(1, 3, 5 等等)添加淺灰色背景色
緊湊表格	.table-condensed	所有單元格td?and?th元素內(nèi)補(bǔ)白減半，從8像素減少到4像素

默認(rèn)會對表格增加一些基本的樣式，比如基本的邊框樣式等以保證表格的可讀性。如果需要更多的樣式，則需要增加.table樣式名。
通過樣式名.table-striped可以添加斑馬線效果，但需要注意的是，由于斑馬線效果使用的是:nth-child來實(shí)現(xiàn)的，所以IE7-IE8是不支持的（當(dāng)然也包括IE6）。
通過樣式名.table-bordered樣式名來定義表格的圓角和邊框效果。通過樣式名.table-condensed的設(shè)置，可以使表格看起來更加的緊湊，它實(shí)際是通過將單元格的內(nèi)補(bǔ)白減半（padding由8像素減小到4像素）的方式來實(shí)現(xiàn)的。
通過這些表格樣式選項(xiàng)的組合，可以展現(xiàn)出你需要的不同的效果。

表單

Bootstrap中表單部分的設(shè)計(jì)，不僅針對具體的表單域做了樣式的定義，還提供了一些布局類型來展示表單集合。共有4種表單布局類型：

• 垂直對齊 （默認(rèn)）
• 搜索類型
• 內(nèi)聯(lián)
• 水平對齊

不同類型的表單布局更換需要對結(jié)構(gòu)做一些調(diào)整，但是表單控件本身不需要做任何的修改。
Bootstrap的表單定義包含了所有基礎(chǔ)的表單控件的樣式定義，還增加了一些自定義的組件樣式定義，如輸入框的前置/后置文本以及復(fù)選框列表。每個表單控件還會有如錯誤，警告，成功以及不可用等狀態(tài)的顯示。

4種表單布局類型

Bootstrap提供了簡單的結(jié)構(gòu)和設(shè)計(jì)來顯示常見的web表單。

類型名稱樣式名描述

垂直對齊 （默認(rèn)）	.form-vertical?（不是必須的）	分層的，做對齊的表單控件
內(nèi)聯(lián)	.form-inline	向左對齊并在同一行內(nèi)顯示完成的表單
搜索類型	.form-search	為搜索框附加典型的圓角效果
水平對齊	.form-horizontal	每行向左浮動，標(biāo)簽文本向右對齊

Bootstrap的表單樣式設(shè)計(jì)相對較簡潔，實(shí)現(xiàn)的效果通常都不需要增加額外的標(biāo)簽。
默認(rèn)的表單布局是垂直方向?qū)R的，通過對表單<form>設(shè)置對應(yīng)的樣式名來定義表單的布局類型。如，設(shè)置樣式名為.form-inline，則表單布局類型切換到內(nèi)聯(lián)布局，則所有的表單控件的顯示模式變?yōu)閐isplay:inline-block，正如你了解的，它們會在同一行內(nèi)顯示。而搜索類型的布局，主要提供了圓角的樣式。
所謂水平對齊類型可能是我們最常見的表單布局類型樣式——左邊是標(biāo)簽文案用<label>來表示表單的含義；右邊是表單控件。具體使用方法和效果可以參考示例文件。
關(guān)于表單控件的狀態(tài)，Bootstrap支持表單控件的聚焦和不可用狀態(tài)展示，默認(rèn)去除了webkit瀏覽器默認(rèn)的outline效果，并增加了盒陰影box-shadow來代替原有的聚焦效果。

表單擴(kuò)展控件

前置 & 后置的輸入框

表單組—帶有前置或后置文本—為你的輸入框提供了一種簡便的方式來更好的傳達(dá)用意。如示例頁面中——Twitter用 @ 符號來標(biāo)識用戶名，還有用 $ 標(biāo)識資產(chǎn)。

復(fù)選框和單選框

升級到1.4版本以后，Bootstrap需要用額外的標(biāo)簽包裹復(fù)選款和單選框來將它們組合起來。而現(xiàn)在，之需要簡單的用<label>標(biāo)簽來包裹<input type="checkbox">就可以了。
同行顯示的復(fù)選框和單選框也是被支持的。只需要給.checkbox或.radio標(biāo)簽增加樣式名.inline就行了。

Inline forms and append/prepend

在同一行內(nèi)顯示前置或后置文本輸入框，需要確保.add-on的元素和input元素放在同一行，并且它們之間不能有空格。

表單幫助信息

添加幫助信息到<span>標(biāo)簽中來顯示內(nèi)聯(lián)的提示信息。也可以在輸入框元素后面使用<p>來顯示塊級提示信息。

按鈕

按鈕樣式名描述

默認(rèn)	btn	標(biāo)準(zhǔn)的帶漸變的灰色按鈕效果
主按鈕	btn btn-primary	給默認(rèn)的按鈕增加額外的視覺效果，用來表示一些主要的行為。
信息	btn btn-info	用來取代默認(rèn)的樣式
成功	btn btn-success	表明一個成功的行為
警告	btn btn-warning	表明應(yīng)當(dāng)要謹(jǐn)慎執(zhí)行該操作
危險	btn btn-danger	表明是一個有風(fēng)險的操作
無語意	btn btn-inverse	可選的按鈕樣式，沒有明顯的語意。 Alternate dark gray button, not tied to a semantic action or use

為行為創(chuàng)建按鈕

作為約定，按鈕標(biāo)簽（button）應(yīng)當(dāng)只用于動作，而超鏈接則用于對象的描述。舉個例子，“下載”應(yīng)該是一個按鈕（button）而“最近的活動”則應(yīng)該是一個鏈接。
凡是使用.btn樣式名的元素都會有按鈕的樣式。但是應(yīng)當(dāng)只使用<a>和<button>元素來作為按鈕顯示。

跨瀏覽器兼容

關(guān)于跨瀏覽器的兼容，很顯然IE又拖后腿了——IE9對背景漸變支持不夠良好，所以Bootstrap移除了對它的支持。

不同尺寸的按鈕

通過額外添加樣式名.btn-large,?.btn-small，或.btn-mini來顯示為不同的尺寸。

不可用狀態(tài)（disabled）

對于不可用的按鈕，通過添加樣式名.disabled并給按鈕<button>添加disabled屬性來表現(xiàn)。

同一個樣式名，不同的標(biāo)簽

事實(shí)上，通過添加.btn樣式名就可以渲染出按鈕的樣式。按鈕的標(biāo)簽可以是<a>,?<button>或?<input>標(biāo)簽。但是你最好還是根據(jù)實(shí)際的上下文場景來選擇標(biāo)簽。

圖標(biāo)?由Glyphicons提供

關(guān)于sprite技術(shù)這邊就不再多說了，如果有不了解的朋友可以google一下。Bootstrap的圖標(biāo)就使用了sprite的方式。
Bootstrap的圖標(biāo)使用<i>標(biāo)簽作為所有圖標(biāo)的顯示容器，通過添加約定的樣式名來顯示對應(yīng)的圖標(biāo)。共有120個圖標(biāo)供大家使用，你可以在原文檔，示例頁面或者在sprites.less文件中找到完整的樣式列表。
以上就是本章節(jié)的內(nèi)容，更具體的信息可以在Bootstrap官方文檔中查看。Bootstrap對于不了解CSS或者煩惱于跨瀏覽樣式定義以及希望快速使用、敏捷開發(fā)的朋友是大有裨益的，但是在使用時還是建議根據(jù)自己的需要進(jìn)行選擇。

?

文章出處：http://www.36ria.com/5466

轉(zhuǎn)載于:https://www.cnblogs.com/a-jian/archive/2012/09/06/2673022.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap—基础样式定义的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。