本文摘自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 table插件怎么换行
bootstrap 如何取消自适应
bootstrap怎么设置背景图片
浅谈bootstrap blazor组件的使用方法
bootstrap的优点和缺点是什么?
bootstrap如何隐藏div
bootstrap按钮样式有哪些
bootstrap怎么实现可关闭tab
bootstrap如何兼容ie6
bootstrap框架是什么
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap复选框怎么实现