源碼解讀Bootstrap表單
基礎表單
對于基礎表單，Bootstrap并未對其做太多的定制性效果設計，僅僅對表單內(nèi)的fieldset、legend、label標簽進行了定制。主要將這些元素的margin、padding和border等進行了細化設置。
這些元素如果使用了類名“form-control”，將會實現(xiàn)一些設計上的定制效果。
1. 寬度變成了100%
2. 設置了一個淺灰色（#ccc）的邊框
3. 具有4px的圓角
4. 設置陰影效果，并且元素得到焦點之時，陰影和邊框效果會有所變化
5. 設置了placeholder的顏色為#999
水平表單
在Bootstrap框架中要實現(xiàn)水平表單效果，必須滿足以下兩個條件：
1. 在<form>元素是使用類名“form-horizontal”。
2. 配合Bootstrap框架的網(wǎng)格系統(tǒng)。
在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
1. 設置表單控件padding和margin值。
2. 改變“form-group”的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的“row”
如果要將表單的控件都在一行內(nèi)顯示，在<form>元素中添加類名“form-inline”即可。
表單控件
單行輸入框
input的type屬性值為text
下拉選擇框
單行的下拉選擇框直接用select標簽，
多行的滾動選擇框要加上multiple屬性，如：<select multiple class="form-control">
文本域
文本域textarea和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。因為Bootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。
復選框和單選框
Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們做了一些特殊化處理，checkbox和radio與label標簽配合使用會出現(xiàn)一些小問題（如對齊問題）得以解決。例如：
<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>
我們可以發(fā)現(xiàn)，
1. 不管是checkbox還是radio都使用label包起來
2. checkbox連同label標簽放置在一個名為“.checkbox”的容器內(nèi)
3. radio連同label標簽放置在一個名為“.radio”的容器內(nèi)
在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復選框、單選按鈕與標簽的對齊方式。
源碼：
.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;}復選框和單選按鈕水平排列
如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline”;
如果radio需要水平排列，只需要在label標簽上添加類名“radio-inline”。
例如：
<form role="form"> <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>
實現(xiàn)源碼：
.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;}表單控件大小
可以通過設置控件的height，line-height，padding和font-size等屬性來實現(xiàn)控件的高度設置。不過Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1. input-sm:讓控件比正常大小更小
2. input-lg:讓控件比正常大小更大
這兩個類適用于表單中的input，textarea和select控件。
實現(xiàn)源碼如下：
.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;}表單控件狀態(tài)
焦點狀態(tài)
焦點狀態(tài)的實現(xiàn)源碼如下：
.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);}可以看出，要讓控件在焦點狀態(tài)下有上面樣式效果，給控件添加類名“form-control”即可。
另外，file、radio和checkbox控件在焦點狀態(tài)下的效果也與普通的input控件不太一樣，實現(xiàn)源碼如下：
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;}禁用狀態(tài)
Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實現(xiàn)方法是一樣的，在相應的表單控件上添加屬性“disabled”。
實現(xiàn)源碼如下：
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {cursor: not-allowed;background-color: #eee;opacity: 1;}如果fieldset設置了disabled屬性，整個域都將處于被禁用狀態(tài)。不過如果legend中有輸入框的話，這個輸入框是無法被禁用的。
驗證狀態(tài)
在Bootstrap框架中提供這幾種驗證效果。
1. .has-warning:警告狀態(tài)（黃色）
2. .has-error：錯誤狀態(tài)（紅色）
3. .has-success：成功狀態(tài)（綠色）
使用的時候只需要在form-group容器上對應添加狀態(tài)類名。
例如：
<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>
如果讓表單在對應的狀態(tài)下顯示 對應的icon 出來，比如成功是一個對號√，錯誤是一個叉號×，那就要在對應的狀態(tài)下添加類名“has-feedback”，此類名要與“has-error”、“has-warning”和“has-success”在一起，并且表單中要添加一個span元素。例如：
<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="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning1">警告狀態(tài)</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">錯誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div></form>
表單提示信息
使用一個”help-block”樣式，將提示信息以塊狀顯示，并且顯示在控件底部。例如：
<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="glyphicon glyphicon-ok form-control-feedback"></span></div>
實現(xiàn)源碼如下：
.help-block {display: block;margin-top: 5px;margin-bottom: 10px;color: #737373;}這個信息是顯示在下面一行，如果想要顯示在同一行內(nèi)，可以使用類名“help-inline”，不過這個只有Bootstrap V2.x版本中有，Bootstrap V3.x版本中沒有了，實現(xiàn)代碼如下：
.help-inline{ display:inline-block; padding-left:5px; color: #737373;}如果你不想為bootstrap.css增加自己的代碼，但是又有這樣的需求，那么只能借助于Bootstrap的網(wǎng)格系統(tǒng)。例如：
<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>
按鈕
基本按鈕
使用類名“btn”，例如：<button class="btn" type="button">基本按鈕</button>
實現(xiàn)源碼：
.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;}默認按鈕
使用“.btn-default”。例如：<button class="btn btn-default" type="button">默認按鈕</button>
實現(xiàn)源碼：
.btn-default {color: #333;background-color: #fff;border-color: #ccc;}多標簽支持
除了使用<button>標簽元素來制作按鈕，還可以在別的標簽上添加類名“btn”來制作按鈕。例如：
<button class="btn btn-default" type="button">button標簽按鈕</button><input type="submit" class="btn btn-default" value="input標簽按鈕"/><span class="btn btn-default">span標簽按鈕</span><div class="btn btn-default">div標簽按鈕</div><label class="btn btn-default">label標簽按鈕</label><a href="##" class="btn btn-default">a標簽按鈕</a>
不過為了避免瀏覽器兼容性問題，建議還是使用button或a標簽來制作按鈕。
定制風格
有如下幾種風格的按鈕可用：
.btn-primary 主要按鈕
.btn-success 成功按鈕
.btn-success 信息按鈕
.btn-warning 警告按鈕
.btn-danger 危險按鈕
.btn-link 鏈接按鈕
按鈕大小
.btn-lg 大型按鈕
.btn-sm 小型按鈕
.btn-xs 超小型按鈕
塊狀按鈕
使用類名“btn-block”可以讓按鈕充滿整個容器，并且這個按鈕不會有任何的padding和margin值。
實現(xiàn)源碼：
.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%;}圖像
<img>標簽上添加對應的類名可以實現(xiàn)不同的風格：
.img-responsive：響應式圖片，主要針對于響應式設計
.img-rounded：圓角圖片
.img-circle：圓形圖片
.img-thumbnail：縮略圖片
實現(xiàn)源碼：
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%;}圖標
Bootstrap框架中的圖標都是字體圖標，其實現(xiàn)原理就是通過@font-face屬性加載了字體。在Bootstrap框架中有一個fonts的目錄，這個目錄中提供的字體文件就是用于制作icon的字體文件。
用法如下：<span class="glyphicon glyphicon-search"></span>
所有icon都是以”glyphicon-”前綴的類名開始，然后后綴表示圖標的名稱。
所有名稱可以到這里查看：http://getbootstrap.com/components/#glyphicons
除了使用glyphicon.com提供的圖標之外，還可以使用第三方為Bootstrap框架設計的圖標字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的一樣，不過要記得將字體下載到本地。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
