zoukankan      html  css  js  c++  java
  • 快乐学习 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>

     

  • 相关阅读:
    Atom实例
    订阅基础:RSS、ATOM、FEED、聚合、供稿、合烧与订阅
    XML模式:Dublin Core
    Dublin Core
    海量数据的理想存储方案
    百亿级别数据量,又需要秒级响应的案例,需要什么系统支持呢?下面介绍下大数据实时分析工具Yonghong Z-Suite
    用HiveDB横向切分MySQL数据库
    超详细单机版搭建hadoop环境图文解析
    从String.valueOf(null)说起
    js闭包理解
  • 原文地址:https://www.cnblogs.com/cube/p/4071382.html
Copyright © 2011-2022 走看看