案例：ionic案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html ng-app="ionicApp">
2
    <head>
3
        <meta charset="utf-8">
4
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
        <title>W3xue教程(w3xue.com)</title>
6
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
7
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
8
    </head>
9
    <body>
10
11
   <div class="bar bar-header">
12
      <div class="h1 title">颜色列表</div>
13
    </div>
14
​
15
   <div class="content has-header">
16
​
17
      <ul class="list color-list-demo">
18
        <li class="item dark">
19
          light
20
          <span class="color-demo light-bg light-border"></span>
21
        </li>
22
        <li class="item stable-dark">
23
          stable
24
          <span class="color-demo stable-bg stable-border"></span>
25
        </li>
26
        <li class="item positive">
27
          positive
28
          <span class="color-demo positive-bg positive-border"></span>
29
        </li>
30
        <li class="item calm">
31
          calm
32
          <span class="color-demo calm-bg calm-border"></span>
33
        </li>
34
        <li class="item balanced">
35
          balanced
36
          <span class="color-demo balanced-bg balanced-border"></span>
37
        </li>
38
        <li class="item energized">
39
          energized
40
          <span class="color-demo energized-bg energized-border"></span>
41
        </li>
42
        <li class="item assertive">
43
          assertive
44
          <span class="color-demo assertive-bg assertive-border"></span>
45
        </li>
46
        <li class="item royal">
47
          royal
48
          <span class="color-demo royal-bg royal-border"></span>