快捷導(dǎo)航

Bootstrap表單控件學(xué)習(xí)使用

更新時(shí)間：2017年03月07日 14:56:43 作者：Dannii_

這篇文章教大家學(xué)習(xí)使用Bootstrap表單控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap表單控件的學(xué)習(xí)使用，供大家參考，具體內(nèi)容如下

輸入框（Input）

最常見(jiàn)的表單文本字段是輸入框 input。用戶可以在其中輸入大多數(shù)必要的表單數(shù)據(jù)。
Bootstrap 提供了對(duì)所有原生的 HTML5 的 input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

<form role="form">
 <div class="form-group">
  <label for="name">標(biāo)簽</label>
  <input type="text" class="form-control" id="name" placeholder="文本輸入">
 </div>
</form>

這里寫(xiě)圖片描述

文本框（Textarea）

當(dāng)您需要進(jìn)行多行輸入的時(shí)，則可以使用文本框 textarea。
必要時(shí)可以改變 rows 屬性（較少的行 = 較小的盒子，較多的行 = 較大的盒子）。（超過(guò)這個(gè)值就會(huì)產(chǎn)生滾動(dòng)條）

<form role="form">
 <div class="form-group">
  <label for="name">文本框</label>
  <textarea class="form-control" id="name" rows="3"></textarea>
 </div>
</form>

這里寫(xiě)圖片描述

復(fù)選框（Checkbox）和單選框（Radio）

（1）復(fù)選框和單選按鈕用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇。
（2）當(dāng)創(chuàng)建表單時(shí)，如果您想讓用戶從列表中選擇若干個(gè)選項(xiàng)時(shí)，請(qǐng)使用 checkbox。如果您限制用戶只能選擇一個(gè)選項(xiàng)，請(qǐng)使用 radio。
（3）對(duì)一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

<label for="name">默認(rèn)的復(fù)選框和單選按鈕的實(shí)例</label>
<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項(xiàng)1
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項(xiàng)2
 </label>
</div>

<div class="checkbox">
 <label>
  <input type="checkbox" value="">選項(xiàng)3
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>選項(xiàng)1
 </label>
</div>

<div class="radio">
 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>選項(xiàng)2- 選擇它將會(huì)取消選擇選項(xiàng) 1
 </label>
</div>

這里寫(xiě)圖片描述

<label for="name">內(nèi)聯(lián)的復(fù)選框和單選按鈕的實(shí)例</label>
<div>
 <label class="checkbox-inline">
  <input type="checkbox" value="">選項(xiàng)1
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">選項(xiàng)2
 </label>

 <label class="checkbox-inline">
  <input type="checkbox" value="">選項(xiàng)3
 </label>

 <label class="radio-inline">
  <input type="radio" name="optionsRadios" id="optionsRadio1" value="options1" checked>選項(xiàng)1
 </label class="radio-inline">

 <label>
  <input type="radio" name="optionsRadios" id="optionsRadio2" value="options2" checked>選項(xiàng)2
 </label>
</div>

這里寫(xiě)圖片描述

選擇框（Select）
（1）當(dāng)您想讓用戶從多個(gè)選項(xiàng)中進(jìn)行選擇，但是默認(rèn)情況下只能選擇一個(gè)選項(xiàng)時(shí)，則使用選擇框。
（2）使用 <select> 展示列表選項(xiàng)，通常是那些用戶很熟悉的選擇列表，比如州或者數(shù)字。
（3）使用 multiple=”multiple” 允許用戶選擇多個(gè)選項(xiàng)。

<form role="form">
 <div class="form-group>
  <label for="name">選擇列表</label>
  <select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>

  <label for="name">可多選的選擇列表</label>
  <select class="form-control" multiple>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
  </select>
 </div>
</form>

這里寫(xiě)圖片描述

靜態(tài)控件

需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，請(qǐng)?jiān)?lt;p>上使用 class .form-control-static。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
   <p class="form-control-static">email@example.com</p>
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">密碼</label>
  <div class="col-sm-10">
   <input type="password" class="form-control" id="inputPassword" placeholder="請(qǐng)輸入密碼">
  </div>
 </div>
</form>

這里寫(xiě)圖片描述

表單控件狀態(tài)

（1）除了 :focus 狀態(tài)（即，用戶點(diǎn)擊 input 或使用 tab 鍵聚焦到 input 上），Bootstrap 還為禁用的輸入框定義了樣式，并提供了表單驗(yàn)證的 class。
（2）輸入框焦點(diǎn)：當(dāng)輸入框 input 接收到 :focus 時(shí)，輸入框的輪廓會(huì)被移除，同時(shí)應(yīng)用 box-shadow。
（3）禁用的輸入框 input：如果您想要禁用一個(gè)輸入框 input，只需要簡(jiǎn)單地添加 disabled 屬性，這不僅會(huì)禁用輸入框，還會(huì)改變輸入框的樣式以及當(dāng)鼠標(biāo)的指針懸停在元素上時(shí)鼠標(biāo)指針的樣式。
（4）禁用的字段集 fieldset：對(duì) <fieldset> 添加 disabled 屬性來(lái)禁用 <fieldset> 內(nèi)的所有控件。
（5）驗(yàn)證狀態(tài)：Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class（.has-warning、 .has-error 或 .has-success）即可使用驗(yàn)證狀態(tài)。

<form class="form-horizontal" role="form">
 <div class="form-group">
  <label class="col-sm-2 control-label">聚焦</label>
  <div class="col-sm-10">
   <input class="form-control" id="focusedInput" type="text" value="該輸入框獲得焦點(diǎn)...">
  </div>
 </div>

 <div class="form-group">
  <label for="inputPassword" class="col-sm-2 control-label">禁用</label>
  <div class="col-sm-10">
   <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled>
  </div>
 </div>

 <fieldset disabled>
  <div class="form-group">
   <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入（Fieldset disabled）</label>
   <div class="col-sm-10">
    <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入">
   </div>
  </div>

  <div class="form-group">
   <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單（Fieldset disabled）</label>
   <div class="col-sm-10">
    <select id="disabledSelect" class="form-control">
     <option>禁止選擇</option>
    </select>
   </div>
  </div>
 </fieldset>

 <div class="form-group has-success">
  <label class="col-sm-2 control-label" for="inputSuccess">輸入成功</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputSuccess">
  </div>
 </div>

 <div class="form-group has-warning">
  <label class="col-sm-2 control-label" for="inputWarning">輸入警告</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputWarning">
  </div>
 </div>

 <div class="form-group has-error">
  <label class="col-sm-2 control-label" for="inputError">輸入錯(cuò)誤</label>
  <div class="col-sm-10">
   <input type="text" class="form-control" id="inputError">
  </div>
 </div>
</form>

這里寫(xiě)圖片描述