手册

Foundation 5 教程 Foundation 起步 Foundation 文本 Foundation 表格 Foundation 按钮 Foundation 按钮组 Foundation 图标 Foundation 标签 Foundation 提醒框 Foundation 进度条 Foundation 面板 Foundation 图片 Foundation 下拉菜单 Foundation 折叠列表 Foundation 列表 Foundation 选项卡 Foundation 分页 Foundation 价格表 Foundation 顶部导航栏 Foundation 侧边栏 Foundation 滑动导航(Off-Canvas) Foundation Magellan Foundation 表单 Foundation 输入框尺寸 Foundation 开关 Foundation 滑块 Foundation 提示框 Foundation 模态框 Foundation Joyride Foundation 均衡器

Foundation 网格

Foundation 网格系统 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格 - 大型设备 Foundation 块状网格 Foundation 网格实例

Foundation 参考手册

首页大前端 Foundation Foundation 中文手册

Foundation 提醒框

阅读22181

更新时间2022-04-14

Foundation 标签

Foundation 进度条

Foundation 可以很简单的创建一个提醒框：

提醒框可以使用 .alert-box 类创建, 可以添加可选的类： .secondary, .success, .info, .warning 或 .alert:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>提醒框</h2>
  <div data-alert class="alert-box">
    This is a default alert box.
  </div>

  <div data-alert class="alert-box secondary">
    This is a secondary alert box.
  </div>

  <div data-alert class="alert-box success">
    <strong>Success!</strong> This alert box indicates a successful or positive action.
  </div>

  <div data-alert class="alert-box info">
      <strong>Info!</strong> This alert box indicates a neutral informative change or action.
  </div>

  <div data-alert class="alert-box warning">
      <strong>Warning!</strong> This alert box indicates a warning that might need attention.
  </div>

  <div data-alert class="alert-box alert">
      <strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

	提醒框的宽度为容器的 100%。

圆角提醒框

.radius 和 .round 类用于为提醒框添加圆角：

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角提醒框</h2>
  <div data-alert class="alert-box">
    Default Alert box
  </div>

  <div data-alert class="alert-box radius">
    Default Alert box with a radius.
  </div>

  <div data-alert class="alert-box secondary radius">
    Secondy Alert box with a radius.
  </div>

  <div data-alert class="alert-box success radius">
    <strong>Success!</strong> Alert box with a radius.
  </div>

  <div data-alert class="alert-box info round">
      <strong>Info!</strong> Alert box that is rounded.
  </div>

  <div data-alert class="alert-box warning round">
      <strong>Warning!</strong> Alert box that is rounded.
  </div>

  <div data-alert class="alert-box alert round">
      <strong>Alert!</strong> Alert box that is rounded.
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

关闭提醒框

要关闭提醒框，可以在连接或按钮元素上添加 class="close" 类，并初始化 Foundation JS:

实例

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>关闭提醒框</h2>
  <div data-alert class="alert-box">
    This is a default alert box.
    <a href="#" class="close">×</a>
  </div>

  <div data-alert class="alert-box secondary">
    This is a secondary alert box.
    <a href="#" class="close">×</a>
  </div>

  <div data-alert class="alert-box success">
    <strong>Success!</strong> This alert box indicates a successful or positive action.
    <a href="#" class="close">×</a>
  </div>

  <div data-alert class="alert-box info">
    <strong>Info!</strong> This alert box indicates a neutral informative change or action.
    <a href="#" class="close">×</a>
 </div>

  <div data-alert class="alert-box warning">
    <strong>Warning!</strong> This alert box indicates a warning that might need attention.
    <a href="#" class="close">×</a>
  </div>

  <div data-alert class="alert-box alert">
    <strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
    <a href="#" class="close">×</a>
  </div>
</div>

<script>
// 创始化 Foundation JS 
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

	× (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"。

Foundation 标签

Foundation 进度条