Latest web development tutorials

Bootstrap 警告

本章將講解警告(Alerts)以及Bootstrap 所提供的用於警告的class。 警告(Alerts)向用戶提供了一種定義消息樣式的方式。 它們為典型的用戶操作提供了上下文信息反饋。

您可以為警告框添加一個可選的關閉按鈕。 為了創建一個內聯的可取消的警告框,請使用警告(Alerts) jQuery插件

您可以通過創建一個<div>,並向其添加一個.alert class和四個上下文class(即.alert-success、.alert-info、.alert-warning、.alert-danger )之一,來添加一個基本的警告框。 下面的實例演示了這點:

實例

< div class = " alert alert-success " > 成功! 很好地完成了提交。 </ div > < div class = " alert alert-info " > 信息! 請注意這個信息。 </ div > < div class = " alert alert-warning " > 警告! 請不要提交。 </ div > < div class = " alert alert-danger " > 錯誤! 請進行一些更改。 </ div >

嘗試一下»

結果如下所示:

警告(Alerts)

可取消的警告(Dismissal Alerts)

創建一個可取消的警告(Dismissal Alert)步驟如下:

  • 通過創建一個<div>,並向其添加一個.alert class和四個上下文class(即.alert-success、.alert-info、.alert-warning、.alert-danger )之一,來添加一個基本的警告框。
  • 同時向上面的<div> class添加可選的.alert-dismissable 。
  • 添加一個關閉按鈕。

下面的實例演示了這點:

實例

< div class = " alert alert-success alert-dismissable " > < button type = " button " class = " close " data-dismiss = " alert " aria-hidden = " true " > &times; </ button > 成功! 很好地完成了提交。 </ div > < div class = " alert alert-info alert-dismissable " > < button type = " button " class = " close " data-dismiss = " alert " aria-hidden = " true " > &times; </ button > 信息! 請注意這個信息。 </ div > < div class = " alert alert-warning alert-dismissable " > < button type = " button " class = " close " data-dismiss = " alert " aria-hidden = " true " > &times; </ button > 警告! 請不要提交。 </ div > < div class = " alert alert-danger alert-dismissable " > < button type = " button " class = " close " data-dismiss = " alert " aria-hidden = " true " > &times; </ button > 錯誤! 請進行一些更改。 </ div >

請確保使用帶有data-dismiss="alert" data屬性的<button>元素。
嘗試一下»

結果如下所示:

可取消的警告(Dismissal Alerts)

警告(Alerts)中的鏈接

在警告(Alerts)中創建鏈接的步驟如下:

  • 通過創建一個<div>,並向其添加一個.alert class和四個上下文class(即.alert-success、.alert-info、.alert-warning、.alert-danger )之一,來添加一個基本的警告框。
  • 使用.alert-link實體類來快速提供帶有匹配顏色的鏈接。

實例

< div class = " alert alert-success " > < a href = " # " class = " alert-link " > 成功! 很好地完成了提交。 </ a > </ div > < div class = " alert alert-info " > < a href = " # " class = " alert-link " > 信息! 請注意這個信息。 </ a > </ div > < div class = " alert alert-warning " > < a href = " # " class = " alert-link " > 警告! 請不要提交。 </ a > </ div > < div class = " alert alert-danger " > < a href = " # " class = " alert-link " > 錯誤! 請進行一些更改。 </ a > </ div >

嘗試一下»

結果如下所示:

警告(Alerts)中的鏈接