入门 CSS 警报默认值

CSS 警报是一种在网站或应用中用于提醒用户的重要信息或警告的方式。在 CSS 中，可以使用默认的警报样式，这些样式可以很容易地应用到网站或应用中。

使用警报

在使用 CSS 警报之前，需要了解不同的警报类型，以及它们在网站或应用中的用途。

成功警报

成功警报用于在操作成功时提供反馈。它们通常是绿色的，并带有图标和文本。

<div class="alert alert-success" role="alert">
  <i class="fa fa-check-circle"></i> 操作成功!
</div>

信息警报

信息警报用于提供有用的信息，如提示用户输入正确的格式或提供其他有用的信息。它们通常是蓝色的，并带有图标和文本。

<div class="alert alert-info" role="alert">
  <i class="fa fa-info-circle"></i> 请您注意!
</div>

警告警报

警告警报用于提醒用户某些操作可能会导致问题，并请求确认。它们通常是黄色的，并带有图标和文本。

<div class="alert alert-warning" role="alert">
  <i class="fa fa-exclamation-triangle"></i> 确定要删除吗？
</div>

错误警报

错误警报用于提醒用户出现错误，如无效的输入或错误的操作。它们通常是红色的，并带有图标和文本。

<div class="alert alert-danger" role="alert">
  <i class="fa fa-times-circle"></i> 输入无效!
</div>

应用警报

使用警报非常简单。只需要将上述代码复制到您网站或应用程序的 HTML 文件中，并将文本和图标更改为所需内容。

默认情况下，alert 类将应用于警报。该类具有预定义的 CSS 样式，可以轻松扩展或自定义。

例如，您可以添加以下 CSS 样式，以使警报具有圆角边框和较小的字体：

.alert {
  border-radius: 5px;
  font-size: 14px;
}

通过使用 alert 类，您可以向用户提供有用的反馈和信息，并实现更好的用户体验。