Bootstrap 的 Form (Part 3)

Bootstrap 的 Form (Part 1)   Bootstrap 的 Form (Part 2)  Bootstrap 的 Form (Part 3)
Bootstrap 的 Form (Part 4)

除了各式input控制項及textarea控制項以外, 我們還可以在form中使用CheckBox, Radio 按鈕及Select下拉式選單等控制項

CheckBox核取方塊與Radio 按鈕

首先我們使用Bootstrap 的 Form (Part 1)一文中所準備的有Bootstrap垂直式佈局form的主版頁面新增一個網頁

我們在網頁中加入下列HTML, 在其中我們把HTMLCheckBox放置在div內並加上CSS class="checkbox"

      <div class="form-group">
          <label for="choices">部門: </label>
         <div class="checkbox">
             <label><input type="checkbox" id="chkHR" value="1"/>人事部</label>
         </div>
         <div class="checkbox">
             <label><input type="checkbox" id="chkRD" value="2"/>研發部</label>
         </div>
     </div>

執行後即出現下列畫面, 使用者可以選擇一個或多個CheckBox控制項

Radio 按鈕的用法和CheckBox相同,但不同的的Radio 按鈕需加上相同的name屬性

    <div class="form-group">
        <label for="gender">性別: </label>
        <div class="radio">
            <label><input type="radio" id="rbMale" name="optionGender" value="M"/>男性</label>
        </div>
         <div class="radio">
            <label><input type="radio" id="rbFemale" name="optionGender" value="F"/>女性</label>
        </div>
    </div>

執行後即出現下列畫面

如果想要把CheckBox 或 Radio 按鈕放置在同一列, 可以把所有選項放置在同一div內,並在每一label中加入CSS class="chheckbox-inline" 或 class="radioi-inline", 如下所示

<div class="form-group">
          <label for="choices">部門: </label>
         <div>
             <label class="checkbox-inline"><input type="checkbox" id="chkHR2" value="1"/>人事部</label>
             <label class="checkbox-inline"><input type="checkbox" id="chkRD2" value="2"/>研發部</label>
         </div>
     </div>
    <div class="form-group">
        <label for="gender">性別: </label>
        <div>
            <label class="radio-inline"><input type="radio" id="rbMale2" name="oGender2"     value="M"/>男性</label>
            <label class="radio-inline"><input type="radio" id="rbFemale2" name="oGender2" value="F"/>女性</label>
        </div>
    </div>

執行後即出現下列畫面

Select控制項

下拉式選單也是一個常見的選擇方式, 使用時需在select中加入CSS class="form-control".

    <div class="form-group">
          <label for="choices3">部門: </label>
         <select class="form-control"id="dept3">
             <option>人事部</option>
             <option>研發部</option>
             <option>會計部</option>
         </select>
    </div>

執行後即出現下列畫面

如果在select中加入multiple屬性, 則選單以展開型式呈現並可多選

    <div class="form-group">
          <label for="choices4">部門: </label>
         <select multiple class="form-control"id="dept4">
             <option>人事部</option>
             <option>研發部</option>
             <option>會計部</option>
         </select>
    </div>

執行後即出現下列畫面, 使用者按下Ctrl不放即可以多選