案例：Foundation案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <title>Foundation 实例</title>
5
  <meta charset="utf-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <link rel="stylesheet" href="/css/foundation5.5.3/foundation.min.css">
8
  <script src="/js/bootstrap/jquery.min.js"></script>
9
  <script src="/js/foundation5.5.3/foundation.min.js"></script>
10
  <script src="/js/foundation5.5.3/modernizr.js"></script>
11
</head>
12
<body>
13
​
14
<div style="padding:20px;">
15
  <h2>关闭提醒框</h2>
16
  <div data-alert class="alert-box">
17
    This is a default alert box.
18
    <a href="#" class="close">&times;</a>
19
  </div>
20
​
21
  <div data-alert class="alert-box secondary">
22
    This is a secondary alert box.
23
    <a href="#" class="close">&times;</a>
24
  </div>
25
​
26
  <div data-alert class="alert-box success">
27
    <strong>Success!</strong> This alert box indicates a successful or positive action.
28
    <a href="#" class="close">&times;</a>
29
  </div>
30
​
31
  <div data-alert class="alert-box info">
32
    <strong>Info!</strong> This alert box indicates a neutral informative change or action.
33
    <a href="#" class="close">&times;</a>
34
 </div>
35
​
36
  <div data-alert class="alert-box warning">
37
    <strong>Warning!</strong> This alert box indicates a warning that might need attention.
38
    <a href="#" class="close">&times;</a>
39
  </div>
40
​
41
  <div data-alert class="alert-box alert">
42
    <strong>Alert!</strong> This alert box indicates a dangerous or potentially negative action.
43
    <a href="#" class="close">&times;</a>
44
  </div>
45
</div>
46
​
47
<script>
48
// 创始化 Foundation JS