0
点赞
收藏
分享

微信扫一扫

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="width: 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="width: 200px">
    登录成功!
    <button class="close child" >&times;</button>
</div>
<!--!! 注意框架要提前导入!不然没效果 !!-->
<script>
    $(".parent").click(function(){
        $('.child').alert('close');
    });
</script>

 

 

完.

 


本文来自博客园,作者:​​咸瑜​​​,转载请注明原文链接:​​javascript:void(0)p/14879652.html​​


举报

相关推荐

0 条评论