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

<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”的容器內(nèi)
3、radio連同label標簽放置在一個名為“.radio”的容器內(nèi)
在Bootstrap框架中，主要借助“.checkbox”和“.radio”樣式，來處理復選框、單選按鈕與標簽的對齊方式。源碼請查看bootstrap.css文件第1742行～第1762行：

.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;
}