Bootstrap 5 警告框

Bootstrap 5 警报组件根据用户的操作显示预设消息。它向最终用户发送信息，例如错误、警告和确认消息。一组有限的可配置警报消息为常见的用户操作提供上下文相关的反馈。

Bootstrap 5 警报功能使用带有其他元素的默认警报框。警报框在网页上使用链接、关闭按钮和动画。

默认警报功能

我们可以通过使用 .alert 类和上下文类（如 .alert-success、.alert-info、.alert-warning、.alert-danger、.alert-primary、.alert-secondary、.alert-light 或 .alert-dark）来创建警报框。

语法

以下语法显示了网页中的基本警报框。

示例

以下示例使用具有不同上下文类的基本警报框。在这里，我们可以放置网页的短小信息。

输出

以下输出显示了基本的 Bootstrap 5 警报功能。

Bootstrap 5 关闭带链接的警报

将“ .alert-dismissible”类添加到警报容器以关闭警报消息。class = "btn-close" 和 data-bs-dismiss = "alert" 属性应用于链接或按钮元素。当我们单击叉号时，警报框消失。

要关闭警报框，请单击右侧的“x”图标。“×”是一个 HTML 实体，它不是字母“x”，而是关闭按钮的选定图标。

语法

以下语法显示了网页中的关闭警报框。

以下语法显示了网页中的带链接的警报框。

示例

以下示例显示了带有关闭按钮的基本 Bootstrap 5 警报框。在这里，我们可以在警报框中使用链接。该示例显示了一些带有链接的警报框，以及一些没有链接的警报框。“light”警报使用叉号删除。

输出

下图表示带有链接的 Bootstrap 5 关闭警报框。

动画警报框

要关闭我，请单击右侧的“x”符号。我将“淡出”。.fade 和 .show 类在关闭警报消息时创建淡入淡出效果。class = "btn-close" 和 data-bs-dismiss = "alert" 属性在 <button> 标签中使用。当我们单击叉号按钮时，警报框会以动画效果消失。

语法

以下语法显示了网页中的动画警报框。

示例

以下示例显示了动画格式的警报框。在这里，警报框显示和关闭功能使用特殊效果。

输出

以下输出显示了动画 Bootstrap 5 警报功能。

结论

Bootstrap 4 警报功能有助于为特定于元素的信息生成一个简短的区域。警报框在应用程序中提供了一个美观且用户友好的消息框。它是一个交互式用户元素，用于根据样式和有限数据解释消息。