*先运行第一个简单的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>

快乐学习 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. npm安装vue-cil出现错误

    这个错误有点尴尬..... 之前全局安装过cil,然后在全局安装出现了这个错误,各种手册看了半天也没有头绪,猛然想起来之前安装过,试下直接初始化项目试一下,果然成功了 然后在 npm install ...

  2. android studio中如何替换gradle以防下载卡住

    我们在开发过程中需要导入别人的demo工程,那么你有事就会下载gradle构建文件,然而有时下载会一直卡住,那么这时候你就会想,我自己用迅雷去下载gradle文件然后不就行了,然后问题就来了 1.我们 ...

  3. 第一百八十八节，jQuery，选项卡 UI

    jQueryUI,选项卡 UI 学习要点: 1.使用 tabs 2.修改 tabs 样式 3.tabs()方法的属性 4.tabs()方法的事件 5.tabs 中使用 on 选项卡(tab),是一种能 ...

  4. go反射----1类型

    声明:文章内容取自雨痕老师<Go语言学习笔记> 反射( reflect )让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上的不足.同时,反射还是元编程 ...

  5. Linux命令之split

    split用来将大文件分割成小文件.有时文件越来越大,传送这些文件时,首先将其分割可能更容易. 使用vi或其他工具诸如sort时,如果文件对于工作缓冲区太大,也会存在一些问题. 因此有时没有选择余地, ...

  6. SQL Server 2008中如何为XML字段建立索引

    from:http://blog.csdn.net/tjvictor/article/details/4370771 SQL Server中的XML索引分为两类:主XML 索引和辅助XML索引.其中辅 ...

  7. Android开发：《Gradle Recipes for Android》阅读笔记(翻译)3.2——设置Flavors和Variants

    问题: 需要构建大体上一样,但是使用不同资源或者类的应用. 解决方案: 产品的flavors可以帮助你对同一个app创建不同的版本. 讨论: build types是开发过程的一部分,一般用来将app ...

  8. 48、ViewFlow ---- 滑动广告页

    <!-- main.xml --> <?xml version="1.0" encoding="utf-8"?> <LinearL ...

  9. PHP中mysql_fetch_row()、mysql_fetch_assoc()和mysql_fetch_array()的联系

    总是记不住或者混淆mysql_fetch_row().mysql_fetch_assoc()和mysql_fetch_array()这三个函数的朋友们注意了,今天我在这里给大家总结一下他们之间的关系, ...

  10. 【discuz】G变量注解之 $_G['member'] 全局当前登录者信息

    print? <?php G变量的使用方法: 直接复制下面的变量放到discuzx模板需要的位置即可! 例如:$_G['style'][boardlogo] 刷新后就会 显示一张logo 全局当 ...