整理自慕課筆記

基礎(chǔ)表單

表單主要功能是用來(lái)與用戶做交流的一個(gè)網(wǎng)頁(yè)控件，良好的表單設(shè)計(jì)能夠讓網(wǎng)頁(yè)與用戶更好的溝通。表單中常見(jiàn)的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復(fù)選按鈕、文本域和按鈕等。其中每個(gè)控件所起的作用都各不相同，而且不同的瀏覽器對(duì)表單控件渲染的風(fēng)格都各有不同。
對(duì)于基礎(chǔ)表單，Bootstrap并未對(duì)其做太多的定制性效果設(shè)計(jì)，僅僅對(duì)表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制。主要將這些元素的margin、padding和border等進(jìn)行了細(xì)化設(shè)置。
當(dāng)然表單除了這幾個(gè)元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過(guò)定制了一個(gè)類(lèi)名form-control，也就是說(shuō)，如果這幾個(gè)元素使用了類(lèi)名“form-control”，將會(huì)實(shí)現(xiàn)一些設(shè)計(jì)上的定制效果。

1、寬度變成了100%
2、設(shè)置了一個(gè)淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設(shè)置陰影效果，并且元素得到焦點(diǎn)之時(shí)，陰影和邊框效果會(huì)有所變化
5、設(shè)置了placeholder的顏色為#999

水平表單

Bootstrap框架默認(rèn)的表單是垂直顯示風(fēng)格，但很多時(shí)候我們需要的水平表單風(fēng)格（標(biāo)簽居左，表單控件居右）見(jiàn)下圖。

在Bootstrap框架中要實(shí)現(xiàn)水平表單效果，必須滿足以下兩個(gè)條件：
1、在元素是使用類(lèi)名“form-horizontal”。
2、配合Bootstrap框架的網(wǎng)格系統(tǒng)。（網(wǎng)格布局會(huì)在以后的章節(jié)中詳細(xì)講解）

在元素上使用類(lèi)名“form-horizontal”主要有以下幾個(gè)作用：
1、設(shè)置表單控件padding和margin值。
2、改變“form-group”的表現(xiàn)形式，類(lèi)似于網(wǎng)格系統(tǒng)的“row”。

內(nèi)聯(lián)表單

有時(shí)候我們需要將表單的控件都在一行內(nèi)顯示，類(lèi)似這樣的：

在Bootstrap框架中實(shí)現(xiàn)這樣的表單效果是輕而易舉的，你只需要在元素中添加類(lèi)名“form-inline”即可。
內(nèi)聯(lián)表單實(shí)現(xiàn)原理非常簡(jiǎn)單，欲將表單控件在一行顯示，就需要將表單控件設(shè)置成內(nèi)聯(lián)塊元素（display:inline-block）。

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

注意：那么Bootstrap為什么要這么做呢？這樣不是多此一舉嗎？其實(shí)不是的，如果沒(méi)有為輸入控件設(shè)置label標(biāo)簽，屏幕閱讀器將無(wú)法正確識(shí)別。這也是Bootstrap框架另一個(gè)優(yōu)點(diǎn)之處，為殘障人員進(jìn)行了一定的考慮。

表單控件(輸入框input)

單行輸入框，常見(jiàn)的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時(shí)也必須添加type類(lèi)型，如果沒(méi)有指定type類(lèi)型，將無(wú)法得到正確的樣式，因?yàn)锽ootstrap框架都是通過(guò)inputtype=“?”的形式來(lái)定義樣式的。
為了讓控件在各種表單風(fēng)格中樣式不出錯(cuò)，需要添加類(lèi)名“form-control”，如：

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

表單控件(下拉選擇框select)

Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設(shè)置multiple屬性的值為multiple。Bootstrap框架會(huì)為這些元素提供統(tǒng)一的樣式風(fēng)格。如：

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

表單控件(文本域textarea)

文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以設(shè)置其寬度。但如果textarea元素中添加了類(lèi)名“form-control”類(lèi)名，則無(wú)需設(shè)置cols屬性。因?yàn)锽ootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

<form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

表單控件(復(fù)選框checkbox和單選擇按鈕radio)

Bootstrap框架中checkbox和radio有點(diǎn)特殊，Bootstrap針對(duì)他們做了一些特殊化處理，主要是checkbox和radio與label標(biāo)簽配合使用會(huì)出現(xiàn)一些小問(wèn)題（最頭痛的是對(duì)齊問(wèn)題）。使用Bootstrap框架，開(kāi)發(fā)人員無(wú)需考慮太多，只需要按照下面的方法使用即可。

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>

