Bootstrap-表單控件

1、單行輸入框（input的type屬性值為text）

用法：

<form>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="請輸入使用者名" />   
    </div> 
</form>
           

注： bootatrap中input值必須添加type類型，因為樣式是通過type屬性來定義， 為了讓控件（select、input、textarea）在各種表單風格中樣式不出錯，需要添加類名“form-control”

2、下拉選者框（select）

用法：

<form>
    <div class="form-group">
        <select  class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div> 
</form>
           

注：用法和原始一緻，多行選擇設定multiple的值為multiple

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

3、文本域textarea

用法：和原始相同，rows和cols分别定義高度和寬度，但是添加類名“form-control”後無需設定cols值，因為在bootstrap中其寬度設定為auto或者100%

<form>
    <div class="form-group" >
        <textarea class="form-control" rows="4">    
        </textarea>
    </div> 
</form>
           

總結：input 、select、textarea和原來使用方法相同，增加了類名“form-control”來維持基本的樣式

4、複選框checkbox和單選按鈕radio

源碼：

.radio,
.checkbox {display: block;min-height: 20px;padding-left: 20px;margin-top: 10px;margin-bottom: 10px;}
.radio label,
.checkbox label {display: inline;font-weight: normal;cursor: pointer;}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {float: left;margin-left: -20px;}
.radio + .radio,
.checkbox + .checkbox {margin-top: -5px;}
           

用法：

<form>
    <div class="checkbox">
        <label>
            <input type="checkbox" value="">記住密碼
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="like" checked="checked" />喜歡
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" value="hate" />不喜歡
        </label>
    </div>
</form>
           

       說明： checkbox和radio均用label标簽包起來；

                  checkbox和label标簽一起放在了“.checkbox”容器内（垂直方向排列）；

                  radio和label标簽一起放在了".radio"容器内（垂直方向排列）。

5、複選框和單選按鈕水準排列

源碼：

.radio-inline,
.checkbox-inline {display: inline-block;padding-left: 20px;margin-bottom: 0;font-weight: normal;vertical-align: middle;cursor: pointer;}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {margin-top: 0;margin-left: 10px;}
           

用法：

<form role="form">
<div class="form-group">
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />男性
        </label> 
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />女性
        </label>  
        <label class="radio-inline">
            <input type="radio" value="option1" name="sex" />中性
        </label>    
</div>
</form>
           

   說明： 如果checkbox需要水準排列，隻需在label标簽添加類名“.checkbox-inline”；

              如果radio需要水準排列，隻需在label标簽添加類名".radio-inline"；

              不需要在label标簽外包裹有“radio“或者”checkbox”的容器；

              radio需要 type、value、name齊全才能有單選效果。

6、按鈕

制作按鈕的常用方式：

 ☑  input[type=“submit”]

 ☑  input[type=“button”]

 ☑  input[type=“reset”]

 ☑  <button>

在bootstrap中采用button來實作：