表單
基礎表單
對於表單中的input、textarea、select，一般我都會加上類”form-control”,它設置元素的默認寬度為100%（並不是絕對，比如下述的內聯表單）。並且每個元素（包括label和待輸入元素）都會加上”form-group”。它的樣式只有一個。margin-bottom:15px。
<form action=""> <div class="form-group"> <label for="">用戶名：</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <label for="">密碼：</label> <input type="password" class="form-control"/> </div> </form>
內聯表單
通過給最外層元素（form-group的父元素）加上”form-inline”。表示所有表單元素都在一行顯示（充足的寬度的情況下）。並且”.form-inline .form-group”展示為內聯塊元素（inline-block）。並且”.form-inline .form-control”的寬度是auto。這樣可以保證在一行展示。
<form action="" class="form-inline"> <div class="form-group"> <label for="">用戶名：</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <label for="">密碼：</label> <input type="password" class="form-control"/> </div> </form>
水平表單
不同於普通表單和內聯表單。如果要將label和input表單元素顯示在一行，則需要使用”form-horizontal”。該類聯合”form-group”使用，就相當於網格系統中的”row”。所以它的子類有”col-md-*”，而label的 “control-label”—-“.form-horizontal .control-label”，有文本右對齊的效果。如果不加這個，label和input的會顯得不對齊。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="control-label col-md-1">用戶名：</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輸入框比正常看起來更小或者更大。與此對應的是label中文本的大小。需要在父級”form-group”同時加上”form-group-sm”，”form-group-lg”。如上面一個demo的密碼輸入框。
輸入框
在HTML5中，輸入框（input）標簽中的type支持了更多的類型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。標簽<input>上只有賦值了特定的type才能顯示正確的樣式。有些元素只有在手機上才能顯示其效果。
下拉框select
與輸入框類似。只是將input改成了select，同時加上了”form-control”類。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="control-label col-md-2 col-md-pull-1">請選擇：</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-*是左偏移。
文本域
和上面類似。
<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對齊。bootstrap提供了兩種選擇。其一：
<div class="form-group"> <label for="" class="radio"> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 <input type="radio" name="sex"/>保密 </label> <label for="" class="checkbox"> <input type="checkbox"/>HTML <input type="checkbox"/>CSS <input type="checkbox"/>JavaScript </label> </div>
label本身是inline-block的。但是.radio，.checkbox本身卻是block的。
所以用一個label包裹多個單選框或復選框，這樣會顯得很不專業（haha）。還有，很多的 也是很不美觀的。So，第二種寫法來了。
<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>
表單驗證
has-success：成功，綠色。
has-warning：警告，黃色。
has-error：錯誤，紅色。
在”form-group”上加上對應的樣式即可。為了更好的驗證，我們還可以繼續加上”has-feedback”。然後在input（”form-control”）後面元素同級加上”form-control-feedback”。語義清晰明了。代碼如下：
<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">用戶名：</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>
按鈕
多按鈕與按鈕風格
bootstrap中的按鈕風格多樣。button、a、input、span、div等都可以成為按鈕，只要它具有”btn btn-樣式”。但是為了更好的兼容性和可讀性最好不要這樣用，盡量使用button標簽。
<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使按鈕獨占一行--> <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”可以設置按鈕大小。
按鈕狀態
如上述，有效的有”active”，”focus”。
圖片
img-responsive：響應式圖片，主要針對響應式設計。
img-rounded：圓角。
img-circle：圓形。
img-thumbnail：縮略圖，表現為外層加了一個邊框。
圖標
bootstart內置了很多小圖標。使用方式如下。其實在上面的”form-control-feedback”中已經使用了。其中”glyphicon”是必須的。
<span class="glyphicon glyphicon-search"></span>
輸入框組
輸入框組是一個”input-group”。我們需要加一些後綴（比如郵箱後綴）和前綴（金錢符號￥、$等）則需要使用到”input-group-addon”或者”input-group-btn”。語義簡單清晰。如下：
<!--郵箱--> <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"> 請選擇<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>
小結
“form-horizontal”，”form-inline”都是表單組最外層的標簽。
一個表單組以”form-group”作為父元素。類似的還有”input-group”，以及以後可能會將的”button-group”。它們都可以設置大小。
”form-group-lg”，”input-lg”，”input-group-lg”，”btn-lg”等。
驗證樣式有”has-error”，”has-success”，”has-warning”。同元素可以加上”has-feedback”。以便讓驗證更完整。
按鈕有很多樣式，大小可以設置。
圖片常用的四個樣式。
bootstarp內置了很多圖標。
輸入框組以”input-group”開頭，子元素有”input-group-addon”，”input-group-btn”等等。
以上所述是小編給大家介紹的BootStrap中的表單大全，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！