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

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

{2.2}Header代码

  1.   <ion-header-bar class="bar bar-header bar-positive">
  2.         <h1 class="title">页头</h1>
  3.       </ion-header-bar>

{2.3}Content代码

  1.  <ion-content>
  2.       内容
  3.  </ion-content>

{2.4}Footer代码

  1.  <ion-footer-bar class="bar bar-footer bar-positive">
  2.         <h1 class="title">页尾</h1>
  3. </ion-footer-bar>

示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6.     <title></title>
  7.  
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  9.     <link href="css/style.css" rel="stylesheet">
  10.  
  11.     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  12.     <link href="css/ionic.app.css" rel="stylesheet">
  13.     -->
  14.  
  15.     <!-- ionic/angularjs js -->
  16.     <script src="lib/ionic/js/ionic.bundle.js"></script>
  17.  
  18.     <!-- cordova script (this will be a 404 during development) -->
  19.     <script src="cordova.js"></script>
  20.  
  21.     <!-- your app's js -->
  22.     <script src="js/app.js"></script>
  23.   </head>
  24.   <body ng-app="starter">
  25.  
  26. <ion-side-menus>
  27.  
  28.     <!-- Center content -->
  29.     <ion-side-menu-content>
  30.       <ion-header-bar class="bar bar-header bar-positive">
  31.         <h1 class="title">页头</h1>
  32.       </ion-header-bar>
  33.       <ion-content>
  34.       内容
  35.       </ion-content>
  36.        <ion-footer-bar class="bar bar-footer bar-positive">
  37.         <h1 class="title">页尾</h1>
  38.       </ion-footer-bar>
  39.     </ion-side-menu-content>
  40.  
  41.     <!-- Left menu -->
  42.     <ion-side-menu side="left">
  43.       <ion-header-bar class="bar bar-footer bar-balanced">
  44.         <h1 class="title">边栏</h1>
  45.       </ion-header-bar>
  46.     </ion-side-menu>
  47.  
  48.   </ion-side-menus>
  49.  
  50.   </body>
  51. </html>

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

  1. 快乐学习 Ionic Framework+PhoneGap 手册1-1{创建APP项目}

    快乐学习 Ionic Framework+PhoneGap 手册1-1 * 前提必须安装 Node.js,安装PhoneGap,搭建Android开发环境,建议使用真机调试 {1.1}= 创建APP项 ...

  2. 快乐学习 Ionic Framework+PhoneGap 手册1-4 {登录页面}

    编程的快乐和乐趣,来自于能成功运行程序并运用到项目中 有了面板然后加个登录页面,请看效果图和代码 Index HTML Code <!DOCTYPE html> <html ng-a ...

  3. 快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}

    编程的快乐和乐趣,来自于能成功运行程序并运用到项目中,会在后面案例,实际运用到项目当中与数据更新一起说明 从面板切换开始,请看效果图和代码,这只是一个面板切换的效果 Index HTML Code & ...

  4. 快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}

    当然,即使努力了也没做成,至少你也有收获,因为你知道自己以后可以避开这个坑. 这是一个"IO"开关,请看效果图和代码,下一节,说明,数据交换 Index HTML Code < ...

  5. 案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发

    落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界. 介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据 ...

  6. 170多个Ionic Framework学习资源（转载）

    在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...

  7. Wijmo 5 + Ionic Framework之：费用跟踪 App

    Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...

  8. Mobile first! Wijmo 5 + Ionic Framework之：费用跟踪 App

    费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...

  9. Ionic Framework 4 介绍

    Ionic Framework 4是一个开源UI工具包,用于使用Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动和桌面应用程序.Ionic Framework专注于前端用户体 ...

随机推荐

  1. AI for AI

    1.Li, Ke, and Jitendra Malik. "Learning to optimize." arXiv preprint arXiv:1606.01885 (201 ...

  2. OpenGL ES andoid学习————1

    package com.xhm.getaccount; import javax.microedition.khronos.egl.EGLConfig; import javax.microediti ...

  3. C++中计算矩阵的行列式

    使用eigen库: 求行列式: #include <iostream> #include <Eigen/Dense> using namespace std; using na ...

  4. C2 CompilerThread0 如果抓到的java线程dump里占用CPU最高的线程是这个，99%可能是因为服务重启了

    "C2 CompilerThread0" #5 daemon prio=9 os_prio=0 tid=0x00007f20c80b3800 nid=0x57c0 runnable ...

  5. poj1026(置换找循环节)

    找到循环节,然后对应的变换 Cipher Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20377   Accepted:  ...

  6. CAFFE学习笔记（五）用caffe跑自己的jpg数据

    1 收集自己的数据 1-1 我的训练集与测试集的来源:表情包 由于网上一幅一幅图片下载非常麻烦,所以我干脆下载了两个eif表情包.同一个表情包里的图像都有很强的相似性,因此可以当成一类图像来使用.下载 ...

  7. 1878: [SDOI2009]HH的项链

    1878: [SDOI2009]HH的项链 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 4420  Solved: 2199[Submit][Statu ...

  8. 类 String、StringBuffer、StringBuilder

    类 String String 类代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现.字符串是常量:它们的值在创建之后不能更改.字符串缓冲区支持 ...

  9. Printing tools 自定义模板打印的实现

    #ArcGIS for Server 自定义打印两种方法 友好阅读版本: http://gishub.info/2013/09/17/printingtools/ ## 前言使用web打印会遇到中文乱 ...

  10. 什么是 XML Schema（转）

    什么是 XML Schema? XML Schema 的作用是定义 XML 文档的合法构建模块,类似 DTD. XML Schema 的作用: 定义可出现在文档中的元素 定义可出现在文档中的属性 定义 ...