上一节:
下一节:

  Bootstrap 警报框

  • 定义和使用

    Bootstrap 提供了一种创建预定义警报框的简便方法：
    警报框使用 .alert 类创建，随后是上下文类之一。
    .alert-success，.alert-info，.alert-warning，.alert-danger，.alert-primary，.alert-secondary，.alert-light 或.alert-dark： 
    <div class="container">
   <h2>Alerts</h2>
   <p>使用.alert类和其后的上下文颜色类创建警报框：</p>
   <div class="alert alert-success">
      <strong>Success!</strong> 这个是.alert-success
   </div>
   <div class="alert alert-info">
      <strong>Info!</strong> 这个是.alert-info
   </div>
   <div class="alert alert-warning">
      <strong>Warning!</strong> 这个是.alert-warning
   </div>
   <div class="alert alert-danger">
      <strong>Danger!</strong> 这个是.alert-danger
   </div>
   <div class="alert alert-primary">
      <strong>Primary!</strong> 这个是.alert-primary
   </div>
   <div class="alert alert-secondary">
       <strong>Secondary!</strong> 这个是.alert-secondary
   </div>
   <div class="alert alert-dark">
       <strong>Dark!</strong> 这个是.alert-dark
   </div>
   <div class="alert alert-light">
       <strong>Light!</strong> 这个是.alert-light
   </div>
</div>
    尝试一下
    输出结果如下：
    Success! 这个是.alert-success
    Info! 这个是.alert-success
    Warning! 这个是.alert-success
    Danger! 这个是.alert-success
    Primary! 这个是.alert-success
      Secondary! 这个是.alert-success
      Dark! 这个是.alert-success
      Light! 这个是.alert-success

  • 警报框链接

    将 .alert-link 类添加到警报框中的任何链接，以创建“匹配的彩色链接”： 
    <div class="container">
   <h2>警报框链接</h2>
   <div class="alert alert-success">
      <strong>Success!</strong> 您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-info">
      <strong>Info!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-warning">
      <strong>Warning!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-danger">
      <strong>Danger!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-primary">
      <strong>Primary!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-secondary">
       <strong>Secondary!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-dark">
       <strong>Dark!</strong> 您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
   <div class="alert alert-light">
       <strong>Light!</strong>  您应该<a href="#" class="alert-link">阅读此消息。</a>
   </div>
</div>
    尝试一下
    输出结果如下：
    Success! 你应该 阅读此消息。.
    Info! 你应该 阅读此消息。.
    Warning! 你应该 阅读此消息。.
    Danger! 你应该 阅读此消息。.
    Primary! 你应该 阅读此消息。.
    Secondary! 你应该 阅读此消息。.
    Dark! 你应该 阅读此消息。.
    Light! 你应该 阅读此消息。.

  • 关闭警报框

    要关闭警报消息，请将 .alert-dismissible 类添加到警报容器；然后将 class="close" 和 data-dismiss="alert" 添加到链接或按钮元素（单击此按钮时，警告框将消失）。 
    <div class="container">
   <div class="alert alert-success alert-dismissible">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <strong>Success!</strong> 此警报框可能指示成功或积极的行动。
   </div>
</div>
    尝试一下
    Success! 此警报框可能指示成功或积极的行动。
    示例中的×是HTML实体，是关闭按钮的首选图标，而不是字母“x”。
    有关所有HTML实体的列表，请访问我们的HTML实体参考。

  • 动画警报框

    .fade 和 .show 类在关闭警报消息时会增加褪色效果： 
    <div class="container">
 <div class="alert alert-success alert-dismissible fade show">
   <button type="button" class="close" data-dismiss="alert">×</button>
   <strong>Success!</strong> 关闭此警报框带有动画的。.
 </div>
</div>
    尝试一下
    Success! 关闭此警报框带有动画的。
    有关更多的警报框知识，请阅读我们的警报框参考手册
上一节:
下一节: