亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

表單控件(復選框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.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 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?