案例: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
  <!-- Foundation 图标样式 -->
9
  <link rel="stylesheet" href="/css/foundation5.5.3/foundation-icons.css">
10
  <script src="/js/bootstrap/jquery.min.js"></script>
11
  <script src="/js/foundation5.5.3/foundation.min.js"></script>
12
  <script src="/js/foundation5.5.3/modernizr.js"></script>
13
</head>
14
<body>
15
16
<nav class="top-bar" data-topbar>
17
  <section class="top-bar-section">
18
    <ul class="left">
19
      <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
20
      <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
21
      <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>    
22
    </ul>
23
  </section>
24
</nav>

 运行结果 
 北美留学生论坛