從上面的示例，我們可以得知：

1、不管是checkbox還是radio都使用label包起來(lái)了
2、checkbox連同label標(biāo)簽放置在一個(gè)名為“.checkbox”的容器內(nèi)
3、radio連同label標(biāo)簽放置在一個(gè)名為“.radio”的容器內(nèi)

在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來(lái)處理復(fù)選框、單選按鈕與標(biāo)簽的對(duì)齊方式

表單控件(復(fù)選框和單選按鈕水平排列)

有時(shí)候，為了布局的需要，將復(fù)選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：
1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類(lèi)名“checkbox-inline”
2、如果radio需要水平排列，只需要在label標(biāo)簽上添加類(lèi)名“radio-inline”

表單控件(按鈕)

input[type=“submit”

input[type=“button”

input[type=“reset”

<button>

在Bootstrap框架中的按鈕都是采用<button>來(lái)實(shí)現(xiàn)。
有關(guān)于Bootstrap中按鈕如何制作，在這里不做過(guò)多闡述，因?yàn)榘粹o也是Bootstrap框架中核心部分之一，后面我們專(zhuān)門(mén)有一節(jié)內(nèi)容來(lái)介紹Bootstrap的按鈕。

表單控件大小

前面看到的表單控件都正常的大小。可以通過(guò)設(shè)置控件的height，line-height，padding和font-size等屬性來(lái)實(shí)現(xiàn)控件的高度設(shè)置。不過(guò)Bootstrap框架還提供了兩個(gè)不同的類(lèi)名，用來(lái)控制表單控件的高度。這兩個(gè)類(lèi)名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大
這兩個(gè)類(lèi)適用于表單中的input，textarea和select控件，具體使用如下：

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">

不管是“input-sm”還是“input-lg”僅對(duì)控件高度做了處理。但往往很多時(shí)候，我們需要控件寬度也要做一定的變化處理。這個(gè)時(shí)候就要借住Bootstrap框架的網(wǎng)格系統(tǒng)。所以你要控制表單寬度，可以像下面這樣使用：

<form role="form" class="form-horizontal">
 <div class="form-group">
 <div class="col-xs-4">
 <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
 </div>
 <div class="col-xs-4">
 <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
 </div>
 <div class="col-xs-4">
 <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
 </div>
 </div>
 …
</form>

前面介紹水平表單時(shí)說(shuō)過(guò)，如果表單使用了類(lèi)名“form-horizontal”，其中“form-group”就相當(dāng)于網(wǎng)格系統(tǒng)中的“row”。換句話說(shuō)，如果沒(méi)有這樣做，要通過(guò)網(wǎng)格系統(tǒng)來(lái)控制表單控件寬度，就需要這樣使用：

<div class="row">
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
</div>

表單控件狀態(tài)(焦點(diǎn)狀態(tài))

表單主要用來(lái)與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開(kāi)表單的控件狀態(tài)。
表單狀態(tài)的作用：
每一種狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點(diǎn)的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗(yàn)證狀態(tài)，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態(tài)。
焦點(diǎn)狀態(tài)是通過(guò)偽類(lèi)“:focus”來(lái)實(shí)現(xiàn)。Bootstrap框架中表單控件的焦點(diǎn)狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。
要讓控件在焦點(diǎn)狀態(tài)下有上面樣式效果，需要給控件添加類(lèi)名“form-control”：

<form role="form" class="form-horizontal">
 <div class="form-group">
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦點(diǎn)狀態(tài)下效果">
 </div>
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦點(diǎn)點(diǎn)狀態(tài)下效果">
 </div>
 </div>
</form>

在Bootstrap框架中，file、radio和checkbox控件在焦點(diǎn)狀態(tài)下的效果也與普通的input控件不太一樣，主要是因?yàn)锽ootstrap對(duì)他們做了一些特殊處理

表單控件狀態(tài)(禁用狀態(tài))

Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。和其他表單的禁用狀態(tài)不同的是，Bootstrap框架做了一些樣式風(fēng)格的處理：
使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：

<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>

在使用了“form-control”的表單控件中，樣式設(shè)置了禁用表單背景色為灰色，而且手型變成了不準(zhǔn)輸入的形狀。如果控件中不使用類(lèi)名“form-control”，禁用的控件只會(huì)有一個(gè)不準(zhǔn)輸入的手型出來(lái)。
在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個(gè)域都將處于被禁用狀態(tài)。

<form role="form">
<fieldset disabled>
 <div class="form-group">
 <label for="disabledTextInput">禁用的輸入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
 </div>
 <div class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可選擇</option>
 </select>
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox">無(wú)法選擇
 </label>
 </div>
 <button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>

據(jù)說(shuō)對(duì)于整個(gè)禁用的域中，如果legend中有輸入框的話，這個(gè)輸入框是無(wú)法被禁用的。

表單控件狀態(tài)(驗(yàn)證狀態(tài))

在制作表單時(shí)，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯(cuò)誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(tài)類(lèi)名。

<form role="form">
<div class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
</div>
<div class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告狀態(tài)</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)">
</div>
<div class="form-group has-error">
 <label class="control-label" for="inputError1">錯(cuò)誤狀態(tài)</label>
 <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)">
