上講回顧：Bootstrap的手腳架(Scaffolding)提供了固定(fixed)和流式(fluid)兩種布局，它同時建立了一個寬達940px和12列的格網系統。
基於手腳架(Scaffolding)之上，Bootstrap的基礎CSS(Base CSS)提供了一系列的基礎Html頁面要素，旨在為用戶提供新鮮、一致的頁面外觀和感覺。本文將主要深入講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個方面的內容。
- 排版 (Typography)，它囊括標題(Headings),段落 (paragraphs), 列表(lists)以及其他內聯要素。我們可以通過修改variables.less的兩個變量:
@baseFontSize和@baseLineHeight來控制整體排版的樣式。Bootstrap同時還用了一些其他的算術方法來創建所有類型要素的margin,padding,line-height等。
1.1 標題和段落使用常見的html<h*></h*>和<p></P>即可表現,可以不必考慮margin,padding。兩者顯示效果如圖2-1所示：
圖2-1 標題與段落(Headings¶graphs)
1.2 強調(Emphasis).使用<strong>和<em>兩個標簽，前者使用粗體，后者使用斜體來強調標簽內容。請注意<strong>標簽在html4中定義語氣更重的強調文本；在 HTML 5 中，<strong> 定義重要的文本。這些短語標簽也可以通過定義CSS的方式來豐富效果。更多短語標簽請參見[1].縮寫(abbreviations ).使用<abbr>，它重新封裝了該標簽，鼠標滑過會異步地顯示縮寫的含義。引入title屬性來顯示原文，使用.initialism類對縮寫以大寫方式顯示。
1.3 引用文字(Blockquotes).使用<blockquote>標簽和<small>兩個標簽，前者<blockquote>是引用的文字內容，后者<small>是可選的要素，能夠添加書寫式的引用，比如內容作者。如圖2-2所示
圖2-2 引用(Blockquotes)
代碼片段如下所示：
<div class="row"> <div class="span6 "> <blockquote class="pull-right"> <p>凌冬將至. 我是黑暗中的利劍，長城上的守衛，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p> 守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small> </blockquote> </div> <div class="span6 "> <blockquote > <p>凌冬將至. 我是黑暗中的利劍，長城上的守衛，抵御寒冷的烈焰，破曉時分的光線，喚醒眠者的號角，守護王國的堅盾。</p> 守夜人軍團總司令.<small>蒙奇.D.<cite title="">路飛</cite></small> </blockquote> </div> </div>
1.4列表(lists).Bootstrap提供三種標簽來表現不同類型的列表。<ul>表示無序列表，<ul class="unstyled">表示無樣式的無序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class="dl-horizontal">表示豎排描述列表。圖2-3較好顯示了這幾種列表：
圖2-3 列表(lists)
2.表格(Table).依然使用<table><tr><th><td>等標簽來表現表格。主要提供了四個css的類來控制表格的邊和結構。表2-1顯示了bootstrap的table可選項。
| 名字 |
Class |
描述 |
| Default |
None |
沒有樣式，只有行和列 |
| Basic |
.table |
只有在行間有豎線 |
| Bordered |
.table-bordered |
圓角和添加外邊框 |
| Zebra-stripe |
.table-striped |
為奇數行添加淡灰色的背景色 |
| Condensed |
.table-condensed |
將橫向的 padding 對切 |
表2-1 表格選項(Table Options)
我們可以將這些CSS類結合起來使用，如圖2-4所示，顯示一個混合的表格：
圖2-4 表格(Table)
代碼片段如下所示：
View Code
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div>
3. 表單(Forms).Bootstrap的表單是非常驚艷的部分。最好的地方在於你如何使用這些hmtl標簽，它都會有很好的表現效果，而且不需要其他多余的代碼。無論多復雜的布局都可以根據這些簡潔，可擴展，事件綁定的要素來輕易實現。主要提供了四四種表單選項，如表2-2所示：
| 名字 |
Class |
描述 |
| Vertical (default) |
.form-vertical (not required) |
堆放式, 可控制的左對齊標簽 |
| Inline |
.form-inline |
左對齊標簽和簡約的內聯控制塊 |
| Search |
.form-search |
放大的圓角，具有美感的搜索框 |
| Horizontal |
.form-horizontal |
左漂浮, 右對齊標簽 |
推薦到官方文檔去體驗下各種表單要素的真實效果，在chrome,Firefox等現代瀏覽器下顯示十分優雅。同時可以使用.control-group來控制表單輸入、錯誤等狀態，需要wekit內核。如圖2-5所示：
圖2-5 表單狀態控制
代碼片段如下：
View Code
<div class="span8"> <form class="form-horizontal"> <fieldset> <div class="control-group"> <label class="control-label" for="focusedInput">Focused input</label> <div class="controls"> <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…"> </div> </div> <div class="control-group"> <label class="control-label">Uneditable input</label> <div class="controls"> <span class="input-xlarge uneditable-input">Some value here</span> </div> </div> <div class="control-group"> <label class="control-label" for="disabledInput">Disabled input</label> <div class="controls"> <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled> </div> </div> <div class="control-group"> <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label> <div class="controls"> <label class="checkbox"> <input type="checkbox" id="optionsCheckbox2" value="option1" disabled> This is a disabled checkbox </label> </div> </div> <div class="control-group warning"> <label class="control-label" for="inputWarning">Input with warning</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">Something may have gone wrong</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">Input with error</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">Please correct the error</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">Woohoo!</span> </div> </div> <div class="control-group success"> <label class="control-label" for="selectError">Select with success</label> <div class="controls"> <select id="selectError"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span class="help-inline">Woohoo!</span> </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button class="btn">Cancel</button> </div> </fieldset> </form> </div> </div>
4.按鈕(Buttons).Bootstrap提供多種樣式的按鈕，同樣是通過CSS的類來控制,包括btn, btn-primary, btn-info,btn-success等不同顏色的按鈕，亦可以簡單通過.btn-large .btn-mini等CSS的class控制按鈕大小，能夠同時用在<a>,<button>,<input>標簽上，非常簡單易用。如圖2-6所示，不同顏色的按鈕：
圖2-6 按鈕(Buttons)
代碼片段如下：
View Code
<table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> <th>class=""</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><code>btn btn-primary</code></td> <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><button class="btn btn-info" href="#">Info</button></td> <td><code>btn btn-info</code></td> <td>Used as an alternative to the default styles</td> </tr> <tr> <td><button class="btn btn-success" href="#">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> </tr> <tr> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><code>btn btn-warning</code></td> <td>Indicates caution should be taken with this action</td> </tr> <tr> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><code>btn btn-danger</code></td> <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td><button class="btn btn-inverse" href="#">Inverse</button></td> <td><code>btn btn-inverse</code></td> <td>Alternate dark gray button, not tied to a semantic action or use</td> </tr> </tbody> </table>
如果需要更多樣式的按鈕，可以在這個網站來定制。 如果需要更多的整個網站的樣式和風格，可以在這個和那個網站來定制。
參考文獻與延伸閱讀
1. M. Pilgrim, HTML5: up and running: Oreilly & Associates Inc, 2010
2. HTML 5 <caption> 標簽 http://www.w3school.com.cn/html5/tag_caption.asp
3. StyleBootstrap http://stylebootstrap.info/
4. 基於wordpress的Bootstrap http://bootstrapwp.rachelbaker.me/
5.Why did Twitter release Bootstrap? http://www.quora.com/Why-did-Twitter-release-Bootstrap
本作品由VentLam創作，采用知識共享署名-非商業性使用-相同方式共享 2.5 中國大陸許可協議進行許可。