创新互联Bootstrap5教程：Bootstrap5消息弹窗(Toasts)
Bootstrap5 消息弹窗(Toasts)
Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。
公司主营业务：成都网站设计、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出姑苏免费做网站回馈大家。
弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。
弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。
如何创建弹窗
要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。
注意：弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在
实例
<
div
class
=
"
toast show
"
>
<
div
class
=
"
toast-header
"
>
弹窗标题
<
button
type
=
"
button
"
class
=
"
btn-close
"
data-bs-dismiss
=
"
toast
"
>
button
>
div
>
<
div
class
=
"
toast-body
"
>
这是一个Bootstrap 5弹窗示例。
div
>
div
>
尝试一下 »
要通过点击按钮显示弹窗，您需要使用 JavaScript 对其进行初始化：通过 ID 获取指定元素的点击事件并调用 toast() 方法。
当点击按钮时，以下代码将显示页面中的所有 toast 类：
实例
document
.
getElementById
(
"
toastbtn
"
)
.
onclick
=
function
(
)
{
var
toastElList
=
[
]
.
slice
.
call
(
document
.
querySelectorAll
(
'
.toast
'
)
)
var
toastList
=
toastElList
.
map
(
function
(
toastEl
)
{
return
new
bootstrap
.
Toast
(
toastEl
)
}
)
toastList
.
forEach
(
toast
=>
toast
.
show
(
)
)
}
尝试一下 »
将弹窗显示在右下角：
实例
<
div
class
=
"
container mt-5
"
>
<
button
class
=
"
btn btn-primary
"
onclick
=
"
showToast()
"
>
显示弹窗
button
>
div
>
<
div
class
=
"
position-fixed bottom-0 end-0 p-3
"
>
<
div
id
=
"
toast
"
class
=
"
toast
"
role
=
"
alert
"
aria-live
=
"
assertive
"
aria-atomic
=
"
true
"
>
<
div
class
=
"
toast-header
"
>
<
strong
class
=
"
me-auto
"
>
Bootstrap Toast
strong
>
<
button
type
=
"
button
"
class
=
"
btn-close
"
data-bs-dismiss
=
"
toast
"
aria-label
=
"
Close
"
>
button
>
div
>
<
div
class
=
"
toast-body
"
>
这是一个Bootstrap 5弹窗示例。
div
>
div
>
div
>
尝试一下 » 设置多个消息弹窗：
实例
<
div
aria-live
=
"
polite
"
aria-atomic
=
"
true
"
class
=
"
position-relative
"
>
<
div
class
=
"
toast-container top-0 end-0 p-3
"
>
<
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
"
>
刚刚
small
>
<
button
type
=
"
button
"
class
=
"
btn-close
"
data-bs-dismiss
=
"
toast
"
aria-label
=
"
Close
"
>
button
>
div
>
<
div
class
=
"
toast-body
"
>
这是第二个消息
div
>
div
>
<
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
>
div
>
尝试一下 »
新闻名称：创新互联Bootstrap5教程：Bootstrap5消息弹窗(Toasts)
网站路径：http://zsjierui.cn/article/djhosep.html