整理關(guān)于Bootstrap表單的慕課筆記

整理自慕課筆記

基礎(chǔ)表單

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

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

水平表單

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

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

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

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

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

在Bootstrap框架中實現(xiàn)這樣的表單效果是輕而易舉的，你只需要在元素中添加類名“form-inline”即可。
內(nèi)聯(lián)表單實現(xià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è)置label標(biāo)簽，屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優(yōu)點之處，為殘障人員進(jìn)行了一定的考慮。

表單控件(輸入框input)

單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過inputtype=“?”的形式來定義樣式的。
為了讓控件在各種表單風(fēng)格中樣式不出錯，需要添加類名“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框架會為這些元素提供統(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元素中添加了類名“form-control”類名，則無需設(shè)置cols屬性。因為Bootstrap框架中的“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有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標(biāo)簽配合使用會出現(xiàn)一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發(fā)人員無需考慮太多，只需要按照下面的方法使用即可。

<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包起來了
2、checkbox連同label標(biāo)簽放置在一個名為“.checkbox”的容器內(nèi)
3、radio連同label標(biāo)簽放置在一個名為“.radio”的容器內(nèi)

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

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

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

表單控件(按鈕)

input[type=“submit”

input[type=“button”

input[type=“reset”

<button>

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

表單控件大小

前面看到的表單控件都正常的大小?？梢酝ㄟ^設(shè)置控件的height，line-height，padding和font-size等屬性來實現(xiàn)控件的高度設(shè)置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大
這兩個類適用于表單中的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”僅對控件高度做了處理。但往往很多時候，我們需要控件寬度也要做一定的變化處理。這個時候就要借住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>

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

<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)(焦點狀態(tài))

表單主要用來與用戶溝通，好的表單就能更好的與用戶進(jìn)行溝通，而好的表單一定離不開表單的控件狀態(tài)。
表單狀態(tài)的作用：
每一種狀態(tài)都能給用戶傳遞不同的信息，比如表單有焦點的狀態(tài)可以告訴用戶可以輸入或選擇東西，禁用狀態(tài)可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態(tài)，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態(tài)。
焦點狀態(tài)是通過偽類“:focus”來實現(xiàn)。Bootstrap框架中表單控件的焦點狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。
要讓控件在焦點狀態(tà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="不是焦點狀態(tài)下效果">
 </div>
 <div class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦點點狀態(tài)下效果">
 </div>
 </div>
</form>

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

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

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

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

在使用了“form-control”的表單控件中，樣式設(shè)置了禁用表單背景色為灰色，而且手型變成了不準(zhǔn)輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準(zhǔn)輸入的手型出來。
在Bootstrap框架中，如果fieldset設(shè)置了disabled屬性，整個域都將處于被禁用狀態(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">無法選擇
 </label>
 </div>
 <button type="submit" class="btnbtn-primary">提交</button>
</fieldset>
</form>

據(jù)說對于整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。

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

在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時候只需要在form-group容器上對應(yīng)添加狀態(tà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">錯誤狀態(tài)</label>
 <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)">
</div>
</form>

從效果可以看出，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而以。
其他兩種狀態(tài)省略源碼不在此展示。
很多時候，在表單驗證的時候，不同的狀態(tài)會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應(yīng)的狀態(tài)下顯示 icon 出來，只需要在對應(yīng)的狀態(tài)下添加類名“has-feedback”。請注意，此類名要與“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來制作（后面的內(nèi)容中將會著重用一節(jié)內(nèi)容來介紹）。而且必須在表單中添加了一個 span 元素：

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

表單提示信息

平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個”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版本中還提供了一個行內(nèi)提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：

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

如果你不想為bootstrap.css增加自己的代碼，而且設(shè)計又有這種樣的需求，那么只能借助于Bootstrap的網(wǎng)格系統(tǒng)。(網(wǎng)格系統(tǒng)在后面的章節(jié)中會詳細(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é)束語：有關(guān)于Bootstrap框架中表單的運用除了按鈕部分，到此就算是介紹完了。如果你覺得這樣的表單效果并不是你需要的，你完全可以通過forms.less或者_(dá)forms.scss文件進(jìn)行定制，然后重新編譯就可以得到你需要的表單效果。在接下來的一節(jié)中，我們Bootstrap框架中另一個核心內(nèi)容——按鈕。

按鈕

按鈕也是Bootstrap框架核心內(nèi)容之一。因為按鈕是Web制作中不可缺少的東西。而且不同的Web頁面具有不同的按鈕風(fēng)格，甚至說同一個Web網(wǎng)站或應(yīng)用程序具有多種按鈕風(fēng)格，比如說不同的按鈕顏色、大小和狀態(tài)等。那么Bootstrap框架也考慮了這些因素，接下來的內(nè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">危險按鈕.btn-danger</button> 
 <button class="btn btn-link" type="button">鏈接按鈕.btn-link</button> 

基本按鈕

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

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

默認(rèn)按鈕

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

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

多標(biāo)簽支持

一般制作按鈕除了使用<button>標(biāo)簽元素之外，還可以使用<input type="submit">和<a>標(biāo)簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標(biāo)簽元素之外，還可以使用在其他的標(biāo)簽元素上，唯一需要注意的是，要在制作按鈕的標(biāo)簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。
我們一起來看看其他標(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)簽元素都可以實現(xiàn)按鈕風(fēng)格，但個人并不建議這樣使用，為了避免瀏覽器兼容性問題，個人強烈建議使用button或a標(biāo)簽來制作按鈕。

定制風(fēng)格

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

使用起來就很簡單，就像前面介紹的默認(rèn)按鈕一樣的使用方法，只需要在基礎(chǔ)按鈕“.btn”基礎(chǔ)上追加對應(yīng)的類名，就可以得到需要的按鈕風(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">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>

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

按鈕大小

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

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

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

<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)——活動狀態(tài)

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

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

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

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

圖像

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

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

<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)]有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應(yīng)了）
注意：
對于圓角圖片和圓形圖片效果，因為是使用了CSS3的圓角樣式來實現(xiàn)的，所以注意對于IE8以及其以下版本不支持，是沒有圓角效果的。

圖標(biāo)

200個icon：

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

放心使用：

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

原理分析：

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

在網(wǎng)頁中使用圖標(biāo)也非常的簡單，在任何內(nèi)聯(lián)元素上應(yīng)用所對應(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-”前綴的類名開始，然后后綴表示圖標(biāo)的名稱。具體說明如下：

所有名稱查看：

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

特別說明：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。