</div>
</form>

從效果可以看出，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而以。
其他兩種狀態(tài)省略源碼不在此展示。
很多時(shí)候，在表單驗(yàn)證的時(shí)候，不同的狀態(tài)會(huì)提供不同的 icon，比如成功是一個(gè)對(duì)號(hào)（√），錯(cuò)誤是一個(gè)叉號(hào)（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對(duì)應(yīng)的狀態(tài)下顯示 icon 出來(lái)，只需要在對(duì)應(yīng)的狀態(tài)下添加類(lèi)名“has-feedback”。請(qǐng)注意，此類(lèi)名要與“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
 <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
 ......
</div>
<div class="form-group has-error has-feedback">
 ......
</div>
</form>

從效果圖中可以看出，圖標(biāo)都居右。在 Bootstrap 的小圖標(biāo)都是使用@font-face來(lái)制作（后面的內(nèi)容中將會(huì)著重用一節(jié)內(nèi)容來(lái)介紹）。而且必須在表單中添加了一個(gè) span 元素：

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>

表單提示信息

平常在制作表單驗(yàn)證時(shí)，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個(gè)”help-block”樣式，將提示信息以塊狀顯示，并且顯示在控件底部。

<form role="form">
<div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
 <span class="help-block">你輸入的信息是正確的</span>
 <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
 …
</form>

在Bootstrap V2.x版本中還提供了一個(gè)行內(nèi)提示信息，其使用了類(lèi)名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：

.help-inline{
 display:inline-block;
 padding-left:5px;
 color: #737373;
}

如果你不想為bootstrap.css增加自己的代碼，而且設(shè)計(jì)又有這種樣的需求，那么只能借助于Bootstrap的網(wǎng)格系統(tǒng)。(網(wǎng)格系統(tǒng)在后面的章節(jié)中會(huì)詳細(xì)講解)

<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
</div>
<span class="col-xs-6 help-block">你輸入的信息是正確的</span>
</div>
</div>
</form>

結(jié)束語(yǔ)：有關(guān)于Bootstrap框架中表單的運(yùn)用除了按鈕部分，到此就算是介紹完了。如果你覺(jué)得這樣的表單效果并不是你需要的，你完全可以通過(guò)forms.less或者_(dá)forms.scss文件進(jìn)行定制，然后重新編譯就可以得到你需要的表單效果。在接下來(lái)的一節(jié)中，我們Bootstrap框架中另一個(gè)核心內(nèi)容——按鈕。

按鈕

按鈕也是Bootstrap框架核心內(nèi)容之一。因?yàn)榘粹o是Web制作中不可缺少的東西。而且不同的Web頁(yè)面具有不同的按鈕風(fēng)格，甚至說(shuō)同一個(gè)Web網(wǎng)站或應(yīng)用程序具有多種按鈕風(fēng)格，比如說(shuō)不同的按鈕顏色、大小和狀態(tài)等。那么Bootstrap框架也考慮了這些因素，接下來(lái)的內(nèi)容我們一起來(lái)探討B(tài)ootstrap框架中的另一核心部分內(nèi)容——按鈕。

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button> 
 <button class="btn btn-default" type="button">默認(rèn)按鈕.btn-default</button> 
 <button class="btn btn-primary" type="button">主要按鈕.btn-primary</button> 
 <button class="btn btn-success" type="button">成功按鈕.btn-success</button> 
 <button class="btn btn-info" type="button">信息按鈕.btn-info</button> 
 <button class="btn btn-warning" type="button">警告按鈕.btn-warning</button> 
 <button class="btn btn-danger" type="button">危險(xiǎn)按鈕.btn-danger</button> 
 <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button> 

