Foundation 提醒框
Foundation 可以添加 data-alert 属性和 .alert-box CSS 类创建一个提醒框
提醒框的宽度为容器的 100%
可以添加 .secondary,.success,.info,.warning或.alert 用来显示各种不同的用途
<div data-alert class="alert-box"> This is a default alert box.</div> <div data-alert class="alert-box secondary">This is 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>
圆角提醒框
.radius 类用于为提醒框添加圆角
<div data-alert class="alert-box success radius"> <strong>Success!</strong> Alert box with a radius. </div>
圆形提醒框
.round 类用于为提醒框添加圆角
<div data-alert class="alert-box info round"> <strong>Info!</strong> Alert box that is rounded </div>
提醒框关闭按钮
.close CSS 类可以将 <a> 或 button 设置为提醒框上的关闭按钮
关闭按钮动作需要初始化 Foundation JS
<div data-alert class="alert-box"> This is a default alert box with closing functionality <a href="#" class="close">×</a> </div> <script> $(document).ready(function() {$(document).foundation();}) </script>
× (×) 是一个 HTML 字符实体表示一个关闭按钮的图标，而不是字母 "x"