Foundation 提醒框

Foundation 提醒框（Alert Boxes 或 Callouts）是 ZURB Foundation 前端框架中的一个常用 UI 组件，用于显示重要提示、信息、警告或成功消息等提醒内容。

• 旧版 Foundation（例如 Foundation 5）：直接称为 Alert Boxes，使用 .alert-box 类创建，支持颜色变体如 .success（成功）、.warning（警告）、.alert（危险）、.secondary（次要）、.info 等。支持添加关闭按钮和圆角样式。
  示例代码：

  <div data-alert class="alert-box success round">
    这是一个成功的提醒消息！
    <a href="#" class="close">&times;</a>
  </div>

• 新版 Foundation 6 及以上：Alert Boxes 被合并到 Callout 组件中（Callout 更通用，可用于面板或提醒）。使用 <div class="callout"> 创建提醒框，通过添加颜色类实现不同类型：
• .primary：主要（蓝色）
• .secondary：次要（灰色）
• .success：成功（绿色）
• .warning：警告（黄色/橙色）
• .alert：危险（红色） 支持可关闭功能（结合 Close Button 和 data-closable 属性），以及大小（.small、.large）和圆角样式。 示例代码（可关闭的警告提醒）：

  <div class="callout warning" 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>

以下是一些 Foundation Callout（提醒框）在不同颜色和样式下的示例展示：

官方文档：

• Foundation 5 Alert Boxes：https://get.foundation/sites/docs-v5/components/alert_boxes.html
• Foundation 6 Callout：https://get.foundation/sites/docs/callout.html
• 中文教程示例：https://www.runoob.com/foundation/foundation-alerts.html（基于旧版）

如果您指的是其他含义的“Foundation 提醒框”（如特定版本或自定义样式），请提供更多细节！