如何使用bootstrap3.0中的表單

這篇文章主要介紹“如何使用bootstrap3.0中的表單”，在日常操作中，相信很多人在如何使用bootstrap3.0中的表單問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”如何使用bootstrap3.0中的表單”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

基本案例
單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了.form-control的<input>、<textarea>和<select>元素都將被默認(rèn)設(shè)置為width: 100%;。將label和前面提到的這些控件包裹在.form-group中可以獲得最好的排列。

代碼如下:

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

兩個(gè)文本框的寬度的確為100%。并且有三個(gè)form-group。

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

為左對(duì)齊和inline-block級(jí)別的控件設(shè)置.form-inline，可以將其排布的更緊湊。

需要設(shè)置寬度：在Bootstrap中,input、select和textarea默認(rèn)被設(shè)置為100%寬度。為了使用內(nèi)聯(lián)表單，你需要專門為使用到的表單控件設(shè)置寬度。

一定要設(shè)置label:如果你沒有為每個(gè)輸入控件設(shè)置label,屏幕閱讀器將無法正確識(shí)讀。對(duì)于這些內(nèi)聯(lián)表單,你可以通過為label設(shè)置.sr-only已將其隱藏。

代碼如下:

<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>

水平排列的表單

 通過為表單添加.form-horizontal，并使用Bootstrap預(yù)置的柵格class可以將label和控件組水平并排布局。這樣做將改變.form-group的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無需再使用.row了。

代碼如下:

<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>

被支持的控件

在表單布局案例中展示了其所支持的標(biāo)準(zhǔn)表單控件。

Input
大部分表單控件、文本輸入域控件。包括HTML5支持的所有類型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。

注意：有正確設(shè)置了type的input控件才能被賦予正確的樣式。

文本框示例

代碼如下:

<input type="text" class="form-control" placeholder="Text input">

Textarea

支持多行文本的表單控件?？筛鶕?jù)需要改變r(jià)ows屬性。

代碼如下:

<h2>textarea</h2>
<textarea class="form-control" rows="3"></textarea>

Checkbox 和 radio

Checkbox用于選擇列表中的一個(gè)或多個(gè)選項(xiàng)，而radio用于從多個(gè)選項(xiàng)中只選擇一個(gè)。

默認(rèn)外觀(堆疊在一起)

代碼如下:

<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
</div></p> <p><div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>

Inline checkboxes

通過將.checkbox-inline 或 .radio-inline應(yīng)用到一系列的checkbox或radio控件上，可以使這些控件排列在一行。

代碼如下:

<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

 
同理Radio是一樣的，只需要添加一下樣式即可。

Select

代碼如下:

<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select></p> <p><select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

靜態(tài)控件
在水平布局的表單中，如果需要將一行純文本放置于label的同一行，為<p>元素添加.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@examtryrtyrple.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>

控件狀態(tài)
通過為控件和label設(shè)置一些基本狀態(tài)，可以為用戶提供回饋。

輸入焦點(diǎn)

我們移除了某些表單控件的默認(rèn)outline樣式，并對(duì)其:focus狀態(tài)賦予了box-shadow樣式。

代碼如下:

<input class="form-control" id="focusedInput" type="text" value="This is focused...">

被禁用的輸入框
 為輸入框設(shè)置disabled屬性可以防止用戶輸入，并能改變一點(diǎn)外觀，使其更直觀。

代碼如下:

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的fieldset
為<fieldset>設(shè)置disabled屬性可以禁用<fieldset>中包含的所有控件。

<a>標(biāo)簽的鏈接功能不受影響
這個(gè)class只改變<a class="btn btn-default">按鈕的外觀，并不能禁用其功能。建議自己通過JavaScript代碼禁用鏈接功能。

跨瀏覽器兼容性
雖然Bootstrap會(huì)將這些樣式應(yīng)用到所有瀏覽器上，Internet Explorer 9及以下瀏覽器中的<fieldset>并不支持disabled屬性。因此建議在這些瀏覽器上通過JavaScript代碼來禁用fieldset

代碼如下:

<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>

可將鼠標(biāo)移到各個(gè)控件上進(jìn)行查看效果。

校驗(yàn)狀態(tài)
Bootstrap對(duì)表單控件的校驗(yàn)狀態(tài)，如error、warning和success狀態(tài)，都定義了樣式。使用時(shí)，添加.has-warning、.has-error或.has-success到這些控件的父元素即可。任何包含在此元素之內(nèi)的.control-label、.form-control和.help-block都將接受這些校驗(yàn)狀態(tài)的樣式。

代碼如下:

<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error</label>
<input type="text" class="form-control" id="inputError">
</div>

控件尺寸

通過.input-lg之類的class可以為控件設(shè)置高度，通過.col-lg-*之類的class可以為控件設(shè)置寬度。

高度尺寸
創(chuàng)建大一些或小一些的表單控件以匹配按鈕尺寸。

代碼如下:

<inputclass="form-controlinput-lg"type="text"placeholder=".input-lg">
<inputclass="form-control"type="text"placeholder="Defaultinput">
<inputclass="form-controlinput-sm"type="text"placeholder=".input-sm"></p> <p><selectclass="form-controlinput-lg">...</select>
<selectclass="form-control">...</select>
<selectclass="form-controlinput-sm">...</select>

調(diào)整列尺寸
用柵格系統(tǒng)中的列包裹input或其任何父元素，都可很容易的為其設(shè)置寬度。

代碼如下:

<divclass="row">
<divclass="col-xs-2">
<inputtype="text"class="form-control"placeholder=".col-xs-2">
</div>
<divclass="col-xs-3">
<inputtype="text"class="form-control"placeholder=".col-xs-3">
</div>
<divclass="col-xs-4">
<inputtype="text"class="form-control"placeholder=".col-xs-4">
</div>
</div>

幫助文本
用于表單控件的塊級(jí)幫助文本。

代碼如下:

<spanclass="help-block">自己獨(dú)占一行或多行的塊級(jí)幫助文本。</span>

到此，關(guān)于“如何使用bootstrap3.0中的表單”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！