Bootstrap源碼解讀表單（2）

更新時(shí)間：2016年12月22日 17:00:34 作者：藝術(shù)就是爆炸

這篇文章主要源碼解讀了Bootstrap表單，介紹了Bootstrap各式各樣的表單,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap表單

基礎(chǔ)表單

對(duì)于基礎(chǔ)表單，Bootstrap并未對(duì)其做太多的定制性效果設(shè)計(jì)，僅僅對(duì)表單內(nèi)的fieldset、legend、label標(biāo)簽進(jìn)行了定制。主要將這些元素的margin、padding和border等進(jìn)行了細(xì)化設(shè)置。
這些元素如果使用了類(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框架中要實(shí)現(xiàn)水平表單效果，必須滿(mǎn)足以下兩個(gè)條件：
1. 在<form>元素是使用類(lèi)名“form-horizontal”。
2. 配合Bootstrap框架的網(wǎng)格系統(tǒng)。

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

如果要將表單的控件都在一行內(nèi)顯示，在<form>元素中添加類(lèi)名“form-inline”即可。

表單控件

單行輸入框

input的type屬性值為text

下拉選擇框

單行的下拉選擇框直接用select標(biāo)簽，
多行的滾動(dòng)選擇框要加上multiple屬性，如：<select multiple class="form-control">

文本域

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

復(fù)選框和單選框

Bootstrap框架中checkbox和radio有點(diǎn)特殊，Bootstrap針對(duì)他們做了一些特殊化處理，checkbox和radio與label標(biāo)簽配合使用會(huì)出現(xiàn)一些小問(wèn)題（如對(duì)齊問(wè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包起來(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ì)齊方式。
源碼：

.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;
}

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

如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類(lèi)名“checkbox-inline”;
如果radio需要水平排列，只需要在label標(biāo)簽上添加類(lèi)名“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>

實(shí)現(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;
}

表單控件大小

可以通過(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控件。
實(shí)現(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)

焦點(diǎn)狀態(tài)

焦點(diǎn)狀態(tài)的實(shí)現(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);
}

可以看出，要讓控件在焦點(diǎn)狀態(tài)下有上面樣式效果，給控件添加類(lèi)名“form-control”即可。
另外，file、radio和checkbox控件在焦點(diǎn)狀態(tài)下的效果也與普通的input控件不太一樣，實(shí)現(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)實(shí)現(xiàn)方法是一樣的，在相應(yīng)的表單控件上添加屬性“disabled”。
實(shí)現(xiàn)源碼如下：

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}

如果fieldset設(shè)置了disabled屬性，整個(gè)域都將處于被禁用狀態(tài)。不過(guò)如果legend中有輸入框的話(huà)，這個(gè)輸入框是無(wú)法被禁用的。

驗(yàn)證狀態(tài)

在Bootstrap框架中提供這幾種驗(yàn)證效果。
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)名。
例如：

<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>

如果讓表單在對(duì)應(yīng)的狀態(tài)下顯示對(duì)應(yīng)的icon 出來(lái)，比如成功是一個(gè)對(duì)號(hào)√，錯(cuò)誤是一個(gè)叉號(hào)×，那就要在對(duì)應(yīng)的狀態(tài)下添加類(lèi)名“has-feedback”，此類(lèi)名要與“has-error”、“has-warning”和“has-success”在一起，并且表單中要添加一個(gè)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">錯(cuò)誤狀態(tài)</label>
    <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</form>

表單提示信息

使用一個(gè)”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>

實(shí)現(xiàn)源碼如下：

.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}

這個(gè)信息是顯示在下面一行，如果想要顯示在同一行內(nèi)，可以使用類(lèi)名“help-inline”，不過(guò)這個(gè)只有Bootstrap V2.x版本中有，Bootstrap V3.x版本中沒(méi)有了，實(shí)現(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>

按鈕

基本按鈕

使用類(lèi)名“btn”，例如：<button class="btn" type="button">基本按鈕</button>
實(shí)現(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;
}

默認(rèn)按鈕

使用“.btn-default”。例如：<button class="btn btn-default" type="button">默認(rèn)按鈕</button>
實(shí)現(xiàn)源碼：

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

多標(biāo)簽支持

除了使用<button>標(biāo)簽元素來(lái)制作按鈕，還可以在別的標(biāo)簽上添加類(lèi)名“btn”來(lái)制作按鈕。例如：

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

不過(guò)為了避免瀏覽器兼容性問(wèn)題，建議還是使用button或a標(biāo)簽來(lái)制作按鈕。

定制風(fēng)格

有如下幾種風(fēng)格的按鈕可用：
.btn-primary 主要按鈕
.btn-success 成功按鈕
.btn-success 信息按鈕
.btn-warning 警告按鈕
.btn-danger 危險(xiǎn)按鈕
.btn-link 鏈接按鈕

按鈕大小

.btn-lg 大型按鈕
.btn-sm 小型按鈕
.btn-xs 超小型按鈕

塊狀按鈕

使用類(lèi)名“btn-block”可以讓按鈕充滿(mǎn)整個(gè)容器，并且這個(gè)按鈕不會(huì)有任何的padding和margin值。
實(shí)現(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>標(biāo)簽上添加對(duì)應(yīng)的類(lèi)名可以實(shí)現(xiàn)不同的風(fēng)格：
.img-responsive：響應(yīng)式圖片，主要針對(duì)于響應(yīng)式設(shè)計(jì)
.img-rounded：圓角圖片
.img-circle：圓形圖片
.img-thumbnail：縮略圖片
實(shí)現(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%;
}

圖標(biāo)

Bootstrap框架中的圖標(biāo)都是字體圖標(biāo)，其實(shí)現(xiàn)原理就是通過(guò)@font-face屬性加載了字體。在Bootstrap框架中有一個(gè)fonts的目錄，這個(gè)目錄中提供的字體文件就是用于制作icon的字體文件。
用法如下：<span class="glyphicon glyphicon-search"></span>
所有icon都是以”glyphicon-”前綴的類(lèi)名開(kāi)始，然后后綴表示圖標(biāo)的名稱(chēng)。
所有名稱(chēng)可以到這里查看：http://getbootstrap.com/components/#glyphicons
除了使用glyphicon.com提供的圖標(biāo)之外，還可以使用第三方為Bootstrap框架設(shè)計(jì)的圖標(biāo)字體，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介紹的一樣，不過(guò)要記得將字體下載到本地。

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

您可能感興趣的文章: