在 Foundation 框架中，您可以使用“提示框”（Alert）组件来传达成功、警告、失败或信息等消息。 提示框会自动适应其容器的宽度。

基本用法：

<div data-alert class="alert-box">
  这是一个标准的提示框。
  <a href="#" class="close">&times;</a>
</div>

不同类型的提示框：

您可以通过添加不同的类来改变提示框的外观：

<div data-alert class="alert-box success radius">
  这是一个成功提示框，带有圆角。
  <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box warning round">
  这是一个警告提示框，带有圆角。
  <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box info radius">
  这是一个信息提示框，带有圆角。
  <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box alert round">
  这是一个警告提示框，带有圆角。
  <a href="#" class="close">&times;</a>
</div>

<div data-alert class="alert-box secondary">
  这是一个次要提示框。
  <a href="#" class="close">&times;</a>
</div>

可关闭的提示框：

要创建可关闭的提示框，可以使用 data-closable 属性，并添加关闭按钮：

<div class="callout alert" data-closable>
  <h5>这是一个重要提示！</h5>
  <p>阅读完毕后，点击右上角的关闭按钮以关闭此提示框。</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

在上述示例中，data-closable 属性使提示框可关闭，data-close 属性与关闭按钮关联，以便在点击时关闭提示框。

自定义样式：

您可以使用 Sass 变量来定制提示框的样式，例如调整背景颜色、边框样式、内边距等。 详细的 Sass 变量和混合宏可在官方文档中找到。

有关更多信息和示例，请参阅 Foundation 官方文档中的提示框部分。 citeturn0search1