基本按鈕

Bootstrap框架V3.x版本的基本按鈕和V2.x版本的基本按鈕一樣，都是通過(guò)類(lèi)名“btn”來(lái)實(shí)現(xiàn)。不同的是在V3.x版本要簡(jiǎn)約很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如說(shuō)文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。
難能可貴的是，Bootstrap框架中的考慮了不同瀏覽器的解析差異，進(jìn)行了比較安全的兼容性處理，使按鈕效果在不同的瀏覽器中所呈現(xiàn)的效果基本相同。
Bootstrap框架的按鈕使用非常的簡(jiǎn)單，使用方式如下：

<button class="btn" type="button">我是一個(gè)基本按鈕</button>

默認(rèn)按鈕

Bootstrap框架首先通過(guò)基礎(chǔ)類(lèi)名“.btn”定義了一個(gè)基礎(chǔ)的按鈕風(fēng)格，然后通過(guò)“.btn-default”定義了一個(gè)默認(rèn)的按鈕風(fēng)格。默認(rèn)按鈕的風(fēng)格就是在基礎(chǔ)按鈕的風(fēng)格的基礎(chǔ)上修改了按鈕的背景顏色、邊框顏色和文本顏色。
使用默認(rèn)按鈕風(fēng)格也非常的簡(jiǎn)單，只需要在基礎(chǔ)按鈕“btn”的基礎(chǔ)上增加類(lèi)名“btn-default”即可：

<button class="btn btn-default" type="button">默認(rèn)按鈕</button>

多標(biāo)簽支持

一般制作按鈕除了使用<button>標(biāo)簽元素之外，還可以使用<input type="submit">和<a>標(biāo)簽等。同樣，在Bootstrap框架中制作按鈕時(shí)，除了剛才所說(shuō)的這些標(biāo)簽元素之外，還可以使用在其他的標(biāo)簽元素上，唯一需要注意的是，要在制作按鈕的標(biāo)簽元素上添加類(lèi)名“btn”。如果不添加是不會(huì)有任何按鈕效果。
我們一起來(lái)看看其他標(biāo)簽制作的基本按鈕效果：

<button class="btn btn-default" type="button">button標(biāo)簽按鈕</button>
<input type="submit" class="btn btn-default" value="input標(biāo)簽按鈕"/>
<a href="##" class="btn btn-default">a標(biāo)簽按鈕</a>
<span class="btn btn-default">span標(biāo)簽按鈕</span>
<div class="btn btn-default">div標(biāo)簽按鈕</div>

注意：雖然在Bootstrap框架中使用任何標(biāo)簽元素都可以實(shí)現(xiàn)按鈕風(fēng)格，但個(gè)人并不建議這樣使用，為了避免瀏覽器兼容性問(wèn)題，個(gè)人強(qiáng)烈建議使用button或a標(biāo)簽來(lái)制作按鈕。

定制風(fēng)格

在介紹按鈕開(kāi)篇就說(shuō)過(guò)，Web頁(yè)面可能會(huì)有不同的按鈕風(fēng)格。那么在Bootstrap框架也考慮了。在Bootstrap框架中除了默認(rèn)的按鈕風(fēng)格之外，還有其他六種按鈕風(fēng)格，每種風(fēng)格的其實(shí)都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。
在Bootstrap框架中不同的按鈕風(fēng)格都是通過(guò)不同的類(lèi)名來(lái)實(shí)現(xiàn)，在使用過(guò)程中，開(kāi)發(fā)者只需要選擇不同的類(lèi)名即可：

使用起來(lái)就很簡(jiǎn)單，就像前面介紹的默認(rèn)按鈕一樣的使用方法，只需要在基礎(chǔ)按鈕“.btn”基礎(chǔ)上追加對(duì)應(yīng)的類(lèi)名，就可以得到需要的按鈕風(fēng)格。如：

<button class="btn" type="button">基礎(chǔ)按鈕.btn</button>
<button class="btn btn-default" type="button">默認(rèn)按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>
<button class="btn btn-info" type="button">信息按鈕.btn-info</button>
<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-danger" type="button">危險(xiǎn)按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

