4 Bootstrap4组件——警告提示框（alert）

警告提示框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈消息和提示。

1 警告框样式

1、基础样式

警告框是一组颜色控件（共八个颜色样式），可用于任何长度的文本，以及可选的关闭按钮，系统提供8个可用的正确的样式如，（.alert-success）

<div class="alert alert-primary" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-secondary" role="alert">
  Bootstrap v4.0
div>
<div class="alert alert-success" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-danger" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-warning" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-info" role="alert">
 Bootstrap v4.0
div>
<div class="alert alert-light" role="alert">
Bootstrap v4.0
div>
<div class="alert alert-dark" role="alert">
 Bootstrap v4.0
div>

2、内部超连接颜色

使用 .alert-link 类可以为带颜色的警告文本框中的链接加上合适的颜色（BootStrap已经内置了相应的颜色解决方案，会自动对应有一个优化后的链接颜色方案）。

<div class="alert alert-primary" role="alert">
 <a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-secondary" role="alert">
  <a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-light" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>
<div class="alert alert-dark" role="alert">
<a href="#" class="alert-link">Bootstrap v4.0a>
div>

3、额外附加信息

警告框里面还可以包含其他HTML元素，如标题、段落和水平分隔符。

<div class="alert alert-primary" role="alert">
 	<h4 class="alert-heading">Bootstrap V4.0h4>
 	<hr>
 	<p>这是一个前端工具：Bootstrap V4.0p>
div>

2 警告框组件

使用.alert结合JavaScript，可以实现警报效果，贴在页面上，并可以自由关闭，其要点如下：

• 确保你正确加载了.alert警报组件，或者是编译后的 Bootstrap JavaScript代码组。
• 如果你要自行编译JavaScript组件，请将必须的 util.js包括进去。
• 可以在右上角定义一个.close关闭按钮效果，则需要在容器中引用 .alert-dismissible 类。
• 警告按钮上要增加data-dismiss="alert" 触发 JavaScript 动作，同时使用元素，以确保在所有设备上都能获得正确的行为响应。
• 要在关闭警报时生成警报提示，请确保添加.fade和.show样式。

1、使用data-dismiss="alert"

 <div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>警告：strong> 认真学习Bootstrap V4.0……
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×span>
  button>
div>

注意：

• data-dismiss="alert"实现父元素关闭
• .fade .show实现了关闭后淡出效果

2、使用脚本

直接使用脚本也可以关闭，代码如下：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>警告：strong> 认真学习Bootstrap V4.0……
  <button type="button" class="close" >
    <span aria-hidden="true">×span>
  button>
div>

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