案例：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
<div class="off-canvas-wrap" data-offcanvas>
14
  <div class="inner-wrap">
15
    <nav class="tab-bar">
16
      <section class="left-small">
17
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
18
      </section>
19
​
20
      <section class="middle tab-bar-section">
21
        <h1 class="title">Off-canvas 实例</h1>
22
      </section>
23
    </nav>
24
​
25
    <aside class="left-off-canvas-menu">
26
      <ul class="off-canvas-list test">
27
        <li><label>Heading</label></li>
28
        <li><a href="#">Link 1</a></li>
29
        <li><a href="#">Link 2</a></li>
30
        <li><a href="#">Link 3</a></li>
31
        <li><a href="#">Link 4</a></li>
32
        <li><a href="#">Link 5</a></li>
33
        <li><a href="#">Link 6</a></li>
34
        <li><a href="#">Link 7</a></li>
35
        <li><a href="#">Link 8</a></li>
36
      </ul>
37
    </aside>
38
39
    <section class="main-section">
40
      <h3>W3xue教程</h3>
41
      <p>一起学习，一起紧随时代的步伐！！！</p>
42
    </section>
43
​
44
    <a class="exit-off-canvas"></a>
45
​
46
  </div>
47
</div>
48
​