bootstrap复选框怎么实现

复选框（Checkbox）

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

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

复选框，可以设置

为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该

里头，然后复选框设置为 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中文网其他相关文章！

相关标签：

bootstrap

来源：php.cn

上一篇：bootstrap如何读 下一篇：bootstrap字体颜色怎么改

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• win10 1809稳定吗
  2020-01-15 11:18:13
• win10安装.Net Framework 3.5 sp1
  2020-01-15 10:58:09
• win10怎么连接外国网络
  2020-01-15 10:34:39
• win10更新1909要多久
  2020-01-15 10:16:56
• win10更新要多久
  2020-09-14 10:58:08
• win10游戏闪退修复办法
  2020-01-15 09:58:52
• win10蓝牙耳机麦克风不能用
  2020-01-15 09:36:25
• win10要装杀毒软件么
  2020-01-15 09:28:34
• win10许可证过期怎么激活
  2020-01-15 09:22:01
• win10重置卡在键盘布局解决办法
  2020-01-15 09:09:20

最新问题

在Nuxt.js中安装jQuery的步骤 尽管我在项目中尝试添加jQuery，但是我遇到一个错误，提示它未定义。plugins:[{src:'~/plugins/js/svgSprite.js',mode:'client'...

来自于 2023-11-06 16:41:50

0

1

225

Laravel 9仍然无法找到App.css和App.js，即使运行了npm run dev 对Laravel相当陌生，我确保在潜水之前我确实查看了Laravel9的文档，但万一我错过了一个，我会遇到这个问题，即在artisan提供的链接上找不到app.css和app.js...

来自于 2023-10-26 23:41:22

0

1

489

定制Bootstrap 4的网格系统断点 我有一个应用程序，其中设计需要分别从台式机到平板电脑或xl到lg的1280断点。然而，Bootstrap本身在1200处有xl断点。我需要全局更改xl断点以进行引导。我是否必须从源...

来自于 2023-10-18 23:01:50

0

2

197

如何使头部的图片、文字和按钮具有响应式 我正在使用Bootstrap5制作一个网站。在网站的标题中，我使用Bootstrap中的轮播作为我的标题。轮播图像还允许显示文本和按钮。我希望图像、文本和按钮具有响应能力。我尝试使...

来自于 2023-09-17 09:51:15

0

1

283

为何我的Bootstrap导航栏无法正确呈现？ 我正在尝试使用Bootstrap4制作一个导航栏，但我的代码似乎不起作用。我的代码几乎与教程完全一致，只对nav-brand进行了一些更改。我做错了什么？这是它的样子。<na...

来自于 2023-09-16 16:14:06

0

1

522

相关专题

更多>

• tomcat中文乱码如何解决
• java有什么用
• parseint函数的作用
• bios刷新的方法
• 人工智能技术有哪些
• dex概念数字货币介绍
• 如何打开ESP文件
• url文件打开方法