Bootstrap5 信息提示框

Bootstrap 5 可以很容易實(shí)現(xiàn)信息提示框。

提示框可以使用 .alert 類, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 類來實(shí)現(xiàn):

實(shí)例

<
div

class
=
"
alert alert-success
"
>

<
strong
>
成功!
strong
>
指定操作成功提示信息。
div
>

嘗試一下 ?

提示框添加鏈接

提示框中在鏈接的標(biāo)簽上添加 alert-link 類來設(shè)置匹配提示框顏色的鏈接：

實(shí)例

<
div

class
=
"
alert alert-success
"
>

<
strong
>
成功!
strong
>
你應(yīng)該認(rèn)真閱讀
<
a

href
=
"
#
"

class
=
"
alert-link
"
>
這條信息
a
>
。
div
>

嘗試一下 ?

關(guān)閉提示框

我們可以在提示框中的 div 中添加 .alert-dismissible 類，然后在關(guān)閉按鈕的鏈接上添加 class="btn-close" 和 data-bs-dismiss="alert" 類來設(shè)置提示框的關(guān)閉操作。

實(shí)例

<
div

class
=
"
alert alert-success alert-dismissible
"
>

<
button

type
=
"
button
"

class
=
"
btn-close
"

data-bs-dismiss
=
"
alert
"
>
button
>

<
strong
>
成功!
strong
>
指定操作成功提示信息。
div
>

嘗試一下 ?

提示框動畫

.fade 和 .show 類用于設(shè)置提示框在關(guān)閉時(shí)的淡出和淡入效果：

實(shí)例

<
div

class
=
"
alert alert-danger alert-dismissible fade show
"
>

嘗試一下 ?

分享題目：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5信息提示框
文章分享：http://www.5511xx.com/article/dpghcho.html