第一次接觸神奇的Bootstrap表單

更新時間：2016年07月27日 08:43:34 作者：smartbetter

第一次接觸神奇的Bootstrap表單，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下

本篇將主要介紹Bootstrap表單的使用技巧。

1.Bootstrap基礎(chǔ)表單

表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、復(fù)選按鈕、文本域和按鈕等。

我們先來看一個基礎(chǔ)表單：

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>基礎(chǔ)表單</title>
 <link rel="stylesheet" >
</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>

效果圖如下所示：

基礎(chǔ)表單運(yùn)行效果

我們還可以通過為form添加不同的類名達(dá)成不同的效果，form的具體規(guī)則如下表所示：

例如：

2.Bootstrap表單控件

1）輸入框input

<form role="form">
 <div class="form-group">
 <!--必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式-->
 <input type="email" class="form-control" placeholder="Enter email">
 </div>
</form>

2）下拉選擇框select

<form role="form">
 <div class="form-group">
 <!--單行下拉選擇框-->
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
 <div class="form-group">
 <!--多行選擇框-->
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 </select>
 </div>
</form>

3）文本域textarea

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

<form role="form">
 <div class="form-group">
 <!--rows="3"設(shè)置高度三行-->
 <textarea class="form-control" rows="3"></textarea>
 </div>
</form>

4）復(fù)選框checkbox

垂直排列：

<form role="form">
 <div class="checkbox">
 <label><input type="checkbox" value="">復(fù)選框</label>
 </div>
</form>

水平排列：

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline"><input type="checkbox" value="option1">復(fù)選框1</label>
 <label class="checkbox-inline"><input type="checkbox" value="option2">復(fù)選框2</label>
 </div>
</form>

5）單選擇按鈕radio

垂直排列：

<form role="form">
 <div class="radio">
 <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>A</label>
 </div>
 <div class="radio">
 <!--不管是checkbox還是radio都使用label包起來了-->
 <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">B</label>
 </div>
</form>

水平排列：

<form role="form">
 <div class="form-group">
 <label class="radio-inline"><input type="radio" value="option1" name="sex">A</label>
 <label class="radio-inline"><input type="radio" value="option2" name="sex">B</label>
 </div>
</form>

注意：checkbox連同label標(biāo)簽放置在一個名為“.checkbox”的容器內(nèi)；radio連同label標(biāo)簽放置在一個名為“.radio”的容器內(nèi)。

3.Bootstrap表單控件狀態(tài)

1）焦點狀態(tài)

焦點狀態(tài)是通過為input添加類名form-control來實現(xiàn)。Bootstrap框架中表單控件的焦點狀態(tài)刪除了outline的默認(rèn)樣式，重新添加陰影效果。

<!--form-horizontal實現(xiàn)水平表單效果-->
<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> 
</form>

2）禁用狀態(tài)

只需要在需要禁用的表單控件上加上“disabled”即可：

3）驗證狀態(tài)

做表單驗證，同樣也需要提供驗證狀態(tài)樣式，在Bootstrap中同樣提供這幾種效果：

使用的時候只需要在form-group容器上對應(yīng)添加狀態(tài)類名。

<form role="form">
 <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>
 <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>
</form>

效果圖如下：

表單驗證樣式

如果你想讓表單在對應(yīng)的狀態(tài)下顯示icon出來，只需要在對應(yīng)的狀態(tài)下添加類名“has-feedback”（此類名要與“has-error”、“has-warning”和“has-success”在一起）。

4.Bootstrap表單-按鈕

1）定制風(fēng)格按鈕

<button class="btn" type="button">基礎(chǔ)按鈕</button> 
<button class="btn btn-default" type="button">默認(rèn)按鈕</button> 
<button class="btn btn-primary" type="button">主要按鈕</button> 
<button class="btn btn-success" type="button">成功按鈕</button> 
<button class="btn btn-info" type="button">信息按鈕</button> 
<button class="btn btn-warning" type="button">警告按鈕</button> 
<button class="btn btn-danger" type="button">危險按鈕</button> 
<button class="btn btn-link" type="button">鏈接按鈕</button>

效果圖如下：

Bootstrap表單-按鈕

2）Bootstrap按鈕支持多標(biāo)簽，其他標(biāo)簽制作的按鈕如下：

<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>
<a href="##" class="btn btn-default">a標(biāo)簽按鈕</a>

3）按鈕大小

通過在基礎(chǔ)按鈕“.btn”的基礎(chǔ)上追加類名來控制按鈕的大小。

<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-lg" type="button">大型按鈕</button> 
<button class="btn btn-primary btn-sm" type="button">小型按鈕</button>

4）塊狀按鈕（移動端用的多）

塊狀按鈕：按鈕寬度充滿整個父容器（width:100%），不會有任何的padding和margin值。
Bootstrap提供了一個類名“btn-block”，按鈕使用這個類名就可以實現(xiàn)塊狀按鈕（具體源碼請查閱bootstrap.css文件第2340行～第2353行）

<button class="btn-block btn-primary btn-lg" type="button">大型按鈕</button> 
<button class="btn-block btn-primary" type="button">正常按鈕</button>
<button class="btn-block btn-primary btn-sm" type="button">小型按鈕</button>

效果圖如下：

塊狀按鈕

5.Bootstrap表單-按鈕狀態(tài)

在Bootstrap中針對按鈕的狀態(tài)效果主要分為兩種：活動狀態(tài)和禁用狀態(tài)。

1）活動狀態(tài)：主要包括按鈕的懸浮狀態(tài)(:hover)，點擊狀態(tài)(:active)和焦點狀態(tài)（:focus）幾種。

2）禁用狀態(tài)

要禁用按鈕有兩種實現(xiàn)方式：
方法1：在標(biāo)簽中添加disabled屬性
方法2：在元素標(biāo)簽中添加類名“disabled”

兩者的主要區(qū)別是：
“.disabled”樣式不會禁止按鈕的默認(rèn)行為。而在元素標(biāo)簽中添加“disabled”屬性的方法是可以禁止元素的默認(rèn)行為的。

6.Bootstrap圖像

在Bootstrap中對于圖像的樣式風(fēng)格提供以下幾種風(fēng)格：

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

<img class="img-rounded" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-circle" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-thumbnail" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">
<img class="img-responsive" alt="100x100" src="http://img.blog.csdn.net/20160726151432225">

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

Bootstrap圖像效果