4.9、Bootstrap V4自学之路------组件---提示

为什么80%的码农都做不了架构师？>>>   

示例

Alert对任何长度的文本都可用，同时还可以视情况添加“抹除”按钮。为了适当的样式，必须使用下文中四个类中的一个（例如，.alert-success）。对于行内的抹除，请使用alerts jQuery 插件。

<div class="alert alert-success" role="alert">
  <strong>做得好！</strong> 你成功地读了这个重要的警告信息。
</div>
<div class="alert alert-info" role="alert">
  <strong>注意！!</strong> 这种警告需要你的注意，但它并不重要。
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 更好的检查自己，你不太好。
</div>
<div class="alert alert-danger" role="alert">
  <strong>哦突然！</strong> 改变一些事情，并尝试再次提交。
</div>

链接颜色

在一条alert中，使用.alert-link实用工具类可以快速提供匹配的着色链接。

<div class="alert alert-success" role="alert">
  <strong>做得好！</strong> 你成功地读了<a href="#" class="alert-link">这个重要的警告信息。</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>抬头！</strong>这种 <a href="#" class="alert-link">警告需要你的注意</a>，但它并不重要。
</div>
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 更好的检查自己，你<a href="#" class="alert-link">不太好。</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>哦突然！/strong> <a href="#" class="alert-link">改变一些事情，</a> 并尝试再次提交。
</div>

PS：注意  .alert-link是加在<a>标签中的。

抹除

使用提示JavaScript插件，就可能需要抹除任何内联alert。下面是操作步骤：

• 确保你已经载入alert插件，或者已经载入编译过的Bootstrap。

• 添加抹除按钮，以及.alert-dismissible类。它会在提示的右边添加额外的内填充，并放置.close按钮。

• 在这个抹除按钮上，添加data-dismiss="alert"属性，它会触发JavaScript功能。确保使用<button>元素，从而在所有设备上获得一致的行为。

• 为了在抹除它们时让提示动画起来，确保旋转了.fade和.in类。

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

PS：现在越来越感觉  class="sr-only" 是一个很赞的东西了！

JavaScript行为

触发器

通过JavaScript启用一条alert的抹除：

$(".alert").alert()

或者在alert内部的按钮上添加一个data属性，data-dismiss="alert"

PS:关闭这个按钮，它将会在DOM中移除。

方法

添加

<div class="alert alert-warning alert-dismissible fade in" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>

<button type="button" onclick="test_alert()">TEST_01</button>

<script type="text/javascript">
  function test_alert(){
    $(".alert").alert("close");
  }
</script>

事件

Bootstrap的alert插件为alert相关的回调函数提供了事件接口。

事件	描述
close.bs.alert	当调用close方法时，就会立即触发该事件
closed.bs.alert	当提示被关闭时（需要等待CSS过渡完成），会触发该事件

$('#myAlert').on('closed.bs.alert', function () {
   // do something…
})

这是个方法我觉得以后一定会用到。

转载于:https://my.oschina.net/asktao/blog/646742