Bootstrap 警告(Alerts)
Bootstrap 警告(Alerts)
Bootstrap 警告(Alerts)是帮助用户获取展示在页面顶部的重要信息的一种工具,用户可以自定义警告框的颜色、内容和样式,以满足特定需求。本文主要介绍如何使用 Bootstrap 警告。
基础语法
Bootstrap 警告使用以下 HTML 结构:
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
其中,alert
类是必需的,同时 alert-*
类可以使用多个。常见的 alert-*
类有:
alert-primary
:蓝色警告alert-secondary
:灰色警告alert-success
:绿色警告alert-danger
:红色警告alert-warning
:黄色警告alert-info
:淡蓝色警告alert-light
:浅灰色警告alert-dark
:深灰色警告
role="alert"
用于提醒屏幕阅读器警告框的存在。
插入文本和标题
可插入文本、标题等内容:
<div class="alert alert-primary" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
在警告框中,任何 HTML 元素都可以插入。
可关闭的警告框
可以想必关闭警告框的:
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
alert-dismissible
类将创建一个包括关闭 button
的警告框。btn-close
类是用于关闭警告框的按钮,data-bs-dismiss="alert"
标记用于关闭警告框的触发器。
加上 .fade
和 .show
两个类可以使得警告框有淡入淡出效果。
链接警告框
可以将警告框变成链接:
<a href="#" class="alert alert-warning" role="alert">
This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</a>
使用 alert-link
类可以将警告框内文字链接起来。
自定义警告框
用户可以通过在 .alert
中添加 .bg-*
或 .text-*
类来自定义警告框的背景颜色和文本颜色。用户可以使用 .alert-heading
类自定义标题。
<div class="alert bg-light text-dark" role="alert">
<h4 class="alert-heading">Background color</h4>
This alert's background color is light (gray). You can set the background color of the alert according to your needs.
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
总结
Bootstrap 警告提供了一种在页面顶部获得重要信息的有效方式。Bootstrap 警告有多种颜色和样式,可以帮助用户有效地展示不同类型的警示信息。用户可以使用 Bootstrap 警告的基本语法以及自定义警告框的语法,应对不同的应用场景。