Bootstrap5 消息弹窗(Toasts)3

简介: 本示例展示了如何使用HTML和Bootstrap创建并显示多个消息弹窗。通过设置`.toast-container`类及相应的位置属性,可以轻松控制弹窗的布局与间距。每个弹窗包含标题、时间戳及关闭按钮,支持自定义内容显示。

设置多个消息弹窗:
实例












弹窗实例
刚刚



这是第二个消息

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
    <strong class="me-auto">弹窗实例</strong>
    <small class="text-muted">2 秒前</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
    这是第一个消息
    </div>
</div>
</div>

相关文章
|
3天前
|
前端开发 JavaScript
Bootstrap5 消息弹窗(Toasts)1
Bootstrap5 弹窗(Toasts) 是一种轻量级通知组件,适用于页面角落或底部显示临时信息。使用 .toast 类创建,包含 .toast-header 和 .toast-body 分别定义标题和内容。默认关闭状态,通过 .show 显示,利用 data-bs-dismiss=&quot;toast&quot; 关闭。支持通过 JavaScript 初始化和控制显示。
|
3天前
|
前端开发
Bootstrap5 消息弹窗(Toasts)2
此示例展示了一个使用Bootstrap 5实现的右下角弹窗(Toast)。点击“显示弹窗”按钮,弹窗将出现在页面右下角,包含标题和关闭按钮。
|
15天前
Bootstrap5 卡片4
在卡片组件中,使用 `.card-title` 设置标题,`.card-body` 包含正文内容,`.card-text` 用于正文标签,`.card-link` 设置链接颜色。
|
24天前
Bootstrap5 信息提示框3
提示框动画使用 `.fade` 和 `.show` 类来实现关闭时的淡入淡出效果。示例代码:`&lt;div class=&quot;alert alert-danger alert-dismissible fade show&quot;&gt;`
|
24天前
|
前端开发
Bootstrap5 按钮2
Bootstrap 5 提供了多种按钮样式和大小设置。通过 `btn-outline-*` 类可为按钮添加不同颜色的边框,并在鼠标悬停时产生突出效果。使用 `.btn-lg` 和 `.btn-sm` 类可以分别设置大号和小号按钮。
|
24天前
|
前端开发
Bootstrap5 按钮1
Bootstrap 5 提供了多种样式的按钮,包括基本、主要、次要、成功、信息、警告、危险、黑色、浅色和链接按钮。这些按钮样式可以通过添加不同的类应用于 `&lt;a&gt;`、`&lt;button&gt;` 或 `&lt;input&gt;` 元素。
|
4天前
|
JavaScript 前端开发
Bootstrap5 提示框
Bootstrap5 提示框是鼠标悬停时显示的小弹窗。通过在元素上添加 `data-bs-toggle=&quot;tooltip&quot;` 和 `title` 属性来创建,并需在 JS 中调用 `tooltip()` 方法初始化。可使用 `data-bs-placement` 属性设置提示框显示位置(top、bottom、left、right)。
|
15天前
|
前端开发
Bootstrap5 卡片3
Bootstrap 5 提供了多种背景颜色的卡片样式,包括基础、主要、成功、信息、警告、危险、次要、黑色和浅色卡片。通过添加相应的类(如 .bg-primary、.bg-success 等)可以轻松实现不同颜色的卡片效果。
|
15天前
Bootstrap5 卡片2
使用 `.card-header` 和 `.card-footer` 类可以分别为卡片创建头部和底部样式。
|
25天前
Bootstrap5 信息提示框2
通过在提示框的 `div` 中添加 `.alert-dismissible` 类,并在关闭按钮上添加 `class=&quot;btn-close&quot;` 和 `data-bs-dismiss=&quot;alert&quot;`,可以实现提示框的关闭功能。