表單控件(復選框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）：
從上面的示例，我們可以得知： 1、不管是checkbox還是radio都使用label包起來了 2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內 3、radio連同label標簽放置在一個名為“.radio”的容器內 在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復選框、單選按鈕與標簽的對齊方式。
有時候，為了布局的需要，將復選框和單選按鈕需要水平排列。Bootstrap框架也做了這方面的考慮： 1、如果checkbox需要水平排列，只需要在label標簽上添加類名“checkbox-inline” 2、如果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>
運行效果如下或查看右側結果窗口：
