ootstrap5新增了插件的关闭按钮样式及适用的场合
时间: 2024-03-04 07:49:35 浏览: 17
是的,Bootstrap 5新增了插件关闭按钮的样式,使用了新的类名`.btn-close`,可用于关闭Modal、Alert、Popover等插件。关闭按钮默认使用了字体图标,如`×`,也可以自定义图标。以下是使用Bootstrap 5关闭按钮的示例代码:
```html
<!-- 关闭Alert插件 -->
<div class="alert alert-primary d-flex align-items-center" role="alert">
<div class="flex-grow-1">
This is a primary alert with a <a href="#" class="alert-link">link</a>. Give it a click if you like.
</div>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
<!-- 关闭Modal插件 -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
需要注意的是,关闭按钮只适用于特定的插件,如Modal、Alert、Popover等,其他插件可能需要使用不同的关闭方式。此外,关闭按钮需要设置`data-dismiss`属性或调用相应的JavaScript方法才能实现关闭效果。