按鈕大小

上一節(jié)介紹了按鈕的定制風(fēng)格，也就是如何實(shí)現(xiàn)Web頁(yè)面中多種風(fēng)格按鈕。在Bootstrap框架中，對(duì)于按鈕的大小，也是可以定制的。類(lèi)似于input一樣，通過(guò)在基礎(chǔ)按鈕“.btn”的基礎(chǔ)上追加類(lèi)名來(lái)控制按鈕的大小。
在Bootstrap框架中提供了三個(gè)類(lèi)名來(lái)控制按鈕大?。?

從上表中不難發(fā)現(xiàn)，在Bootstrap框架中控制按鈕的大小都是通過(guò)修改按鈕的padding、line-height、font-size和border-radius幾個(gè)屬性。
那么在實(shí)際使用中，這幾個(gè)類(lèi)名可以配合按鈕中其他顏色類(lèi)名一起使用，但唯一一點(diǎn)不能缺少“.btn”類(lèi)名：

<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>

塊狀按鈕

從前面幾節(jié)的內(nèi)容中，大家可能發(fā)現(xiàn)了，每個(gè)示例中的按鈕寬度都是依靠按鈕文本和padding的值來(lái)決定。但有時(shí)候在制作按鈕的時(shí)候需要按鈕寬度充滿整個(gè)父容器（width:100%），特別是在移動(dòng)端的制作中。那么前面的方法我們都無(wú)法很好的實(shí)現(xiàn)，除非重新定義按鈕的寬度。其實(shí)在Bootstrap中并不需要這樣做，Bootstrap框架中提供了一個(gè)類(lèi)名“btn-block”。按鈕使用這個(gè)類(lèi)名就可以讓按鈕充滿整個(gè)容器，并且這個(gè)按鈕不會(huì)有任何的padding和margin值。在實(shí)際當(dāng)中，常把這種按鈕稱為塊狀按鈕。
使用方法和前面的類(lèi)似，只需要在原按鈕類(lèi)名上添加“.btn-block”類(lèi)名，當(dāng)然“.btn”類(lèi)名是不可或缺的：

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button>
<button class="btnbtn-primary btn-block" type="button">正常按鈕</button>
<button class="btnbtn-primary btn-sm btn-block" type="button">小型按鈕.btn-sm</button>
<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按鈕.btn-xs</button>

按鈕狀態(tài)——活動(dòng)狀態(tài)

Bootstrap框架針對(duì)按鈕的狀態(tài)做了一些特殊處理。在Bootstrap框架中針對(duì)按鈕的狀態(tài)效果主要分為兩種：活動(dòng)狀態(tài)和禁用狀態(tài)。
Bootstrap按鈕的活動(dòng)狀態(tài)主要包括按鈕的懸浮狀態(tài)(:hover)，點(diǎn)擊狀態(tài)(:active)和焦點(diǎn)狀態(tài)（:focus）幾種。
而且不同風(fēng)格下的按鈕都具有這幾種狀態(tài)效果，只是顏色做了一定的調(diào)整，當(dāng)按鈕處理正在點(diǎn)擊狀態(tài)（也就是鼠標(biāo)按下的未松開(kāi)的狀態(tài)），對(duì)于<button>元素是通過(guò)“:active”偽類(lèi)實(shí)現(xiàn)，而對(duì)于<a>這樣的標(biāo)簽元素則是通過(guò)添加類(lèi)名“.active”來(lái)實(shí)現(xiàn)。

按鈕狀態(tài)——禁用狀態(tài)

和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態(tài)的設(shè)置。禁用狀態(tài)與其他狀態(tài)按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調(diào)整為65%。
在Bootstrap框架中，要禁用按鈕有兩種實(shí)現(xiàn)方式：
方法1：在標(biāo)簽中添加disabled屬性
方法2：在元素標(biāo)簽中添加類(lèi)名“disabled”
兩者的主要區(qū)別是：
“.disabled”樣式不會(huì)禁止按鈕的默認(rèn)行為，比如說(shuō)提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認(rèn)行為，則需要通過(guò)JavaScript這樣的語(yǔ)言來(lái)處理。對(duì)于<a>標(biāo)簽也存在類(lèi)似問(wèn)題，如果通過(guò)類(lèi)名“.disable”來(lái)禁用按鈕，其鏈接行為是無(wú)法禁止。而在元素標(biāo)簽中添加“disabled”屬性的方法是可以禁止元素的默認(rèn)行為的。
下面是兩種方法的舉例：

