回顧：Bootstrap的手腳架(Scaffolding)提供了固定(fixed)和流式(fluid)兩種布局，它同時(shí)建立了一個(gè)寬達(dá)940px和12列的格網(wǎng)系統(tǒng)。
? ? ? 基于手腳架(Scaffolding)之上，Bootstrap的基礎(chǔ)CSS(Base CSS)提供了一系列的基礎(chǔ)Html頁面要素，旨在為用戶提供新鮮、一致的頁面外觀和感覺。本文將主要深入講解排版(Typography),表格(Table),表單(Forms),按鈕(Buttons)這四個(gè)方面的內(nèi)容。
-
排版 (Typography)
，它囊括標(biāo)題(Headings),段落 (paragraphs), 列表(lists)以及其他內(nèi)聯(lián)要素。我們可以通過修改variables.less的兩個(gè)變量:
@baseFontSize?和?@baseLineHeight來控制整體排版的樣式。Bootstrap同時(shí)還用了一些其他的算術(shù)方法來創(chuàng)建所有類型要素的margin,padding,line-height等。
? ? ? ? 1.1 ? 標(biāo)題和段落使用常見的html<h*></h*>和<p></P>即可表現(xiàn),可以不必考慮margin,padding。兩者顯示效果如圖2-1所示：
? ? ? ? ?
圖2-1 標(biāo)題與段落(Headings¶graphs)
? ? ? 1.2 ?強(qiáng)調(diào)(Emphasis).使用<strong>和<em>兩個(gè)標(biāo)簽，前者使用粗體，后者使用斜體來強(qiáng)調(diào)標(biāo)簽內(nèi)容。請(qǐng)注意<strong>標(biāo)簽在html4中定義語氣更重的強(qiáng)調(diào)文本；在 HTML 5 中，<strong> 定義重要的文本。這些短語標(biāo)簽也可以通過定義CSS的方式來豐富效果。更多短語標(biāo)簽請(qǐng)參見[1].縮寫(abbreviations?).使用<abbr>，它重新封裝了該標(biāo)簽，鼠標(biāo)滑過會(huì)異步地顯示縮寫的含義。引入title屬性來顯示原文，使用.initialism類對(duì)縮寫以大寫方式顯示。
? ? ? 1.3 ?引用文字(Blockquotes).使用<blockquote>標(biāo)簽和<small>兩個(gè)標(biāo)簽，前者<blockquote>是引用的文字內(nèi)容，后者<small>是可選的要素，能夠添加書寫式的引用，比如內(nèi)容作者。如圖2-2所示
圖2-2 引用(Blockquotes)
代碼片段如下所示：
<
div?
class
="row"
>
??
<
div?
class
="span6?"
>
??
<
blockquote?
class
="pull-right"
>
??
<
p
>
凌冬將至.?我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時(shí)分的光線，喚醒眠者的號(hào)角，守護(hù)王國的堅(jiān)盾。
</
p
>
??守夜人軍團(tuán)總司令.
<
small
>
蒙奇.D.
<
cite?
title
=""
>
路飛
</
cite
></
small
>
</
blockquote
>
??
</
div
>
??
<
div?
class
="span6?"
>
??
<
blockquote?
>
??
<
p
>
凌冬將至.
我是黑暗中的利劍，長城上的守衛(wèi)，抵御寒冷的烈焰，破曉時(shí)分的光線，喚醒眠者的號(hào)角，守護(hù)王國的堅(jiān)盾。
</
p
>
??守夜人軍團(tuán)總司令.
<
small
>
蒙奇.D.
<
cite?
title
=""
>
路飛
</
cite
></
small
>
</
blockquote
>
??
</
div
>
??
</
div
>
? ? 1.4列表(lists).Bootstrap提供三種標(biāo)簽來表現(xiàn)不同類型的列表。<ul>表示無序列表，<ul class="unstyled">表示無樣式的無序列表，<ol>表示有序列表，<dl>表示描述列表，<dl class="dl-horizontal">表示豎排描述列表。圖2-3較好顯示了這幾種列表：
圖2-3 列表(lists)
? ? 2.表格(Table).依然使用<table><tr><th><td>等標(biāo)簽來表現(xiàn)表格。主要提供了四個(gè)css的類來控制表格的邊和結(jié)構(gòu)。表2-1顯示了bootstrap的table可選項(xiàng)。
?
|
名字
|
Class
|
描述
|
|
Default
|
None
|
沒有樣式，只有行和列
|
|
Basic
|
.table
|
只有在行間有豎線
|
|
Bordered
|
.table-bordered
|
圓角和添加外邊框
|
|
Zebra-stripe
|
.table-striped
|
為奇數(shù)行添加淡灰色的背景色
|
|
Condensed
|
.table-condensed
|
將橫向的 padding 對(duì)切
|
?
? ? ? ? ? ? ? 表2-1 表格選項(xiàng)(Table Options)
? ? ?我們可以將這些CSS類結(jié)合起來使用，如圖2-4所示，顯示一個(gè)混合的表格：
圖2-4 表格(Table)
?
? ?3. ?表單(Forms).Bootstrap的表單是非常驚艷的部分。最好的地方在于你如何使用這些hmtl標(biāo)簽，它都會(huì)有很好的表現(xiàn)效果，而且不需要其他多余的代碼。無論多復(fù)雜的布局都可以根據(jù)這些簡(jiǎn)潔，可擴(kuò)展，事件綁定的要素來輕易實(shí)現(xiàn)。主要提供了四四種表單選項(xiàng)，如表2-2所示：
|
名字
|
Class
|
描述
|
|
Vertical (default)
|
.form-vertical?(not required)
|
堆放式, 可控制的左對(duì)齊標(biāo)簽
|
|
Inline
|
.form-inline
|
左對(duì)齊標(biāo)簽和簡(jiǎn)約的內(nèi)聯(lián)控制塊
|
|
Search
|
.form-search
|
放大的圓角，具有美感的搜索框
|
|
Horizontal
|
.form-horizontal
|
左漂浮, 右對(duì)齊標(biāo)簽?
|
? ? ? ? ?推薦到官方文檔去體驗(yàn)下各種表單要素的真實(shí)效果，在chrome,Firefox等現(xiàn)代瀏覽器下顯示十分優(yōu)雅。同時(shí)可以使用.control-group來控制表單輸入、錯(cuò)誤等狀態(tài)，需要wekit內(nèi)核。如圖2-5所示：
圖2-5 表單狀態(tài)控制
? ? ? ? ? ? ? 代碼片段如下：
<
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
>
? ? 4.按鈕(Buttons).Bootstrap提供多種樣式的按鈕，同樣是通過CSS的類來控制,包括btn, btn-primary,?btn-info,btn-success等不同顏色的按鈕，亦可以簡(jiǎn)單通過.btn-large?.btn-mini等CSS的class控制按鈕大小，能夠同時(shí)用在<a>,<button>,<input>標(biāo)簽上，非常簡(jiǎn)單易用。如圖2-6所示，不同顏色的按鈕：
圖2-6?按鈕(Buttons)
? ? ? ? ? ? ? ?代碼片段如下：
<
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
>
?? ? 如果需要更多樣式的按鈕，可以在這個(gè)網(wǎng)站來定制。?如果需要更多的整個(gè)網(wǎng)站的樣式和風(fēng)格，可以在這個(gè)和那個(gè)網(wǎng)站來定制。
? ? ?參考文獻(xiàn)與延伸閱讀
? ? ? ? ? ?1.?M. Pilgrim, HTML5: up and running: Oreilly & Associates Inc, 2010
? ? ? ? ? ?2.?HTML 5 <caption> 標(biāo)簽?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