Bootstrap 警告
本章將講解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用戶(hù)提供了一種定義消息樣式的方式。它們?yōu)榈湫偷挠脩?hù)操作提供了上下文信息反饋。
您可以為警告框添加一個(gè)可選的關(guān)閉按鈕。為了創(chuàng)建一個(gè)內(nèi)聯(lián)的可取消的警告框,請(qǐng)使用 警告(Alerts) jQuery 插件。
您可以通過(guò)創(chuàng)建一個(gè) <div>,并向其添加一個(gè) .alert class 和四個(gè)上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來(lái)添加一個(gè)基本的警告框。下面的實(shí)例演示了這點(diǎn):
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 警告(Alerts)</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-success">成功!很好地完成了提交。</div> <div class="alert alert-info">信息!請(qǐng)注意這個(gè)信息。</div> <div class="alert alert-warning">警告!請(qǐng)不要提交。</div> <div class="alert alert-danger">錯(cuò)誤!請(qǐng)進(jìn)行一些更改。</div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

可取消的警告(Dismissal Alerts)
創(chuàng)建一個(gè)可取消的警告(Dismissal Alert)步驟如下:
通過(guò)創(chuàng)建一個(gè) <div>,并向其添加一個(gè) .alert class 和四個(gè)上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來(lái)添加一個(gè)基本的警告框。
同時(shí)向上面的 <div> class 添加可選的 .alert-dismissable。
添加一個(gè)關(guān)閉按鈕。
下面的實(shí)例演示了這點(diǎn):
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 可取消的警告(Dismissal Alerts)</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-success alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 成功!很好地完成了提交。 </div> <div class="alert alert-info alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 信息!請(qǐng)注意這個(gè)信息。 </div> <div class="alert alert-warning alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 警告!請(qǐng)不要提交。 </div> <div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button> 錯(cuò)誤!請(qǐng)進(jìn)行一些更改。 </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
請(qǐng)確保使用帶有 data-dismiss="alert" data 屬性的 <button> 元素。
結(jié)果如下所示:

警告(Alerts)中的鏈接
在警告(Alerts)中創(chuàng)建鏈接的步驟如下:
通過(guò)創(chuàng)建一個(gè) <div>,并向其添加一個(gè) .alert class 和四個(gè)上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,來(lái)添加一個(gè)基本的警告框。
使用 .alert-link 實(shí)體類(lèi)來(lái)快速提供帶有匹配顏色的鏈接。
實(shí)例
<!DOCTYPE html> <html> <head> <title>Bootstrap 實(shí)例 - 警告(Alerts)中的鏈接</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="alert alert-success"> <a href="#" class="alert-link">成功!很好地完成了提交。</a> </div> <div class="alert alert-info"> <a href="#" class="alert-link">信息!請(qǐng)注意這個(gè)信息。</a> </div> <div class="alert alert-warning"> <a href="#" class="alert-link">警告!請(qǐng)不要提交。</a> </div> <div class="alert alert-danger"> <a href="#" class="alert-link">錯(cuò)誤!請(qǐng)進(jìn)行一些更改。</a> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例
結(jié)果如下所示:
