深入學習Bootstrap表單
本文知識點借鑒來自http://www.runoob.com/bootstrap/bootstrap-forms.html，里面寫的比較詳細還給出了例子，這里總結(jié)一下重點方便記憶。
一、表單布局
1.垂直表單（默認）
向父 <form> 元素添加 role="form"。
把標簽和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
<form action="#" role="form"> <div class="form-group"> <lable>姓名：<input class="form-control" type="text"/></lable> <lable>性別：<input class="form-control" type="text"/></lable> </div> </form>
2.內(nèi)聯(lián)表單
向 <form> 標簽添加 class .form-inline；
默認情況下，Bootstrap 中的 input、select 和 textarea 有 100% 寬度。在使用內(nèi)聯(lián)表單時，您需要在表單控件上設置一個寬度。
使用 class .sr-only，您可以隱藏內(nèi)聯(lián)表單的標簽。
3.水平表單
向父 <form> 元素添加 class .form-horizontal。
把標簽和控件放在一個帶有 class .form-group 的 <div> 中。
向標簽添加 class .control-label。
<form action="#" role="form" class="form-horizontal"> <div class="form-group"> <lable class="control-label col-lg-2">姓名：</lable> <div class=" col-lg-10"><input class="form-control" type="text"/></div> <lable class="control-label col-lg-2">性別：</lable> <div class="col-lg-10"><input class="form-control " type="text"/></div> </div> </form>
二、支持的表單控件
1.輸入框（Input）
<lable>姓名：<input class="form-control" type="text"/></lable>
2.文本框（Textarea） 可改變 rows 屬性
<div class="form-group"> <textarea rows="8" class="form-control"> </textarea> </div>
3.復選框（Checkbox）和單選框（Radio）
當創(chuàng)建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用 checkbox。如果您限制用戶只能選擇一個選項，請使用 radio。
對一系列復選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。
<div class="checkbox-inline">
<lable class="control-label"><input type="checkbox"/>籃球</lable>
</div>
<div class="checkbox-inline">
<lable class="control-label"><input type="checkbox"/>音樂</lable>
</div>
<div class="checkbox-inline">
<lable class="control-label"><input type="checkbox"/>繪畫</lable>
</div>
<div class="radio">
<lable><input type="radio"/>男</lable>
</div>
<div class="radio">
<lable><input type="radio"/>女</lable>
</div>
4.選擇框（Select）
使用 <select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數(shù)字。
使用 multiple="multiple" 允許用戶選擇多個選項。
<div class="form-group">
<select name="" id="" class="form-control" multiple>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
</select>
</div>
5.靜態(tài)控件
當您需要在一個水平表單內(nèi)的表單標簽后放置純文本時，請在 <p> 上使用 class .form-control-static。
<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>
三、表單控件狀態(tài)
1.輸入框焦點
當輸入框 input 接收到 :focus 時，輸入框的輪廓會被移除，同時應用 box-shadow。
2.禁用的輸入框 input
如果您想要禁用一個輸入框 input，只需要簡單地添加 disabled 屬性，這不僅會禁用輸入框還，會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
<div> <lable>姓名：<input type="text" disabled class="form-control"/></lable> </div>
3.禁用的字段集 fieldset
對 <fieldset> 添加 disabled 屬性來禁用 <fieldset> 內(nèi)的所有控件。
4.驗證狀態(tài)
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當?shù)腸lass（.has-warning、 .has-error 或 .has-success）即可使用驗證狀態(tài)。
<div class="has-error"> <lable class="control-label"> 姓名：<input type="text" class="form-control" placeholder="has-error"/> </lable> </div> <div class="has-warning"> <lable class="control-label"> 姓名：<input type="text" class="form-control" placeholder="has-warning"/> </lable> </div>
5.表單控件大小
分別使用 class .input-lg(或.input-sm) 和 .col-lg-* 來設置表單的高度和寬度
<div class="form-group"> 姓名：<input type="text" class="form-control input-lg" placeholder="input-lg"/> 姓名：<input type="text" class="form-control input-sm" placeholder="input-sm"/> 姓名：<input type="text" class="form-control " placeholder="normal"/> </div>
6.表單幫助文本
Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。 為了添加一個占用整個寬度的內(nèi)容塊，請在 <input> 后使用 .help-block。
<div class="form-grounp"> <input type="text"/> <span class="help-block"> Bootstrap 表單控件可以在輸入框 input 上有一個塊級幫助文本。 </span> </div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Java SE 9 多版本兼容 JAR 包示例,Java 9 版本中增強了Jar 包多版本字節(jié)碼文件格式支持，也就是說在同一個 Jar 包中我們可以包含多個 Java 版本的 class 文件，更多相關(guān)內(nèi)容感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了淺析JavaScript中的變量提升,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
比較不錯的分離式js代碼，獲取element的值，大家注意下，運行后的效果是32之類的值，其實主要是沒有強制轉(zhuǎn)換成數(shù)字，所以大家可以加上2008-05-05
js利用appendChild對<li>標簽進行排序的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s利用appendChild對<li>標簽進行排序的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
今天在為網(wǎng)站增加一些代碼功能的時候，需要用到if條件判斷，發(fā)現(xiàn)簡寫方法忘了，這里特整理下2014-05-05
discuz中用到的js不論是多瀏覽器兼容性和實用性都是非常不錯的，推薦大家看下2008-05-05
這是本系列的第三篇文章了，前面2篇網(wǎng)友們反饋回來不少的消息，加上最近2天比較忙，一直沒來得及整理，周末了，趕緊給大家整理下發(fā)出來，本文講的是node.js模塊2014-05-05
基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動端)
這篇文章主要介紹了基于HTML模板和JSON數(shù)據(jù)的JavaScript交互(移動端)的相關(guān)資料,需要的朋友可以參考下2016-04-04
JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個常用的方法,用于遍歷數(shù)組或類數(shù)組對象中的每個元素,本文就來介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-11-11
javascript讀取文本節(jié)點方法小結(jié)
本篇文章主要介紹了javascript讀取文本節(jié)點的方法，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12