案例: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 style="padding:20px">
13
14
<h3>均匀延展按钮组:</h3>
15
16
<p>均匀延展三个按钮:</p>
17
<ul class="button-group even-3">
18
  <li><button type="button" class="button">Apple</button></li>
19
  <li><button type="button" class="button">Samsung</button></li>
20
  <li><button type="button" class="button">Sony</button></li>
21
</ul>
22
23
<p>均匀延展五个按钮:</p>
24
<ul class="button-group even-5">
25
  <li><button type="button" class="button">Apple</button></li>
26
  <li><button type="button" class="button">Samsung</button></li>
27
  <li><button type="button" class="button">Sony</button></li>
28
  <li><button type="button" class="button">HTC</button></li>
29
  <li><button type="button" class="button">Huawei</button></li>
30
</ul>
31
32
<p>均匀延展八个按钮:</p>
33
<ul class="button-group even-8">
34
  <li><button type="button" class="button">A</button></li>
35
  <li><button type="button" class="button">B</button></li>
36
  <li><button type="button" class="button">C</button></li>
37
  <li><button type="button" class="button">D</button></li>
38
  <li><button type="button" class="button">E</button></li>
39
  <li><button type="button" class="button">F</button></li>
40
  <li><button type="button" class="button">G</button></li>
41
  <li><button type="button" class="button">H</button></li>
42
</ul>
43
44
</body>
45
</html>
46