警报（Alerts）

优质

小牛编辑

126浏览

2023-12-01

本章将讨论警报和Bootstrap为警报提供的类。警报提供了一种为用户设置消息样式的方法。它们为典型的用户操作提供上下文反馈消息。

您可以添加可选的关闭图标以发出警报。对于内联解雇，请使用Alerts jQuery插件。

您可以通过创建包装器

并添加.alert类和四个上下文类之一（例如， .alert-success, .alert-info, .alert-warning, .alert-danger ）来添加基本警报。。以下示例演示了这一点 -

<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>

解雇警报

建立dismissal alert

通过创建包装器
并添加.alert类和四个上下文类之一（例如， .alert-success, .alert-info, .alert-warning, .alert-danger ）来添加基本警报
还可以在上面的“div”类中添加可选的.alert-dismissable 。
添加关闭按钮。

以下示例演示了这一点 -

<div class = "alert alert-success alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
   Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
   Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
   Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
   <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
      ×
   </button>
   Error ! Change few things.
</div>

请务必将

警报中的链接

获取警报中的链接 -

通过创建包装器
并添加.alert类和四个上下文类之一（例如， .alert-success, .alert-info, .alert-warning, .alert-danger ）来添加基本警报
使用.alert-link实用程序类可以在任何警报中快速提供匹配的彩色链接。

<div class = "alert alert-success">
   <a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
   <a href = "#" class = "alert-link">Info! take this info.</a>
</div>
<div class = "alert alert-warning">
   <a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
   <a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>