一】、ionic了解：
是什么？
1.强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )
2.构建接近原生体验的移动应用程序。
3.注重外观、体验、交互
4.轻量、速度快
5.不支持IOS6和Android4.1以下的版本
特点：
1.基于Angular语法
2.轻量级、简单
3.融合下一代移动框架，支持Angular.js特性，MVC，代码易维护
4.漂亮、SASS、UI组件多
5.原生性强
6.ionic提供了强大的命令行工具
7.性能优越，运行速度快
ionic下载、安装：
http://ionicframework.com/docs/overview/#download
或者Github下载源文件：
https://github.com/driftyco/ionic
//命令行安装：
npm config --global set registry http://registry.cnpmjs.org
npm install -g cordova inoic
只需要在项目中引入 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用
我的第一个ionic应用：
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-
6
7 scale=1,maximum-scale=1,user-scalable=no"/>
8 <title>ionic应用</title>
9 <link rel="stylesheet" href="css/ionic.min.css"/>
10 </head>
11 <body ng-app="ionicApp" ng-controller="MyCtrl">
12
13 <ion-header-bar class="bar-positive">
14 <h1 class="title">Hello World!</h1>
15 </ion-header-bar>
16
17 <ion-content>
18 <p>我的第一个ionic应用</p>
19 </ion-content>
20
21 <script src="js/ionic.bundle.min.js"></script>
22 <script>
23 //[‘‘]中引入依赖的模块，这里引入ionic
24 var myIonic = angular.module(‘ionicApp‘, [‘ionic‘]);
25 myIonic.controller(‘MyCtrl‘, function ($scope) {
26
27 });
28 </script>
29
30 </body>
31 </html>
//命令行创建应用：
ionic start myApp tabs
二】、头部、底部、副标题
header头部
div.bar.bar-header.bar-light>h1.titile
ionic提供的默认颜色样式：
.bar-light 白色 默认
.bar-stable 浅灰色
.bar-positive 蓝色
.bar-calm 亮蓝色
.bar-balanced 绿色
.bar-energized 橙色
.bar-assertive 红色
.bar-royal 紫色
.bar-dark 黑色
subheader副标题
.bar.bar-subheader
footer底部
div.bar-footer位于网页底部
代码:
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> 6 <title>ionic应用</title> 7 <link rel="stylesheet" href="css/ionic.min.css"/> 8 </head> 9 <body> 10 11 <div class="bar bar-header"> 12 <h1 class="title">bar-light</h1><!--title是ionic内置的样式--> 13 </div> 14 <div class="bar bar-subheader"> 15 <h1 class="title">subheader</h1> 16 </div> 17 18 <!--<div class="bar bar-footer bar-balanced"> 19 <button class="button button-clear">Left</button> 20 <div class="title">footer</div> 21 <button class="button button-clear">Right</button> 22 </div>--> 23 24 <div class="bar bar-footer"> 25 <button class="button button-clear pull-right">Right</button> 26 </div> 27 28 <script src="js/ionic.bundle.min.js"></script> 29 30 </body> 31 </html>