1. WIKI教程
2. 学习Bootstrap
3. Bootstrap - 警报( Alerts)

Bootstrap - 警报( Alerts)

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

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

您可以通过创建包装器

以下示例演示了这一点 -

<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>

请务必将元素与data-dismiss = "alert"数据属性一起使用。

新页面打开

警报中的链接

获取警报中的链接 -

• 通过创建包装器

  并添加.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>

新页面打开