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

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

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

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

{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>

 

你可能感兴趣的:(framework)