Bootstrap關於表單控件（Radio,CheckBox）

表單控件(複選框checkbox和單選擇按鈕radio)

          

Bootstrap框架中checkbox和radio有點特殊，Bootstrap針對他們作了一些特殊化處理，主要是checkbox和radio與label標籤配合使用會出現一些小問題（最頭痛的是對齊問題）。使用Bootstrap框架，開發人員無需考慮太多，只須要按照下面的方法使用便可。

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>

運行效果以下或查看右側結果窗口（案例1）：

從上面的示例，咱們能夠得知： 一、無論是checkbox仍是radio都使用label包起來了 二、checkbox連同label標籤放置在一個名爲「.checkbox」的容器內 三、radio連同label標籤放置在一個名爲「.radio」的容器內 在Bootstrap框架中，主要藉助「.checkbox」和「.radio」樣式，來處理複選框、單選按鈕與標籤的對齊方式。

 

有時候，爲了佈局的須要，將複選框和單選按鈕須要水平排列。Bootstrap框架也作了這方面的考慮： 一、若是checkbox須要水平排列，只須要在label標籤上添加類名「checkbox-inline」 二、若是radio須要水平排列，只須要在label標籤上添加類名「radio-inline」 以下所示：

 

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">遊戲
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">攝影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅遊
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

 

運行效果以下或查看右側結果窗口：