bootstrap4|信息提示框

最新推荐文章于 2024-12-07 07:30:00 发布

原创最新推荐文章于 2024-12-07 07:30:00 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap4 #信息提示框

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Bootstrap 4中使用不同类型的提示框，包括成功、信息、警告、错误等样式，以及如何添加链接和关闭功能，实现淡入淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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">&times;</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">&times;</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">&times;</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">&times;</button>
</div>
</body>
</html>

浏览器结果：