14. BootStrap * 组件

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

使用.alert设置警告框基础样式，并使用.alert-*设置警告框颜色;

<!-- 使用.alert设置警告框基础样式，并使用.alert-*设置警告框颜色; -->
<div class="alert w-25 alert-success">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-primary">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-secondary">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-danger">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-warning">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-info">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-light">年年花相似，岁岁人不同。</div>
<div class="alert w-25 alert-dark">年年花相似，岁岁人不同。</div>

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

<!-- 在使用了警告框的元素内部设置超链接.alert-link,会搭配相应的颜色; -->
<div class="alert w-25 alert-success text-center">年年花相似，岁岁人不同。 <br>
    <a href="https://www.baidu.com/">一个人最大的挑战，是如何去克服自己的缺点。 </a>
</div>

<div class="alert w-25 alert-success text-center">年年花相似，岁岁人不同。 <br>
    <a href="https://www.baidu.com/">不要问，不要等，不要犹豫，不要回头。</a>
</div>

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

<!-- 使用.alert-heading 可以设置继承颜色,alert本身也可以设置水平线段落等; -->
<div class="alert w-25 alert-success text-center ">年年花相似，岁岁人不同。 <br>
    <hr>
    <a class="alert-heading" href="https://www.baidu.com/">一个人最大的挑战，是如何去克服自己的缺点。 </a>
</div>

警告框组件在组件一栏，可以和浏览器交互功能，警告框的关闭效果，通过data-dismiss=" alert”实现父元素关闭;

.fade和.show实现了关闭后的淡出效果; 【很难看得出 太快了】

【步骤：我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。】

<!-- 警告框组件在组件一栏，可以和浏览器交互功能，警告框的关闭效果，通过data-dismiss=" alert”实现父元素关闭;
.fade和.show实现了关闭后的淡出效果; 【一点点 太快了】 -->
<div class="alert alert-success text-center fade show "  style=" 200px">
    登录成功！
    <button class="close" data-dismiss = "alert">&times;</button>
</div>

.alert-dismissible从调试器可以看到是padding-right:4rem;

<无>

真正实现关闭效果的只有data-dismiss=" alert” ;

直接使用脚本的方式也可以关闭;

<!-- 直接使用脚本的方式也可以关闭;【Jq已经写好了 方法是： alert() 参数是 "close" 即可！ 】-->
<div class="alert alert-success text-center fade show parent"  style=" 200px">
    登录成功！
    <button class="close child" >&times;</button>
</div>
<!--!! 注意框架要提前导入！不然没效果 !!-->
<script>
    $(".parent").click(function(){
        $('.child').alert('close');
    });
</script>

完.