<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通過(guò)disabled屬性禁用按鈕</button>
<button class="btnbtn-primary btn-block disabled" type="button">通過(guò)添加類(lèi)名disabled禁用按鈕</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按鈕</button>

圖像

圖像在網(wǎng)頁(yè)制作中也是常要用到的元素，在Bootstrap框架中對(duì)于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：
1、img-responsive：響應(yīng)式圖片，主要針對(duì)于響應(yīng)式設(shè)計(jì)
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片
使用方法：

使用方法非常簡(jiǎn)單，只需要在<img>標(biāo)簽上添加對(duì)應(yīng)的類(lèi)名，如下代碼：

<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

設(shè)置圖片大?。?
由于樣式?jīng)]有對(duì)圖片做大小上的樣式限制，所以在實(shí)際使用的時(shí)候，需要通過(guò)其他的方式來(lái)處理圖片大小。比如說(shuō)控制圖片容器大小。（注意不可以通過(guò)css樣式直接修改img圖片的大小，這樣操作就不響應(yīng)了）
注意：
對(duì)于圓角圖片和圓形圖片效果，因?yàn)槭鞘褂昧薈SS3的圓角樣式來(lái)實(shí)現(xiàn)的，所以注意對(duì)于IE8以及其以下版本不支持，是沒(méi)有圓角效果的。

圖標(biāo)

200個(gè)icon：

這里說(shuō)的圖標(biāo)就是Web制作中?？吹降男con圖標(biāo)，可以說(shuō)這些小icon圖標(biāo)是一個(gè)優(yōu)秀Web中不可缺少的一部分，起到畫(huà)龍點(diǎn)睛的效果。在Bootstrap框架中也為大家提供了近200個(gè)不同的icon圖片，而這些圖標(biāo)都是使用CSS3的@font-face屬性配合字體來(lái)實(shí)現(xiàn)的icon效果。

放心使用：

在具體介紹Bootstrap的icon圖標(biāo)之前，我們首先要感謝glyphicons.com網(wǎng)站，因?yàn)锽ootstrap框架中圖標(biāo)都是glyphicons.com這個(gè)商業(yè)網(wǎng)站提供的，并且免費(fèi)授權(quán)給Bootstrap框架使用，所以大家可以放心使用在自己的項(xiàng)目當(dāng)中。

原理分析：

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實(shí)現(xiàn)原理就是通過(guò)@font-face屬性加載了字體。
大家或許會(huì)問(wèn)，這些字體我去哪里獲取。如果你是從前面一直閱讀過(guò)來(lái)，我們?cè)诮榻B文件結(jié)構(gòu)那一節(jié)就已介紹過(guò)。在Bootstrap框架中有一個(gè)fonts的目錄，這個(gè)目錄中提供的字體文件就是用于制作icon的字體文件。
自定義完字體之后，需要對(duì)icon設(shè)置一個(gè)默認(rèn)樣式，在Bootstrap框架中是通過(guò)給元素添加“glyphicon”類(lèi)名來(lái)實(shí)現(xiàn)，然后通過(guò)偽元素“:before”的“content”屬性調(diào)取對(duì)應(yīng)的icon編碼

在網(wǎng)頁(yè)中使用圖標(biāo)也非常的簡(jiǎn)單，在任何內(nèi)聯(lián)元素上應(yīng)用所對(duì)應(yīng)的樣式即可：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

所有icon都是以”glyphicon-”前綴的類(lèi)名開(kāi)始，然后后綴表示圖標(biāo)的名稱。具體說(shuō)明如下：

所有名稱查看：

請(qǐng)點(diǎn)擊：http://getbootstrap.com/components/#glyphicons 鏈接查閱或根據(jù)bootstrap.css文件第2393行～第2992行查閱。

特別說(shuō)明：

除了使用glyphicon.com提供的圖標(biāo)之外，還可以使用第三方為Bootstrap框架設(shè)計(jì)的圖標(biāo)字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的一樣，不過(guò)記得將字體下載到你本地。 感興趣的可以閱讀官網(wǎng)相關(guān)介紹。

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

最新評(píng)論