Bootstrap學習筆記（三）表單

2024-04-27 15:06:50
字體：大中小
來源：轉載
供稿：網友
基礎表單

表單主要功能是用來與用戶做交流的一個網頁控件，良好的表單設計能夠讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復選按鈕、文本域和按鈕等。其中每個控件所起的作用都各不相同，而且不同的瀏覽器對表單控件渲染的風格都各有不同。
同樣，表單也是Bootstrap框架中的核心內容，下面向大家介紹Bootstrap框架中表單的制作。
表單源碼查詢
Bootstrap框架的表單，其源碼占據了大量的代碼，同樣的，根據不同的Bootstrap版本，你可以輕松獲取相應的源碼：
? LESS版本：對應源文件 forms.less
? ? Sass版本：對應源文件 _forms.sCSS
編譯后的Bootstrap版本，可以查閱bootstrap.css文件第1630行~第1991行
不過在樣式表中，還對表單做了一些初始化，詳細代碼可以查閱bootstrap.css文件第110行~第178行。
對于基礎表單，Bootstrap并未對其做太多的定制性效果設計，僅僅對表單內的fieldset、legend、label標簽進行了定制。如：
/*源碼請查閱bootstrap.css文件第1631行~第1652行*/
fieldset {min-width: 0;padding: 0;margin: 0;border: 0;}legend {display: block;width: 100%;padding: 0;margin-bottom: 20px;font-size: 21px;line-height: inherit;color: #333;border: 0;border-bottom: 1px solid #e5e5e5;}label {display: inline-block;margin-bottom: 5px;font-weight: bold;}主要將這些元素的margin、padding和border等進行了細化設置。
當然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定制了一個類名`form-control`，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定制效果。
1、寬度變成了100%
2、設置了一個淺灰色（#ccc）的邊框
3、具有4px的圓角
4、設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化
5、設置了placeholder的顏色為#999
詳細請查閱bootstrap.css文件第1690行~第1732行。
運行效果如下或查看右側結果窗口：
表單代碼：
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">	<title>基礎表單</title>	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><form role="form">  <div class="form-group">    <label for="exampleInputEmail1">郵箱：</label>    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的郵箱地址">  </div>  <div class="form-group">    <label for="exampleInputPassWord1">密碼</label>    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的郵箱密碼">  </div>  <div class="checkbox">    <label>      <input type="checkbox"> 記住密碼    </label>  </div>  <button type="submit" class="btn btn-default">進入郵箱</button></form>	</body></html>
水平表單
Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標簽居左，表單控件居右）見下圖。
在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：1、在<form>元素使用類名“form-horizontal”。2、配合Bootstrap框架的網格系統。（網格布局會在以后的章節中詳細講解）
在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：1、設置表單控件padding和margin值。2、改變“form-group”的表現形式，類似于網格系統的“row”。
/*源碼請查閱bootstrap.css文件第1963行~第1991行*/
.form-horizontal .control-label,.form-horizontal .radio,.form-horizontal .checkbox,.form-horizontal .radio-inline,.form-horizontal .checkbox-inline {padding-top: 7px;margin-top: 0;margin-bottom: 0;}.form-horizontal .radio,.form-horizontal .checkbox {min-height: 27px;}.form-horizontal .form-group {margin-right: -15px;margin-left: -15px;}.form-horizontal .form-control-static {padding-top: 7px;}@media (min-width: 768px) {.form-horizontal .control-label {text-align: right;  }}.form-horizontal .has-feedback .form-control-feedback {top: 0;right: 15px;}來看一個簡單的示例：
<form class="form-horizontal" role="form"><div class="form-group">  <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>  <div class="col-sm-10">  <input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">  </div>  </div>  <div class="form-group">  <label for="inputPassword3" class="col-sm-2 control-label">密碼</label>  <div class="col-sm-10">  <input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">  </div>  </div>  <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">  <div class="checkbox">  <label>  <input type="checkbox">記住密碼  </label>  </div>  </div>  </div>  <div class="form-group">  <div class="col-sm-offset-2 col-sm-10">  <button type="submit" class="btnbtn-default">進入郵箱</button>  </div></div></form>運行效果如下或查看右側結果窗口：(注意：要想看到此效果，需要把鼠標移到結果窗口，單擊出現的“全屏”按鈕)
內聯表單
有時候我們需要將表單的控件都在一行內顯示，類似這樣的：
在Bootstrap框架中實現這樣的表單效果是輕而易舉的，只需要在<form>元素中添加類名“form-inline”即可。內聯表單實現原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設置成內聯塊元素（display:inline-block）。/*源碼請查閱bootstrap.css文件第1928行~第1962行*/
如果你要在input前面添加一個label標簽時，會導致input換行顯示。如果你必須添加這樣的一個label標簽，并且不想讓input換行，你需要將label標簽也放在容器“form-group”中，如：
<div class="form-group">    <label class="sr-only" for="exampleInputEmail2">Email address</label></div><div class="form-group">    <inputtype="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"></div>接下來，我們還是以實例說話：
<form class="form-inline" role="form"><div class="form-group">  <label class="sr-only" for="exampleInputEmail2">郵箱</label>  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="請輸入你的郵箱地址"></div><div class="form-group">  <label class="sr-only" for="exampleInputPassword2">密碼</label>  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="請輸入你的郵箱密碼"></div><div class="checkbox"><label>   <input type="checkbox">記住密碼</label></div><button type="submit" class="btnbtn-default">進入郵箱</button></form>運行效果如下或查看右側結果窗口：(查看效果需要把結果窗口設置為全屏)
回過頭來看示例，你或許會問，為什么添加了label標簽，而且沒有放置在”form-group”這樣的容器中，input也不會換行；還有label標簽怎么沒顯示出來。如果你仔細看，在label標簽運用了一個類名“sr-only”，標簽沒顯示就是這個樣式將標簽隱藏了。/*源碼請查閱bootstrap.css文件第342行~第350行*/
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}注意：那么Bootstrap為什么要這么做呢？這樣不是多此一舉嗎？其實不是的，如果沒有為輸入控件設置label標簽，屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優點之處，為殘障人員進行了一定的考慮。
表單控件(輸入框input)
每一個表單都是由表單控件組成。離開了控件，表單就失去了意義。接下來的我們簡單的來了解Bootstrap框架中表單控件的相關知識。
單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過input[type=“?”](其中?號代表type類型，比如說text類型，對應的是input[type=“text”])的形式來定義樣式的。
為了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”，如：
<form role="form"><div class="form-group"><input type="email" class="form-control" placeholder="Enter email"></div></form>運行效果如下或查看右側結果窗口:
表單控件(下拉選擇框select)
Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值為multiple。Bootstrap框架會為這些元素提供統一的樣式風格。如：
<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)
文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。
<form role="form">  <div class="form-group">    <textarea class="form-control" rows="3"></textarea>  </div></form>運行效果如下或查看右側結果窗口：
表單控件(復選框checkbox和單選擇按鈕radio)
Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，主要是checkbox和radio與label標簽配合使用會出現一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發人員無需考慮太多，只需要按照下面的方法使用即可。
<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）：
從上面的示例，我們可以得知：1、不管是checkbox還是radio都使用label包起來了2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內3、radio連同label標簽放置在一個名為“.radio”的容器內在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復選框、單選按鈕與標簽的對齊方式。源碼請查看bootstrap.css文件第1742行～第1762行：
.radio,.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}.radio label,.checkbox label {display: inline;font-weight: normal;cursor: pointer;}.radio input[type="radio"],.radio-inline input[type="radio"],.checkbox input[type="checkbox"],.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}.radio + .radio,.checkbox + .checkbox {margin-top: -5px;}表單控件(復選框和單選按鈕水平排列)
有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮：1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”2、如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”如下所示：
<form role="form">  <div class="form-group">    <label class="checkbox-inline">      <input type="checkbox"  value="option1">游戲    </label>    <label class="checkbox-inline">      <input type="checkbox"  value="option2">攝影    </label>    <label class="checkbox-inline">    <input type="checkbox"  value="option3">旅游    </label>  </div>  <div class="form-group">    <label class="radio-inline">      <input type="radio"  value="option1" name="sex">男性    </label>    <label class="radio-inline">      <input type="radio"  value="option2" name="sex">女性    </label>    <label class="radio-inline">      <input type="radio"  value="option3" name="sex">中性    </label>  </div></form>運行效果如下或查看右側結果窗口：
實現源碼請查看bootstrap.css文件第1767行～第1780行：
.radio-inline,.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}.radio-inline + .radio-inline,.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}表單控件(按鈕)
按鈕也是表單重要控件之一,制作按鈕通常使用下面代碼來實現：
  ?  input[type=“submit”]
  ?  input[type=“button”]
  ?  input[type=“reset”]
  ?  <button>
