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

創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營(yíng)產(chǎn)品：響應(yīng)式網(wǎng)站設(shè)計(jì)、高端網(wǎng)站設(shè)計(jì)、成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)。我們專注企業(yè)品牌在網(wǎng)站中的整體樹(shù)立，網(wǎng)絡(luò)互動(dòng)的體驗(yàn)，以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營(yíng)、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

基本案例
單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了.form-control的、和<select>元素都將被默認(rèn)設(shè)置為width: 100%;。將label和前面提到的這些控件包裹在.form-group中可以獲得最好的排列。</p><p>代碼如下:</p><p><form role="form"><br/><div id="squ6kqw" class="form-group"><br/><label for="exampleInputEmail1">Email address</label><br/><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"><br/></div><br/><div id="squ6kqw" class="form-group"><br/><label for="exampleInputPassword1">Password</label><br/><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"><br/></div><br/><div id="squ6kqw" class="form-group"><br/><label for="exampleInputFile">File input</label><br/><input type="file" id="exampleInputFile"><br/><p class="help-block">Example block-level help text here.</p><br/></div><br/><div id="squ6kqw" class="checkbox"><br/><label><br/><input type="checkbox"> Check me out<br/></label><br/></div><br/><button type="submit" class="btn btn-default">Submit</button><br/></form></p><p><br/><br/><img src="/upload/otherpic55/14529.jpg" alt="如何使用bootstrap3.0中的表單"></p><p>兩個(gè)文本框的寬度的確為100%。并且有三個(gè)form-group。</p><p><strong>內(nèi)聯(lián)表單</strong></p><p>為左對(duì)齊和inline-block級(jí)別的控件設(shè)置.form-inline，可以將其排布的更緊湊。</p><p>需要設(shè)置寬度：在Bootstrap中,input、select和textarea默認(rèn)被設(shè)置為100%寬度。為了使用內(nèi)聯(lián)表單，你需要專門(mén)為使用到的表單控件設(shè)置寬度。</p><p>一定要設(shè)置label:如果你沒(méi)有為每個(gè)輸入控件設(shè)置label,屏幕閱讀器將無(wú)法正確識(shí)讀。對(duì)于這些內(nèi)聯(lián)表單,你可以通過(guò)為label設(shè)置.sr-only已將其隱藏。<br/></p><p>代碼如下:</p><p><br/><form class="form-inline" role="form"><br/><div id="squ6kqw" class="form-group"><br/><label class="sr-only" for="exampleInputEmail2">Email address</label><br/><input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email"><br/></div><br/><div id="squ6kqw" class="form-group"><br/><label class="sr-only" for="exampleInputPassword2">Password</label><br/><input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"><br/></div><br/><div id="squ6kqw" class="checkbox"><br/><label><br/><input type="checkbox"> Remember me<br/></label><br/></div><br/><button type="submit" class="btn btn-default">Sign in</button><br/></form></p><p><br/><br/><img src="/upload/otherpic55/14530.jpg" alt="如何使用bootstrap3.0中的表單"></p><p><strong>水平排列的表單</strong></p><p> 通過(guò)為表單添加.form-horizontal，并使用Bootstrap預(yù)置的柵格class可以將label和控件組水平并排布局。這樣做將改變.form-group的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row），因此就無(wú)需再使用.row了。</p><p>代碼如下:</p><p><br/><form class="form-horizontal" role="form"><br/><div id="squ6kqw" class="form-group"><br/><label for="inputEmail3" class="col-sm-2 control-label">Email</label><br/><div id="squ6kqw" class="col-sm-10"><br/><input type="email" class="form-control" id="inputEmail3" placeholder="Email"><br/></div><br/></div><br/><div id="squ6kqw" class="form-group"><br/><label for="inputPassword3" class="col-sm-2 control-label">Password</label><br/><div id="squ6kqw" class="col-sm-10"><br/><input type="password" class="form-control" id="inputPassword3" placeholder="Password"><br/></div><br/></div><br/><div id="squ6kqw" class="form-group"><br/><div id="squ6kqw" class="col-sm-offset-2 col-sm-10"><br/><div id="squ6kqw" class="checkbox"><br/><label><br/><input type="checkbox"> Remember me<br/></label><br/></div><br/></div><br/></div><br/><div id="squ6kqw" class="form-group"><br/><div id="squ6kqw" class="col-sm-offset-2 col-sm-10"><br/><button type="submit" class="btn btn-default">Sign in</button><br/></div><br/></div><br/></form></p><p><br/><br/><img src="/upload/otherpic55/14531.jpg" alt="如何使用bootstrap3.0中的表單"></p><p><br/><strong>被支持的控件</strong></p><p>在表單布局案例中展示了其所支持的標(biāo)準(zhǔn)表單控件。</p><p><strong>Input<br/></strong>大部分表單控件、文本輸入域控件。包括HTML5支持的所有類型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。</p><p>注意：有正確設(shè)置了type的input控件才能被賦予正確的樣式。</p><p>文本框示例<br/></p><p>代碼如下:</p><p><br/><input type="text" class="form-control" placeholder="Text input"></p><p><br/><br/><img src="/upload/otherpic55/14532.jpg" alt="如何使用bootstrap3.0中的表單"></p><p><strong>Textarea</strong></p><p>支持多行文本的表單控件?？筛鶕?jù)需要改變r(jià)ows屬性。<br/></p><p>代碼如下:</p><p><br/><h2>textarea</h2><br/><textarea class="form-control" rows="3">

Checkbox 和 radio

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

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

代碼如下:

Inline checkboxes

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

代碼如下:

1


2


3

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

Select

代碼如下:

1
2
3
4
5

1
2
3
4
5

靜態(tài)控件
在水平布局的表單中，如果需要將一行純文本放置于label的同一行，為

元素添加.form-control-static即可。

代碼如下:

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

輸入焦點(diǎn)

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

代碼如下:

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

代碼如下:

被禁用的fieldset
為