本文摘自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模态框的遮罩层
angular怎么集成bootstrap4?方法介绍
bootstrap的好处
bootstrap干什么用的
bootstrap什么时候使用
什么情况下用bootstrap栅格系统
bootstrap 怎么关闭tab
bootstrap tab 没有反应怎么办
使用bootstrap框架的好处是什么
bootstrap如何让图片居中显示
更多相关阅读请进入《bootstrap》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » bootstrap复选框怎么实现