在Bootstrap框架中的按鈕都是采用<button>來實現。
有關于Bootstrap中按鈕如何制作，在這里不做過多闡述，因為按鈕也是Bootstrap框架中核心部分之一，后面我們專門有一節內容來介紹Bootstrap的按鈕。
這里先讓大家看看Bootstrap的按鈕長成什么樣：
表單控件大小
前面看到的表單控件都正常的大小?？梢酝ㄟ^設置控件的height，line-height，padding和font-size等屬性來實現控件的高度設置。不過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，控件變小">運行效果如下或查看右側結果窗口：
源碼請查閱bootstrap.css文件第1795~第1824行：
.input-sm {height: 30px;padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}select.input-sm {height: 30px;line-height: 30px;}textarea.input-sm,select[multiple].input-sm {height: auto;}.input-lg {height: 46px;padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}select.input-lg {height: 46px;line-height: 46px;}textarea.input-lg,select[multiple].input-lg {height: auto;}從上面的源碼中不難發現，不管是“input-sm”還是“input-lg”僅對控件高度做了處理。但往往很多時候，我們需要控件寬度也要做一定的變化處理。這個時候就要借住Bootstrap框架的網格系統。所以你要控制表單寬度，可以像下面這樣使用：
<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”就相當于網格系統中的“row”。換句話說，如果沒有這樣做，要通過網格系統來控制表單控件寬度，就需要這樣使用：
<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>表單控件狀態(焦點狀態)
表單主要用來與用戶溝通，好的表單就能更好的與用戶進行溝通，而好的表單一定離不開表單的控件狀態。
表單狀態的作用：
每一種狀態都能給用戶傳遞不同的信息，比如表單有焦點的狀態可以告訴用戶可以輸入或選擇東西，禁用狀態可以告訴用戶不可以輸入或選擇東西，還有就是表單控件驗證狀態，可以告訴用戶的操作是否正確等。那么在Bootstrap框架中的表單控件也具備這些狀態。
焦點狀態是通過偽類“:focus”來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，重新添加陰影效果。
源碼請查閱bootstrap.css文件第1707行～第1712行：
.form-control:focus {border-color: #66afe9;outline: 0;  -webkit-box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);box-shadow: inset 0 1px 1pxrgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);} 從源碼中我們可以看出，要讓控件在焦點狀態下有上面樣式效果，需要給控件添加類名“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="不是焦點狀態下效果">    </div>    <div class="col-xs-6">      <input class="form-control input-lg" type="text" placeholder="焦點點狀態下效果">    </div>  </div></form>運行效果如下或查看右側結果窗口：
（鼠標單擊輸入框，使其獲得焦點就可以看到加入藍色邊框效果）
在Bootstrap框架中，file、radio和checkbox控件在焦點狀態下的效果也與普通的input控件不太一樣，主要是因為Bootstrap對他們做了一些特殊處理：/*源碼查看boostrap.css文件第1676行～第1682行*/
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}表單控件狀態(禁用狀態)
Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。和其他表單的禁用狀態不同的是，Bootstrap框架做了一些樣式風格的處理：/*源碼請查看bootstrap.css文件第1723行～第1729行*/
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}使用方法為：只需要在需要禁用的表單控件上加上“disabled”即可：
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>運行效果如下或查看右側結果窗口：
在使用了“form-control”的表單控件中，樣式設置了禁用表單背景色為灰色，而且手型變成了不準輸入的形狀。如果控件中不使用類名“form-control”，禁用的控件只會有一個不準輸入的手型出來。/*源碼請查閱bootstrap.css文件第1781行～第1794行*/
input[type="radio"][disabled],input[type="checkbox"][disabled],.radio[disabled],.radio-inline[disabled],.checkbox[disabled],.checkbox-inline[disabled],fieldset[disabled] input[type="radio"],fieldset[disabled] input[type="checkbox"],fieldset[disabled] .radio,fieldset[disabled] .radio-inline,fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline {cursor: not-allowed;}在Bootstrap框架中，如果fieldset設置了disabled屬性，整個域都將處于被禁用狀態。
<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>運行效果如下或查看右側結果窗口：
據說對于整個禁用的域中，如果legend中有輸入框的話，這個輸入框是無法被禁用的。我們一起來驗證一下：
<form role="form"><fieldset disabled><legend><input type="text" class="form-control" placeholder="顯然我顏色變灰了，但是我沒被禁用，不信？單擊試一下" /></legend>    …</fieldset></form>運行效果如下或查看右側結果窗口：
表單控件狀態(驗證狀態)
在制作表單時，不免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。1、.has-warning:警告狀態（黃色）2、.has-error：錯誤狀態（紅色）3、.has-success：成功狀態（綠色）使用的時候只需要在form-group容器上對應添加狀態類名。
<form role="form"><div class="form-group has-success">  <label class="control-label" for="inputSuccess1">成功狀態</label>  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" ></div><div class="form-group has-warning">  <label class="control-label" for="inputWarning1">警告狀態</label>  <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"></div><div class="form-group has-error">  <label class="control-label" for="inputError1">錯誤狀態</label>  <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"></div></form>運行效果如下或查看右側結果窗口：
從效果可以看出，三種狀態下效果都是一樣的，只是顏色不一樣而以。
其他兩種狀態省略源碼不在此展示。很多時候，在表單驗證的時候，不同的狀態會提供不同的 icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“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">成功狀態</label>  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >  <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>運行效果如下或查看右側結果窗口：
從效果圖中可以看出，圖標都居右。在 Bootstrap 的小圖標都是使用@font-face來制作（后面的內容中將會著重用一節內容來介紹）。而且必須在表單中添加了一個 span 元素：
<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>一個email地址輸入框輸入錯誤后的效果代碼：<div class="form-group has-error has-feedback">    <label class="control-label" for="inputError1">email地址</label>    <input type="text" class="form-control" id="inputError1">    <span class="glyphicon glyphicon-remove form-control-feedback"></span>    </div>表單提示信息
平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。
<form role="form"><div class="form-group has-success has-feedback">  <label class="control-label" for="inputSuccess1">成功狀態</label>  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >  <span class="help-block">你輸入的信息是正確的</span>  <span class="glyphiconglyphicon-ok form-control-feedback"></span></div>  …</form>運行效果如下或查看右側結果窗口：
具體樣式代碼請查看bootstrap.css文件第1922行～第1927行：
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：
.help-inline{  display:inline-block;  padding-left:5px;  color: #737373;}如果你不想為bootstrap.css增加自己的代碼，而且設計又有這種樣的需求，那么只能借助于Bootstrap的網格系統。(網格系統在后面的章節中會詳細講解)
<form role="form"><div class="form-group"><label class="control-label" for="inputSuccess1">成功狀態</label><div class="row"><div class="col-xs-6"><input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" ></div><span class="col-xs-6 help-block">你輸入的信息是正確的</span></div></div></form>運行效果如下或查看右側結果窗口：
結束語：有關于Bootstrap框架中表單的運用除了按鈕部分，到此就算是介紹完了。如果你覺得這樣的表單效果并不是你需要的，你完全可以通過forms.less或者_forms.scss文件進行定制，然后重新編譯就可以得到你需要的表單效果。
按鈕
按鈕也是Bootstrap框架核心內容之一。因為按鈕是Web制作中不可缺少的東西。而且不同的Web頁面具有不同的按鈕風格，甚至說同一個Web網站或應用程序具有多種按鈕風格，比如說不同的按鈕顏色、大小和狀態等。那么Bootstrap框架也考慮了這些因素，接下來的內容我們一起來探討Bootstrap框架中的另一核心部分內容——按鈕。
Bootstrap框架的按鈕也是一個獨立部分，我們同樣在不同的版本之中能找到對應的代碼：
LESS版本：查看源文件buttons.lessSass版本：查看源文件_buttons.scss已編譯版本：查看源文件bootstrap.css文件第1992行～第2353行按鈕大全
   <button class="btn" type="button">基礎按鈕.btn</button>     <button class="btn btn-default" type="button">默認按鈕.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”來實現。不同的是在V3.x版本要簡約很多，去除了V2.x版本中的大量的CSS3中的部分特效，比如說文本陰影（text-shadow）、漸變背景（background-image）、邊框陰影（box-shadow）等。難能可貴的是，Bootstrap框架中的考慮了不同瀏覽器的解析差異，進行了比較安全的兼容性處理，使按鈕效果在不同的瀏覽器中所呈現的效果基本相同。
源碼請查閱bootstrap.css文件第1992行～第2010行：
.btn {display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;  -webkit-user-select: none;     -moz-user-select: none;      -ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}Bootstrap框架的按鈕使用非常的簡單，使用方式如下：
<button class="btn" type="button">我是一個基本按鈕</button>運行效果如下或查看右側結果窗口：
默認按鈕
Bootstrap框架首先通過基礎類名“.btn”定義了一個基礎的按鈕風格，然后通過“.btn-default”定義了一個默認的按鈕風格。默認按鈕的風格就是在基礎按鈕的風格的基礎上修改了按鈕的背景顏色、邊框顏色和文本顏色。/*源碼請查閱bootstrap.css文件第2040行～第2044行*/
.btn-default {color: #333;background-color: #fff;border-color: #ccc;}使用默認按鈕風格也非常的簡單，只需要在基礎按鈕“btn”的基礎上增加類名“btn-default”即可：
<button class="btn btn-default" type="button">默認按鈕</button>運行效果如下或查看右側結果窗口：
多標簽支持
一般制作按鈕除了使用<button>標簽元素之外，還可以使用<input type="submit">和<a>標簽等。同樣，在Bootstrap框架中制作按鈕時，除了剛才所說的這些標簽元素之外，還可以使用在其他的標簽元素上，唯一需要注意的是，要在制作按鈕的標簽元素上添加類名“btn”。如果不添加是不會有任何按鈕效果。
我們一起來看看其他標簽制作的基本按鈕效果：
<button class="btn btn-default" type="button">button標簽按鈕</button><input type="submit" class="btn btn-default" value="input標簽按鈕"/><a href="##" class="btn btn-default">a標簽按鈕</a><span class="btn btn-default">span標簽按鈕</span><div class="btn btn-default">div標簽按鈕</div>運行效果如下或查看右側結果窗口：
注意：雖然在Bootstrap框架中使用任何標簽元素都可以實現按鈕風格，但個人并不建議這樣使用，為了避免瀏覽器兼容性問題，個人強烈建議使用button或a標簽來制作按鈕。
定制風格
在介紹按鈕開篇就說過，Web頁面可能會有不同的按鈕風格。那么在Bootstrap框架也考慮了。在Bootstrap框架中除了默認的按鈕風格之外，還有其他六種按鈕風格，每種風格的其實都一樣，不同之處就是按鈕的背景顏色、邊框顏色和文本顏色。
在Bootstrap框架中不同的按鈕風格都是通過不同的類名來實現，在使用過程中，開發者只需要選擇不同的類名即可：
使用起來就很簡單，就像前面介紹的默認按鈕一樣的使用方法，只需要在基礎按鈕“.btn”基礎上追加對應的類名，就可以得到需要的按鈕風格。如：
<button class="btn" type="button">基礎按鈕.btn</button><button class="btn btn-default" type="button">默認按鈕.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.css文件第2081行～第2318行。
按鈕大小
上一節介紹了按鈕的定制風格，也就是如何實現Web頁面中多種風格按鈕。在Bootstrap框架中，對于按鈕的大小，也是可以定制的。類似于input一樣，通過在基礎按鈕“.btn”的基礎上追加類名來控制按鈕的大小。
在Bootstrap框架中提供了三個類名來控制按鈕大?。?/p>
從上表中不難發現，在Bootstrap框架中控制按鈕的大小都是通過修改按鈕的padding、line-height、font-size和border-radius幾個屬性。/*源碼查閱bootstrap.css文件中第2319行～第2339行*/
.btn-lg,.btn-group-lg> .btn {padding: 10px 16px;font-size: 18px;line-height: 1.33;border-radius: 6px;}.btn-sm,.btn-group-sm> .btn {padding: 5px 10px;font-size: 12px;line-height: 1.5;border-radius: 3px;}.btn-xs,.btn-group-xs> .btn {padding: 1px 5px;font-size: 12px;line-height: 1.5;border-radius: 3px;}那么在實際使用中，這幾個類名可以配合按鈕中其他顏色類名一起使用，但唯一一點不能缺少“.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>效果如下圖或查看右側結果窗口：
塊狀按鈕
從前面幾節的內容中，大家可能發現了，每個示例中的按鈕寬度都是依靠按鈕文本和padding的值來決定。但有時候在制作按鈕的時候需要按鈕寬度充滿整個父容器（width:100%），特別是在移動端的制作中。那么前面的方法我們都無法很好的實現，除非重新定義按鈕的寬度。其實在Bootstrap中并不需要這樣做，Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，并且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱為塊狀按鈕。具體源碼請查閱bootstrap.css文件第2340行～第2353行：
.btn-block {display: block;width: 100%;padding-right: 0;padding-left: 0;}.btn-block + .btn-block {margin-top: 5px;}input[type="submit"].btn-block,input[type="reset"].btn-block,input[type="button"].btn-block {width: 100%;}使用方法和前面的類似，只需要在原按鈕類名上添加“.btn-block”類名，當然“.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>運行效果如下：
按鈕狀態——活動狀態
Bootstrap框架針對按鈕的狀態做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態效果主要分為兩種：活動狀態和禁用狀態。
Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。/*源碼請查看bootstrap.css文件第2011行～第2029行*/
.btn:focus,.btn:active:focus,.btn.active:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}.btn:hover,.btn:focus {color: #333;text-decoration: none;}.btn:active,.btn.active {background-image: none;outline: 0;  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);}而且不同風格下的按鈕都具有這幾種狀態效果，只是顏色做了一定的調整，我們以默認風格（btn-default）為例：/*源碼請查看bootstrap.css文件第2045行～第2058行*/
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default {color: #333;background-color: #ebebeb;border-color: #adadad;}.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default {background-image: none;}當按鈕處理正在點擊狀態（也就是鼠標按下的未松開的狀態），對于<button>元素是通過“:active”偽類實現，而對于<a>這樣的標簽元素則是通過添加類名“.active”來實現。
 
按鈕狀態——禁用狀態
和input等表單控件一樣，在Bootstrap框架的按鈕中也具有禁用狀態的設置。禁用狀態與其他狀態按鈕相比，就是背景顏色的透明度做了一定的處理，opcity的值從100%調整為65%。
在Bootstrap框架中，要禁用按鈕有兩種實現方式：
方法1：在標簽中添加disabled屬性
方法2：在元素標簽中添加類名“disabled”
兩者的主要區別是：
“.disabled”樣式不會禁止按鈕的默認行為，比如說提交和重置行為等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行為，則需要通過javaScript這樣的語言來處理。對于<a>標簽也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行為是無法禁止。而在元素標簽中添加“disabled”屬性的方法是可以禁止元素的默認行為的。
下面是兩種方法的舉例：
<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>運行效果如下或查看右側結果窗口：
對應的樣式代碼請查閱bootstrap.css文件第2030行～第2039行：
.btn.disabled,.btn[disabled],fieldset[disabled] .btn {pointer-events: none;cursor: not-allowed;filter: alpha(opacity=65);  -webkit-box-shadow: none;box-shadow: none;opacity: .65;}同樣的，其他風格按鈕也具有這樣的效果，只是顏色做了一定的調整，比如信息按鈕(.btn-info)所示：/*源碼請查看bootstrap.css文件第2182行～第2199行*/
.btn-info.disabled,.btn-info[disabled],fieldset[disabled] .btn-info,.btn-info.disabled:hover,.btn-info[disabled]:hover,fieldset[disabled] .btn-info:hover,.btn-info.disabled:focus,.btn-info[disabled]:focus,fieldset[disabled] .btn-info:focus,.btn-info.disabled:active,.btn-info[disabled]:active,fieldset[disabled] .btn-info:active,.btn-info.disabled.active,.btn-info[disabled].active,fieldset[disabled] .btn-info.active {background-color: #5bc0de;border-color: #46b8da;}到此有關于按鈕的基礎知識就算是介紹完了，同樣的，大家可以通過buttons.less或者_buttons.scss來自定義按鈕風格。
為reset按鈕添加“.disabled”樣式的方法使reset按鈕處于禁止狀態
<form action="index.html" method="get">        <input type="text" name="name">名字        <button type="reset" class="btn btn-primary " disabled="disabled">重置</button>    </form>
圖像
圖像在網頁制作中也是常要用到的元素，在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格：
1、img-responsive：響應式圖片，主要針對于響應式設計2、img-rounded：圓角圖片3、img-circle：圓形圖片4、img-thumbnail：縮略圖片
使用方法：
使用方法非常簡單，只需要在<img>標簽上添加對應的類名，如下代碼：
<img  alt="140x140" src="http://placehold.it/140x140"><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">運行效果如下或查看右側結果窗口：
每種狀態對應的源碼可以查閱bootstrap.css文件第306行～第335行：
img {vertical-align: middle;}.img-responsive,.thumbnail>img,.thumbnail a >img,.carousel-inner > .item >img,.carousel-inner > .item > a >img {display: block;max-width: 100%;height: auto;}.img-rounded {border-radius: 6px;}.img-thumbnail {display: inline-block;max-width: 100%;height: auto;padding: 4px;line-height: 1.42857143;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;  -webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}.img-circle {border-radius: 50%;}設置圖片大小：
由于樣式沒有對圖片做大小上的樣式限制，所以在實際使用的時候，需要通過其他的方式來處理圖片大小。比如說控制圖片容器大小。（注意不可以通過css樣式直接修改img圖片的大小，這樣操作就不響應了）
注意：
對于圓角圖片和圓形圖片效果，因為是使用了CSS3的圓角樣式來實現的，所以注意對于IE8以及其以下版本不支持，是沒有圓角效果的。
Bootstrap框架為了大家更好的維護圖像的樣式，同樣將這部分樣式獨立出來：1、LESS版本，可以查閱scaffolding.less2、Sass版本，可以查閱_scaffolding.scss大家可以修改其中之一，重新編譯就可以得到自己需要的圖片樣式效果。
修改圖片大?。?在src后的數字處可以修改每個圖片的大小。
src="http://placehold.it/140x140"圖標（一）
200個icon：
這里說的圖標就是Web制作中?？吹降男con圖標，可以說這些小icon圖標是一個優秀Web中不可缺少的一部分，起到畫龍點睛的效果。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。
放心使用：
在具體介紹Bootstrap的icon圖標之前，我們首先要感謝glyphicons.com網站，因為Bootstrap框架中圖標都是glyphicons.com這個商業網站提供的，并且免費授權給Bootstrap框架使用，所以大家可以放心使用在自己的項目當中。
Bootstrap框架將內部樣式也提取出來：1、LESS版本：對應源文件為glyphicons.less文件2、Sass版本：對應源文件為_glyphicons.scss文件3、編譯后的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行
原理分析：
Bootstrap框架中的圖標都是字體圖標，其實現原理就是通過@font-face屬性加載了字體。/*源碼請查看bootstrap.css文件第2357行～第2380行*/
@font-face {font-family: 'Glyphicons Halflings';src: url('../fonts/glyphicons-halflings-regular.eot');src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}大家或許會問，這些字體我去哪里獲取。如果你是從前面一直閱讀過來，我們在介紹文件結構那一節就已介紹過。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用于制作icon的字體文件。自定義完字體之后，需要對icon設置一個默認樣式，在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現，然后通過偽元素“:before”的“content”屬性調取對應的icon編碼：/*源碼請查看bootstrap.css文件第2381行～第2992行*/
.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.glyphicon-asterisk:before {content: "/2a";}….圖標（二）
在網頁中使用圖標也非常的簡單，在任何內聯元素上應用所對應的樣式即可：
<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-”前綴的類名開始，然后后綴表示圖標的名稱。具體說明如下：
所有名稱查看：
請點擊：http://getbootstrap.com/components/#glyphicons 鏈接查閱或根據bootstrap.css文件第2393行～第2992行查閱。
特別說明：
除了使用glyphicon.com提供的圖標之外，還可以使用第三方為Bootstrap框架設計的圖標字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的一樣，不過記得將字體下載到你本地。 感興趣的可以閱讀官網相關介紹。