bootstrap4 复选框浮窗
时间: 2023-09-27 08:04:02 浏览: 47
如果您想要实现一个在浮窗中包含多个复选框的效果,可以使用 Bootstrap 4 中的 Modal 和 Form 组件结合使用。
首先,在页面上添加一个触发浮窗的按钮:
```html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开浮窗</button>
```
然后,在页面中添加一个 Modal 组件:
```html
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal 头部 -->
<div class="modal-header">
<h4 class="modal-title">选择选项</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal 主体 -->
<div class="modal-body">
<form>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
选项1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
选项2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
选项3
</label>
</div>
</form>
</div>
<!-- Modal 底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
这段代码中,我们使用了 Form 和 Form-check 组件来创建了三个复选框,并将它们放在了 Modal 的主体中。Modal 的头部和底部则使用了 Bootstrap 4 中的 Modal-header 和 Modal-footer 组件。
最后,我们需要引入 Bootstrap 4 的 CSS 和 JavaScript 文件,以及 jQuery 库:
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
```
这样,我们就完成了一个包含多个复选框的浮窗效果。