Bootstrap/docs/4.5/components/alerts

来自菜鸟教程
跳转至：导航、​搜索

在GitHub上查看

快讯

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

例子

警报适用于任何长度的文本,以及可选的关闭按钮。 为使样式正确,请使用以下八种之一 需要 上下文类（例如, .alert-success ). 对于内联解雇,请使用 提醒jQuery插件 . 

<div class="alert alert-primary" role="alert"> 一个简单的主要警报-检查一下！ </div>
<div class="alert alert-secondary" role="alert"> 一个简单的辅助警报-检查一下！ </div>
<div class="alert alert-success" role="alert"> 一个简单的成功警报-检查一下！ </div>
<div class="alert alert-danger" role="alert"> 一个简单的危险警报-检查一下！ </div>
<div class="alert alert-warning" role="alert"> 一个简单的警告警报-检查一下！ </div>
<div class="alert alert-info" role="alert"> 一个简单的信息警报-检查一下！ </div>
<div class="alert alert-light" role="alert"> 一个简单的灯光警报-检查一下！ </div>
<div class="alert alert-dark" role="alert"> 一个简单的黑暗警报-检查一下！ </div>
向辅助技术传达意义

使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。


链接颜色

使用 .alert-link 实用程序类,可在任何警报中快速提供匹配的彩色链接。 

<div class="alert alert-primary" role="alert"> 一个简单的主要警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-secondary" role="alert"> 一个简单的二级警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-success" role="alert"> 一个简单的成功警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-danger" role="alert"> 一个简单的危险警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-warning" role="alert"> 一个简单的警告警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-info" role="alert"> 一个简单的信息警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-light" role="alert"> 一个简单的灯光警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>
<div class="alert alert-dark" role="alert"> 一个简单的黑暗警报 <a class="alert-link" href="#"> 一个示例链接 </a> 。如果需要,请单击它。 </div>

附加内容

警报还可以包含其他HTML元素,例如标题,段落和分隔符。 

<div class="alert alert-success" role="alert">
<h4 class="alert-heading"> 做得好！ </h4>
<p> 是的,您成功阅读了此重要警报消息。  此示例文本将运行更长的时间,以便您可以查看警报中的间距如何与此类内容一起使用。 </p>
<hr/>
<p class="mb-0"> 每当需要时,请确保使用margin实用工具使事情保持整洁。 </p>
</div>

解雇

使用警报JavaScript插件,可以内嵌任何警报。 这是如何做：

  • 确保已加载警报插件或已编译的Bootstrap JavaScript。
  • 如果您是从源代码构建JavaScript, 要求 util.js 。编译的版本包括此。
  • 添加一个关闭按钮,然后 .alert-dismissible 类,它在警报的右侧添加了额外的填充,并将 .close 按钮。
  • 在关闭按钮上,添加 data-dismiss="alert" 属性,它会触发JavaScript功能。 请务必使用 <button> 元素,以在所有设备上正常运行。
  • 要在关闭警报时制作动画,请确保添加 .fade and .show 类。

您可以通过现场演示看到这一点： 

<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong> 鳄梨调味酱！ </strong> 您应该在下面的某些字段中签入。 <button aria-label="Close" class="close" data-dismiss="alert" type="button">
<span aria-hidden="true">×</span>
</button>
</div>

JavaScript行为

触发器

启用通过JavaScript消除警报的功能：

或搭配 data 按钮上的属性 在警报内 ,如上所示：

请注意,关闭警报会将其从DOM中删除。

方法

方法 描述
$().alert() 使警报监听具有以下内容的后代元素的点击事件 data-dismiss="alert" 属性。 （使用data-api的自动初始化时不需要。）
$().alert('close') 通过从DOM中删除警报来关闭警报。 如果 .fade and .show 元素上存在类,警报将在删除之前淡出。
$().alert('dispose') 破坏元素的警报。

活动

Bootstrap的警报插件公开了一些事件,可用于警报功能。

事件 描述
close.bs.alert 当 close 实例方法被调用。
closed.bs.alert 警报已关闭时将触发此事件（将等待CSS转换完成）​​。
取自“https://cainiaojiaocheng.com/index.php?title=Bootstrap/docs/4.5/components/alerts&oldid=69”
Powered by MediaWiki