BootStrap 警告提示框

内容选自李炎恢的Bootstrap v4.x教程笔记

一．警告框样式

1. 使用.alert 设置警告框基础样式，并使用.alert-success 设置警告框颜色；

<div class="alert alert-success">Bootstrap4.x</div>
<div class="alert alert-primary">Bootstrap4.x</div>
<div class="alert alert-secondary">Bootstrap4.x</div>
<div class="alert alert-danger">Bootstrap4.x</div>
<div class="alert alert-warning">Bootstrap4.x</div>
<div class="alert alert-info">Bootstrap4.x</div>
<div class="alert alert-light">Bootstrap4.x</div>
<div class="alert alert-dark">Bootstrap4.x</div>

2. 在使用了警告框的元素内部设置超链接.alert-link，会搭配相应的颜色；

<div class="alert alert-success">
　　Bootstrap4.x <a href="#" class="alert-link">V4.3</a>
</div>

3. 使用.alert-heading 可以设置继承颜色，alert 本身也可以设置水平线段落等；

<div class="alert alert-success">
　　<h4 class="alert-heading">Bootstrap4.x</h4>
　　<hr>
　　<p>这是一个前端工具：Bootstrap4.x</p>
</div>

二．警告框组件

1. 在组件一栏，可以和浏览器实现交互功能，比如警告框的关闭效果；

<div class="alert alert-warning alert-dismissible fade show">
　　警告：请理解更新你的系统~
　　<button class="close" data-dismiss="alert">&times;</button>
</div>

2. 解释一下手册给的案例：data-dismiss="alert"实现父元素关闭；
3. .fade .show 实现了关闭后的淡出效果；
4. .alert-dismissible 从调试器可以看到是 padding-right:4rem;
5. 也就是说，真正实现关闭效果的只有 data-dismiss="alert"；
6. 直接使用脚本的方式也可以关闭：

<div class="alert alert-warning alert-dismissible fade show updatesystem">
　　警告：请理解更新你的系统~
　　<button class="close updateclose">&times;</button>
</div>

<script>
　　$('.updateclose').click(function () {
　　　　$('.updatesystem').alert('close');
　　});
</script>

PS：组件会提供一些更加深入的脚本使用方法，包括各种方法和事件。这些内容
常用度有些较低（较高的会说），但难度骤然升高导致学员理解力卡住。所以，这部分
内容有选择性的讲解