位置:电子教程 > Bootstrap4教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Bootstrap4入门
Bootstrap4 网格系统
Bootstrap4 文字排版
Bootstrap4 颜色
Bootstrap4 表格
Bootstrap4 图像形状
Bootstrap4 Jumbotron 超大屏幕
Bootstrap4 信息提示框
Bootstrap4 按钮
Bootstrap4 按钮组 .btn-group 类
Bootstrap4 徽章(Badges)
Bootstrap4 进度条
Bootstrap4 分页
Bootstrap4 列表组
Bootstrap4 卡片
Bootstrap4 下拉菜单
Bootstrap4 折叠
Bootstrap4 导航
Bootstrap4 面包屑导航(Breadcrumb)
Bootstrap4 导航栏
Bootstrap4 表单
Bootstrap4 表单控件
Bootstrap4 输入框组
Bootstrap4 自定义表单
Bootstrap4 轮播
Bootstrap4 模态框
Bootstrap4 提示框
Bootstrap4 弹出框
Bootstrap 滚动监听(Scrollspy)
当前阅读教程:Bootstrap4教程 > 自定义复选框
阅读(22555525)      收藏       赞(5685)      分享
上一篇: Bootstrap4 自定义表单 下一篇: 自定义单选框

如果要自定义一个复选框,可以设置 <div> 为父元素,类为 .custom-control .custom-checkbox,复选框作为子元素放在该 <div> 里头,然后复选框设置为 type="checkbox",类为 .custom-control-input

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

Bootstrap4 实例

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" id="customCheck" name="example1">
    <label for="customCheck">自定义复选框</label>
  </div>
</form>

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例(小白教程网 2d5.net)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container mt-3">
  <h2>自定义复选框</h2>
  <p>如果要自定义一个复选框,可以设置 &lt;div&gt; 为父元素,类为 .custom-control 和 .custom-checkbox,复选框作为子元素放在该 &lt;div&gt; 里头,然后复选框设置为 type="checkbox",类为 .custom-control-input。</p>
  <p>复选框的文本使用 label 标签,标签使用 .custom-control-label 类,label 的 for 属性值需要匹配复选框的 id。</p>
  <form action="/action_page.php">
    <div class="custom-control custom-checkbox mb-3">
      <input type="checkbox" id="customCheck" name="example1">
      <label for="customCheck">自定义复选框</label>
    </div>
    <input type="checkbox" id="defaultCheck" name="example2">
    <label for="defaultCheck">默认复选框</label>
    <br>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>
</body>
</html>

效果图

小白教程网www.2d5.net

image.png


上一篇: Bootstrap4 自定义表单 下一篇: 自定义单选框
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)