• 技术文章 >web前端 >Bootstrap教程

    bootstrap复选框怎么实现

    (*-*)浩(*-*)浩2019-07-18 13:45:25原创5319

    复选框(Checkbox)

    当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用checkbox。(推荐学习:Bootstrap视频教程

    对一系列复选框使用 .checkbox-inline ,控制它们显示在同一行上。

    复选框,可以设置 <div> 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox",类为 .custom-control-input。

    复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。

    实例

    <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复选框怎么实现的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap
    上一篇:bootstrap如何读 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 如何运用bootstrap进行页面布局• bootstrap用什么编辑器写• bootstrap对于后端工程师重要么• bootstrap导航栏怎么居中
    1/1

    PHP中文网