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

基礎排版樣式標題，段落，列表和其他

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

強調，地址和縮寫

元素標簽用法可選項

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

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

blockquote標簽

元素標簽用法可選項

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

關于列表的樣式

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

代碼片段

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

表格

表格相關標簽說明

標簽名說明

<table>

用表格的形式來顯示數據的容器標簽。

<thead>

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

<tbody>

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

<tr>

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

<td>

用來定義單元格

<th>

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

<caption>

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

表格樣式選項

選項名稱樣式名說明

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

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

表單

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

• 垂直對齊 （默認）
• 搜索類型
• 內聯
• 水平對齊

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

4種表單布局類型

Bootstrap提供了簡單的結構和設計來顯示常見的web表單。

類型名稱樣式名描述

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

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

表單擴展控件

前置 & 后置的輸入框

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

復選框和單選框

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

Inline forms and append/prepend

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

表單幫助信息

添加幫助信息到<span>標簽中來顯示內聯的提示信息。也可以在輸入框元素后面使用<p>來顯示塊級提示信息。

按鈕

按鈕樣式名描述

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

為行為創建按鈕

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

跨瀏覽器兼容

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

不同尺寸的按鈕

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

不可用狀態（disabled）

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

同一個樣式名，不同的標簽

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

圖標?由Glyphicons提供

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

?

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

轉載于:https://www.cnblogs.com/a-jian/archive/2012/09/06/2673022.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。