ionic 之 基本布局
目录：
- 简介
- Hybrid vs. Others
- ionic
- CSS框架
- 基本布局
- 布局模式
- 定高条块：.bar
- .bar : 位置
- .bar : 嵌入子元素
- .bar : 嵌入input
- 内容：.content和.scroll-content
Hybrid vs. Others
要开发手机App，目前有三种方式：
原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的 平台要分别开发，成本高、周期长。 原生脚本/NativeScript：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是 要针对不同的平台分别开发。 混合/Hybrid：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发， 避免了不同平台原生开发体系的学习，上手快、效率高；缺点是性能上有一定损失。 ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点和缺点都很明显。 是否采用这种模式，需要根据具体情况综合考虑。
不过在大多数场景下，如果你已经具备一定的web开发经验，采用这种方式进入移动App开发领域，还是不错的一个选择。 毕竟，将产品低成本地开发出来并更快地推向市场，有时是最重要的事情。
ionic
ionic是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用：
ionic主要包括三个部分：
CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。 JavaScript框架 - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发，因此 自然地遵循AngularJS的框架约束；此外，ionic使用AngularJS UI Router实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。 由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。
CSS框架
如果你对AngularJS这样的东西不感兴趣，可以只使用ionic的CSS框架：直接在HTML中引入 ionic.css就可以了。
ionic的CSS框架主要提供预定义的CSS类，来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分四个方面：
基本布局类 ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。
颜色和图标类 ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。
界面组件类 ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。
栅格系统类 和Bootstrap一样，ionic也提供了栅格系统。不过ionic的实现是基于CSS3的FlexBox 模型，更为灵活。
布局模式
手机App开发实践中，用户界面通常划分为几个区域 - 标题/header、内容/content和页脚/footer。 微信采用的就是典型的三段布局：
标题区总是位于屏幕顶部，页脚区总是位于屏幕底部，而内容区占据剩余的空间。 ionic使用以下CSS类声明区域性质:
.bar.bar-header- 声明元素为标题区 .bar.bar-footer - 声明元素为页脚区.content- 声明元素为内容区
定高条块：.bar
样式.bar将元素声明为屏幕上绝对定位的块状区域，具有 固定的高度（44px）：
<any class="bar">...</any>一旦元素应用了.bar样式，就可以继续选用两类预定义样式来进一步 声明元素及其内容的外观：
- 同级样式 - 同级样式与.bar应用在同一元素上，声明元素的位置、配色等。
下级样式 - 下级样式只能应用在.bar的子元素上，声明子元素的大小等特征。
.bar : 位置
ionic使用以下样式定义条块的位置：
.bar-header - 置顶 .bar-subheader - header之下置顶 .bar-footer - 置底 .bar-subfooter - footer之上置底 在腾讯新闻App中，你可以看到，使用了三个条块：标题、副标题、页脚：
.bar : 嵌入子元素
在ionic中，有三种.bar子元素的样式是预定义的：
标题文字 - 对包含标题文字的元素应用.title样式，通常使用h1元素： ... 按钮 - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案： ... 工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常 使用div元素作为工具栏： ...
.bar : 嵌入input
一种常见的UI模式是在标题栏中嵌入搜索栏，比如大众点评：
在.bar元素中嵌入input元素，需要注意两点：
- 在条块元素上应用.item-input-inset样式
将input包裹在应用.item-input-wrapper样式的元素内 这是因为，在ionic的实现中，.bar中的.input 样式定义如下：
.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}
内容：.content和.scroll-content
ionic预定义了两个内容容器样式：
.content - 流式定位，内容元素在文档流中按顺序定位 .scroll-content - 绝对定位，内容元素占满整个屏幕 这两种样式都可以使用以下样式进一步确定位置及范围：
http://www.angularjs.cn/A127
最新文章
- CSS复习
- php正则获取html图片标签信息（采集图片）
- 7月17日——高校就业信息网站功能及数据获取之python爬虫
- bwa用法
- MATLAB不运行也不报错
- 扩展SharePoint链接字段
- Online Object Tracking: A Benchmark 论文笔记（转）
- IOS时间戳
- 自动加载类PHP中spl_autoload_register函数的用法
- java设计模式--结构型模式--代理模式
- QT显示GIF图片
- MYSQL，innodb_buffer_pool_size内存分配
- Spring IOC之容器概述
- Python常用排序算法
- poj3928 la4329 pingpong
- linux ls 命令
- C语言缓冲区（缓存）详解
- Handsontable添加超链接
- cocos2d windows游戏平台搭建
- Linux mint 下开发设置