本文摘自PHP中文网,作者(*-*)浩,侵删。
复选框(Checkbox)
当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用checkbox。(推荐学习:Bootstrap视频教程)
对一系列复选框使用 .checkbox-inline ,控制它们显示在同一行上。
复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox",类为 .custom-control-input。
复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class = "checkbox" >
<label><input type= "checkbox" value= "" >选项 1</label>
</div>
<div class = "checkbox" >
<label><input type= "checkbox" value= "" >选项 2</label>
</div>
#内联
<div>
<label class = "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox1" value= "option1" > 选项 1 </label>
<label class = "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox2" value= "option2" > 选项 2 </label>
<label class = "checkbox-inline" >
<input type= "checkbox" id= "inlineCheckbox3" value= "option3" > 选项 3 </label>
</div>
|
更多Bootstrap相关技术文章,请访问Bootstrap教程栏目进行学习!
以上就是bootstrap复选框怎么实现的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
bootstrap icon不显示怎么办
bootstrap模态框怎么关闭
bootstrap置信区间如何求
bootstrap请求javascript失败是怎么回事
bootstrap支持手机吗
详解eclipse中如何使用bootstrap?(附代码)
bootstrap可以用于移动端吗
bootstrap如何触发下拉菜单
bootstrap用处大吗
bootstrap框架是什么意思
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap复选框怎么实现