ionic入门篇[了解]与[头部底部副标题]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ionic入门篇[了解]与[头部底部副标题]相关的知识，希望对你有一定的参考价值。
一】、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>
以上是关于ionic入门篇[了解]与[头部底部副标题]的主要内容，如果未能解决你的问题，请参考以下文章