如何在 Bootstrap 中创建可忽略的警报?
警报是 Bootstrap 库中一个非常重要的组件。它们用于向用户显示任何消息,例如提交的表单、发送 OTP 或在表单中输入错误的输入。换句话说,警报用于根据用户与网站的交互向用户提供反馈消息。
在本文中,我们将学习如何使用引导库创建可关闭的警报。可解除警报使我们的网站像一个现代网站,我们可以在阅读后解除警报。我们需要通过在我们的 HTML 页面中包含已编译的 Bootstrap JavaScript 来加载警报插件。
我们可以添加关闭按钮并使用.alert-dismissible类,它在警报右侧添加额外的填充并定位关闭按钮。在关闭按钮上,我们使用触发 JavaScript 功能的data-bs-dismiss=”alert”属性。此处建议使用元素,以便在所有设备上保持正确的行为。我们可以使用.fade和.show类在警报被解除时为警报设置动画。
句法:
Alert!This is a dismissable alert
例子:
HTML
Dismissible Alert
Alert!
This is a dismissable
alert that can be dismissed after
clicking on the close button.
This is some page text.
输出: