BootStrap中的表單大全

更新時(shí)間：2016年09月07日 09:12:51 作者：Real_Bird

這篇文章主要介紹了BootStrap中的表單大全,包括基礎(chǔ)表單，內(nèi)聯(lián)表單和水平表單等知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

表單

　　基礎(chǔ)表單

　　對(duì)于表單中的input、textarea、select，一般我都會(huì)加上類(lèi)”form-control”,它設(shè)置元素的默認(rèn)寬度為100%（并不是絕對(duì)，比如下述的內(nèi)聯(lián)表單）。并且每個(gè)元素（包括label和待輸入元素）都會(huì)加上”form-group”。它的樣式只有一個(gè)。margin-bottom:15px。　　

<form action="">
<div class="form-group">
<label for="">用戶(hù)名：</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="">密碼：</label>
<input type="password" class="form-control"/>
</div>
</form>

　　內(nèi)聯(lián)表單

　　通過(guò)給最外層元素（form-group的父元素）加上”form-inline”。表示所有表單元素都在一行顯示（充足的寬度的情況下）。并且”.form-inline .form-group”展示為內(nèi)聯(lián)塊元素（inline-block）。并且”.form-inline .form-control”的寬度是auto。這樣可以保證在一行展示。

<form action="" class="form-inline">
<div class="form-group">
<label for="">用戶(hù)名：</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="">密碼：</label>
<input type="password" class="form-control"/>
</div>
</form>

　　水平表單

　　不同于普通表單和內(nèi)聯(lián)表單。如果要將label和input表單元素顯示在一行，則需要使用”form-horizontal”。該類(lèi)聯(lián)合”form-group”使用，就相當(dāng)于網(wǎng)格系統(tǒng)中的”row”。所以它的子類(lèi)有”col-md-*”，而label的 “control-label”—-“.form-horizontal .control-label”，有文本右對(duì)齊的效果。如果不加這個(gè)，label和input的會(huì)顯得不對(duì)齊。

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-1">用戶(hù)名：</label>
<div class="col-md-3">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group form-group-sm">
<label for="" class="control-label col-md-1">密碼：</label>
<div class="col-md-3">
<input type="password" class="form-control input-sm"/>
</div>
</div>
</form>

　　表單大小

　　控制input大小的是”input-sm”，”input-lg”，它們使input輸入框比正?？雌饋?lái)更小或者更大。與此對(duì)應(yīng)的是label中文本的大小。需要在父級(jí)”form-group”同時(shí)加上”form-group-sm”，”form-group-lg”。如上面一個(gè)demo的密碼輸入框。

輸入框

　　在HTML5中，輸入框（input）標(biāo)簽中的type支持了更多的類(lèi)型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。標(biāo)簽<input>上只有賦值了特定的type才能顯示正確的樣式。有些元素只有在手機(jī)上才能顯示其效果。

下拉框select

　　與輸入框類(lèi)似。只是將input改成了select，同時(shí)加上了”form-control”類(lèi)。

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-2 col-md-pull-1">請(qǐng)選擇：</label>
<div class="col-md-3 col-md-pull-1">
<select name="" id="" class="form-control">
<option value="">HTML</option>
<option value="">CSS</option>
<option value="">Javascript</option>
<option value="">JAVA</option>
<option value="">PHP</option>
<option value="">Nodejs</option>
</select>
</div>
</div>
</form>

　　col-md-pull-*是左偏移。

文本域

　　和上面類(lèi)似。　

<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="control-label col-md-2 col-md-pull-1">textarea：</label>
<div class="col-md-3 col-md-pull-1">
<textarea name="" id="" rows="3" class="form-control">
hello
</textarea>
</div>
</div>
</form>

多選框和單選框

　　為了使radio和checkbox元素顯示在一行，并且和label對(duì)齊。bootstrap提供了兩種選擇。其一：

<div class="form-group">
<label for="" class="radio">
<input type="radio" name="sex"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex"/>女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex"/>保密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
<label for="" class="checkbox">
<input type="checkbox"/>HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox"/>CSS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="checkbox"/>JavaScript&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</label>
</div>

　　label本身是inline-block的。但是.radio，.checkbox本身卻是block的。　

　　所以用一個(gè)label包裹多個(gè)單選框或復(fù)選框，這樣會(huì)顯得很不專(zhuān)業(yè)（haha）。還有，很多的 也是很不美觀的。So，第二種寫(xiě)法來(lái)了。

<div class="form-group">
<label for="" class="radio-inline">
<input type="radio" name="sex"/>男
</label>
<label for="" class="radio-inline">
<input type="radio" name="sex"/>女
</label>
<label for="" class="radio-inline">
<input type="radio" name="sex"/>保密
</label>
<br />
<label for="" class="checkbox-inline">
<input type="checkbox" />HTML
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />CSS
</label>
<label for="" class="checkbox-inline">
<input type="checkbox" />JavaScript
</label>
</div>

