快乐学习 Ionic Framework+PhoneGap 手册1-2{介绍Header,Content,Footer的使用}

*先运行第一个简单的APP，介绍Header,Content,Footer的使用

{2.1}运行一个简单的APP，效果如下

 

{2.2}Header代码

 

  <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">页头</h1>
      </ion-header-bar>

 

{2.3}Content代码

 

 <ion-content>
      内容
 </ion-content>

 

{2.4}Footer代码

 <ion-footer-bar class="bar bar-footer bar-positive">
        <h1 class="title">页尾</h1>
</ion-footer-bar>

 

示例代码如下:

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

<ion-side-menus>

    <!-- Center content -->
    <ion-side-menu-content>
      <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">页头</h1>
      </ion-header-bar>
      <ion-content>
      内容
      </ion-content>
       <ion-footer-bar class="bar bar-footer bar-positive">
        <h1 class="title">页尾</h1>
      </ion-footer-bar>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar bar-footer bar-balanced">
        <h1 class="title">边栏</h1>
      </ion-header-bar>
    </ion-side-menu>

  </ion-side-menus>


  </body>
</html>

 

posted @ 2014-11-03 15:45  凡酷软件  阅读(1608)  评论(0)  编辑  收藏  举报