Bootstrap4 信息提示框

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

我們注重客戶提出的每個要求，我們充分考慮每一個細節(jié)，我們積極的做好網(wǎng)站設計制作、成都網(wǎng)站設計服務，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)建站贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務客戶。 主要業(yè)務：網(wǎng)站建設,網(wǎng)站制作,網(wǎng)站設計,微信平臺小程序開發(fā),網(wǎng)站開發(fā),技術開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術開發(fā)工程師。

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

實例

<
div

class
=
"
alert alert-success
"
>

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

嘗試一下 ?

提示框添加鏈接

提示框中在鏈接的標簽上添加 alert-link 類來設置匹配提示框顏色的鏈接：

實例

<
div

class
=
"
alert alert-success
"
>

<
strong
>
成功!
strong
>
你應該認真閱讀
<
a

href
=
"
#
"

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

嘗試一下 ?

關閉提示框

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

實例

<
div

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

<
button

type
=
"
button
"

class
=
"
close
"

data-dismiss
=
"
alert
"
>
×
button
>

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

嘗試一下 ?

提示: × (×) 是 HTML 實體字符，來表示關閉操作，而不是字母 "x"。

提示框動畫

.fade 和 .show 類用于設置提示框在關閉時的淡出和淡入效果：

實例

<
div

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

嘗試一下 ?

網(wǎng)站題目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4信息提示框
網(wǎng)站地址：http://m.5511xx.com/article/ccidcdd.html