1、提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现。
<div class="alert alert-success">
<strong>成功!</strong>指定操作成功提示信息。
</div>
<div class="alert alert-info">
<strong>信息!</strong>请注意这个信息。
</div>
<div class="alert alert-warning">
<strong>警告!</strong>设置警告信息。
</div>
<div class="alert alert-danger">
<strong>错误!</strong>失败的操作。
</div>
<div class="alert alert-primary">
<strong>首选!</strong>这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
<strong>次要的!</strong>显示一些不重要的信息。
</div>
<div class="alert alert-light">
<strong>浅灰色!</strong>浅灰色提示框。
</div>
<div class="alert alert-dark">
<strong>深灰色!</strong>深灰色提示框。
</div>
2、提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接,链接的文本颜色与提示框的文本颜色一样,文本粗细font-weight:700;
<div class="alert alert-danger">
<strong>成功!</strong>你应该认真理解<a href="#" class="alert-link">这条信息</a>
</div>
3、可以在提示框中的 div 中添加 .alert-dismissable 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
<h3>关闭提示框</h3>
<div class="alert alert-dismissable alert-success">
<strong>成功!</strong>指定操作成功的信息。
<button class="close" data-dismiss="alert">×</button>
</div>
4、.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果。fade的css样式transition: opacity .15s linear;
<div class="alert alert-success alert-dismissable fade show">
<!-- fade的css样式transition: opacity .15s linear;-->
<strong>成功!</strong>指定操作成功的信息(fade)
<button class="close" data-dismiss="alert">×</button>
</div>
源代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap4信息提示框</title>
<!--width=device-width 表示宽度是设备屏幕的宽度,initial-scale=1 表示初始的缩放比例,shrink-to-fit=no
自动适应手机屏幕的宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="../../../bootstrap-4.1.3-dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="../../../bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>
<!--自定义alert类的div宽度-->
<style type="text/css">
body{width:1200px;}
.alert{width: 400px;margin-left: 200px;}
</style>
</head>
<body>
<!--提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现-->
<!--position: relative;-->
<div class="alert alert-success">
<strong>成功!</strong>指定操作成功提示信息。
</div>
<div class="alert alert-info">
<strong>信息!</strong>请注意这个信息。
</div>
<div class="alert alert-warning">
<strong>警告!</strong>设置警告信息。
</div>
<div class="alert alert-danger">
<strong>错误!</strong>失败的操作。
</div>
<div class="alert alert-primary">
<strong>首选!</strong>这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
<strong>次要的!</strong>显示一些不重要的信息。
</div>
<div class="alert alert-light">
<strong>浅灰色!</strong>浅灰色提示框。
</div>
<div class="alert alert-dark">
<strong>深灰色!</strong>深灰色提示框。
</div>
<!--提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接-->
<!--font-weight: 700;-->
<div class="alert alert-danger">
<strong>成功!</strong>你应该认真理解<a href="#" class="alert-link">这条信息</a>
</div>
<!--可以在提示框中的 div 中添加 .alert-dismissable 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。-->
<h3>关闭提示框</h3>
<div class="alert alert-dismissable alert-success">
<strong>成功!</strong>指定操作成功的信息。
<button class="close" data-dismiss="alert">×</button>
</div>
<!--.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果-->
<div class="alert alert-success alert-dismissable fade show">
<!-- fade的css样式transition: opacity .15s linear;-->
<strong>成功!</strong>指定操作成功的信息(fade)
<button class="close" data-dismiss="alert">×</button>
</div>
</body>
</html>
浏览器结果:
所需bootstrap-4.1.3-dist的压缩包下载:
链接: https://pan.baidu.com/s/1lGFoaifVjGER-BBfnbiWAA 提取码: 6w6w