📅 最后修改于: 2023-12-03 15:18:41.982000 🧑 作者: Mango
Primer CSS 是 Github 官方开源的 CSS 框架，它为开发者提供了一套常用的 UI 组件和样式，使得开发者可以快速构建美观的 Web 应用。
其中，Primer CSS 警报组件可以帮助开发者快速实现警报提示功能。而全宽 Flash 功能可以让警报提示更加醒目。
Primer CSS 警报组件的 HTML 结构如下：
<div class="flash flash-full">
<div class="container-lg">
<div class="flash-header">
<!-- 警报标题，可省略 -->
</div>
<div class="flash-body">
<!-- 警报内容 -->
</div>
</div>
</div>
其中，.flash-full 类可以让警报组件全宽展示。警报标题和内容分别放置在 .flash-header 和 .flash-body 中。
接下来，只需要引入 Primer CSS 的样式表，并将对应的类名加入 HTML 结构中即可使用。具体示例代码如下：
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css/dist/primer.css">
<style>
/* 自定义样式，可省略 */
</style>
</head>
<body>
<div class="flash flash-full flash-error">
<div class="container-lg">
<div class="flash-header">
<h4>警报标题</h4>
</div>
<div class="flash-body">
警报内容
</div>
</div>
</div>
</body>
</html>
在该示例中，我们使用了 .flash-error 类来显示错误类型的警报。
Primer CSS 警报全宽 Flash 功能为开发者提供了一种简单易用且美观的警报提示方式。使用时只需要引入对应的样式，并将类名加入 HTML 结构即可，非常方便快捷。