Bootstrap组件——alert（警告栏）

警告框(alert)

简介

使用少量可用且灵活的警报消息为典型的用户操作提供上下文反馈消息。

**常见的：**长这个样子，是不是很熟悉。

其实不是的，它就是一个警告栏目。

Bootstrap 的alert

它提供了一大堆通过背景和字体颜色预定义的不同功能用途的警告框。
语法：
里面空荡荡的啥都没有。

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>

使用方法

通过JQuery的alert插件来实现相关的逻辑功能。

向辅助技术传达意义

使用颜色来增加意义只提供了一种视觉指示，而不会传达给辅助技术(如屏幕阅读器)的用户。确保用颜色表示的信息对内容本身(例如可见文本)是明显的，或者通过其他方法包括，例如使用.sr-only类隐藏的附加文本。

链接

例如：

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

高级内容

我们可以让我们alert看起来更好看。
有题目，有段落，有分割线。
就像这样：

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

关闭我们的alert

使用alert JavaScript插件，可以内联关闭alert。方法如下:

• 确保您已经加载了alert插件，或编译的引导JavaScript。
• 如果从源代码构建JavaScript，则需要util.js。编译后的版本包括这个。
• 添加一个cancel按钮和.alert- dis类，该类在警报的右侧添加额外的填充，并定位.close按钮。
• 在dismiss按钮上，添加data-dismiss="alert"属性，该属性触发JavaScript功能。确保使用元素在所有设备上进行正确的行为。
• 要在取消警报时激活警报，请确保添加.fade和.show类。

废话不多说，直接看例子：

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

JavaScript 行为

触发器：

通过js来启动alert的关闭。

$('.alert').alert()

通过修改data 属性来关闭

data-dismiss="alert"

方法

暂时不看了…