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.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; }
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報