bootstrap专栏 06.组件 15.轻量弹框

全栈开发

已于 2022-04-03 11:19:50 修改

阅读量184

点赞数

分类专栏： bootstrap 文章标签： bootstrap

于 2022-03-18 17:53:33 首次发布

本文链接：https://blog.csdn.net/m0_66351881/article/details/123581106

版权

bootstrap 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

# 15.轻量弹框

[toc]{type: "ol", level: [3]}

### 轻量弹框
```html
<div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <!--弹框logo-->
        <img src="" class="rounded mr-2" alt="...">
        <!--弹框主题-->
        <strong class="mr-auto">Bootstrap</strong>
        <!--弹出时间-->
        <small>11 mins ago</small>
        <!--关闭按钮-->
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        <!--弹框内容-->
        Hello, world! This is a toast message.
    </div>
</div>
<button id="btn" class="btn btn-info">轻量弹框</button>
```
```js
$('#btn').click(function () {
    $('.toast').toast('show')
})
```
![轻量弹框-轻量弹框-点击前](15.轻量弹框-轻量弹框-点击前.png)
![轻量弹框-轻量弹框-点击后](15.轻量弹框-轻量弹框-点击后.png)