表單驗(yàn)證

　　has-success：成功，綠色。

　　has-warning：警告，黃色。

　　has-error：錯(cuò)誤，紅色。

　　在”form-group”上加上對(duì)應(yīng)的樣式即可。為了更好的驗(yàn)證，我們還可以繼續(xù)加上”has-feedback”。然后在input（”form-control”）后面元素同級(jí)加上”form-control-feedback”。語(yǔ)義清晰明了。代碼如下：

<form action="" class="form-horizontal">
<div class="form-group has-error has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">用戶(hù)名：</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-remove"></span>
</div>
</div>
<div class="form-group has-warning has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">密碼：</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-warning-sign"></span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label for="" class="control-label col-md-2 col-md-pull-1">郵箱：</label>
<div class="col-md-3 col-md-pull-1">
<input type="text" class="form-control" />
<span class="form-control-feedback glyphicon glyphicon-ok"></span>
<span>格式正確</span>
</div>
</div>
</form>

按鈕

　　多按鈕與按鈕風(fēng)格

　　bootstrap中的按鈕風(fēng)格多樣。button、a、input、span、div等都可以成為按鈕，只要它具有”btn btn-樣式”。但是為了更好的兼容性和可讀性最好不要這樣用，盡量使用button標(biāo)簽。

<button class="btn btn-default">按鈕</button>
<button class="btn btn-primary">按鈕</button>
<button class="btn btn-info">按鈕</button>
<button class="btn btn-link">按鈕</button>
<button class="btn btn-success btn-xs">按鈕</button>
<button class="btn btn-warning btn-sm">按鈕</button>
<button class="btn btn-error btn-lg">按鈕</button>
<!--btn-block使按鈕獨(dú)占一行-->
<button class="btn btn-default btn-block">按鈕</button>
<button class="btn btn-primary btn-block">按鈕</button>
<button class="btn btn-info btn-block">按鈕</button>
<button class="btn btn-link btn-block">按鈕</button>
<button class="btn btn-success btn-xs btn-block active">按鈕</button>
<button class="btn btn-warning btn-sm btn-block focus">按鈕</button>
<button class="btn btn-error btn-lg btn-block">按鈕</button>

　　按鈕大小

　　如上述，使用”btn-xs”，”btn-sm”，”btn-lg”可以設(shè)置按鈕大小。

　　按鈕狀態(tài)

　　如上述，有效的有”active”，”focus”。

圖片

　　img-responsive：響應(yīng)式圖片，主要針對(duì)響應(yīng)式設(shè)計(jì)。
　　img-rounded：圓角。
　　img-circle：圓形。
　　img-thumbnail：縮略圖，表現(xiàn)為外層加了一個(gè)邊框。

圖標(biāo)

　　　bootstart內(nèi)置了很多小圖標(biāo)。使用方式如下。其實(shí)在上面的”form-control-feedback”中已經(jīng)使用了。其中”glyphicon”是必須的。
　　　<span class="glyphicon glyphicon-search"></span>

輸入框組

　　輸入框組是一個(gè)”input-group”。我們需要加一些后綴（比如郵箱后綴）和前綴（金錢(qián)符號(hào)￥、$等）則需要使用到”input-group-addon”或者”input-group-btn”。語(yǔ)義簡(jiǎn)單清晰。如下：　

<!--郵箱-->
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-addon">@gmail.com</span>
</div>
<!--貨幣-->
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<!--單選-->
<div class="input-group">
<span class="input-group-addon">
<input type="radio"/>
</span>
<input type="text" class="form-control"/>
</div>
<!--多選-->
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"/>
</span>
<input type="text" class="form-control" />
</div>
<!--淘寶輸入框組-->
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
請(qǐng)選擇<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)">寶貝</a></li>
<li><a href="javascript:void(0)">店鋪</a></li>
</ul>
</div>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">搜索</button>
</span>
</div>

小結(jié)

　　“form-horizontal”，”form-inline”都是表單組最外層的標(biāo)簽。

　　一個(gè)表單組以”form-group”作為父元素。類(lèi)似的還有”input-group”，以及以后可能會(huì)將的”button-group”。它們都可以設(shè)置大小。

”form-group-lg”，”input-lg”，”input-group-lg”，”btn-lg”等。

　　驗(yàn)證樣式有”has-error”，”has-success”，”has-warning”。同元素可以加上”has-feedback”。以便讓驗(yàn)證更完整。

　　按鈕有很多樣式，大小可以設(shè)置。

　　圖片常用的四個(gè)樣式。

　　bootstarp內(nèi)置了很多圖標(biāo)。

　　輸入框組以”input-group”開(kāi)頭，子元素有”input-group-addon”，”input-group-btn”等等。

以上所述是小編給大家介紹的BootStrap中的表單大全，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: