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

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

• 1 警告框样式
• • 1、基础样式
  • 2、内部超连接颜色
  • 3、额外附加信息
• 2 警告框组件
• • 1、使用`data-dismiss="alert"`
  • 2、使用脚本

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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！