[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":18,"_28":29,"_30":31,"_32":33},"loginname","Jekin6","page",1,"limit",20,"total","id","15511","avatar_url","https://avatars.githubusercontent.com/u/6448732?v=3","githubUsername","create_at","2015-01-12 04:36:28.997","score","topic_count",0,"reply_count",4,"is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":33,"_30":49,"_50":51,"_25":52,"_53":54},"11419","author_id","15076","tab","share","content","目录：\r\n1. 简介\r\n 1. Hybrid vs. Others\r\n 2. ionic\r\n 3. CSS框架\r\n2. 基本布局\r\n 1. 布局模式\r\n 2. 定高条块：.bar\r\n 3. .bar : 位置\r\n 4. .bar : 嵌入子元素\r\n 5. .bar : 嵌入input\r\n 6. 内容：.content和.scroll-content\r\n \r\n### Hybrid vs. Others\r\n要开发手机App，目前有三种方式：\r\n\r\n**原生/Native**：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的平台要分别开发，成本高、周期长。\r\n**原生脚本/NativeScript**：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是要针对不同的平台分别开发。\r\n**混合/Hybrid**：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发，避免了不同平台原生开发体系的学习，上手快、效率高；缺点是性能上有一定损失。\r\nionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点和缺点都很明显。是否采用这种模式，需要根据具体情况综合考虑。\r\n\r\n不过在大多数场景下，如果你已经具备一定的web开发经验，采用这种方式进入移动App开发领域，还是不错的一个选择。毕竟，将产品低成本地开发出来并更快地推向市场，有时是最重要的事情。\r\n ![0001.jpg](//static.cnodejs.org/FtecKHsuqLDMVlyNI1_q6H6C1D2g)\r\n### ionic\r\n[**ionic**](http://xc.hubwiz.com/course/55010505e564e5172c0b9405)是一个强大的混合式/hybridHTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS）的原生App应用：\r\n\r\n ![0002.png](//static.cnodejs.org/Fn6efI862y-kPGkpAUnaQddKDGKo)\r\n\r\nionic主要包括三个部分：\r\n\r\n**CSS框架** - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。\r\n**JavaScript框架** - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发，因此自然地遵循AngularJS的框架约束；此外，ionic使用AngularJS UI Router实现前端路由。\r\n**命令行/CLI** - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。\r\n由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。\r\n### CSS框架\r\n如果你对AngularJS这样的东西不感兴趣，可以只使用ionic的CSS框架：直接在HTML中引入 ionic.css就可以了。\r\n\r\n[ionic的CSS框架](http://xc.hubwiz.com/course/55010505e564e5172c0b9405)主要提供预定义的CSS类，来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分四个方面：\r\n\r\n**基本布局类**\r\nionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了这几个区域的CSS类。\r\n\r\n**颜色和图标类**\r\nionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。\r\n\r\n**界面组件类**\r\nionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。\r\n\r\n**栅格系统类**\r\n和Bootstrap一样，ionic也提供了栅格系统。不过ionic的实现是基于CSS3的FlexBox 模型，更为灵活。\r\n### 布局模式\r\n手机App开发实践中，用户界面通常划分为几个区域 - 标题/header、内容/content和页脚/footer。微信采用的就是典型的三段布局：\r\n\r\n ![0003.png](//static.cnodejs.org/FmW89d05HNjrI4MhMsmjpGVvF9EB)\r\n\r\n标题区总是位于屏幕顶部，页脚区总是位于屏幕底部，而内容区占据剩余的空间。 ionic使用以下CSS类声明区域性质:\r\n\r\n**.bar.bar-header**- 声明元素为标题区\r\n**.bar.bar-footer** - 声明元素为页脚区\r\n**.content**- 声明元素为内容区\r\n### 定高条块：.bar\r\n样式.bar将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）：\r\n\r\n ...\r\n一旦元素应用了.bar样式，就可以继续选用两类预定义样式来进一步声明元素及其内容的外观：\r\n\r\n1. 同级样式 - 同级样式与.bar应用在同一元素上，声明元素的位置、配色等。\r\n2. 下级样式 - 下级样式只能应用在.bar的子元素上，声明子元素的大小等特征。\r\n\r\n ![004.png](//static.cnodejs.org/FnscY5yHzASL8BrzFVDmA8bbBfOw)\r\n \r\n### .bar : 位置\r\nionic使用以下样式定义条块的位置：\r\n\r\n**.bar-header** - 置顶\r\n**.bar-subheader** - header之下置顶\r\n**.bar-footer** - 置底\r\n**.bar-subfooter** - footer之上置底\r\n在腾讯新闻App中，你可以看到，使用了三个条块：标题、副标题、页脚：\r\n\r\n ![0005.png](//static.cnodejs.org/FrHx4Qihwq91Ddzoj-xp5TZSOEn3)\r\n ### .bar : 嵌入子元素\r\n在[ionic](http://xc.hubwiz.com/course/55010505e564e5172c0b9405)中，有三种.bar子元素的样式是预定义的：\r\n\r\n**标题文字** - 对包含标题文字的元素应用.title样式，通常使用h1元素：\r\n\t\t\t\r\n\t\t\t\t...\r\n\t\t\t\r\n**按钮** - 对用作按钮的元素，应用.button样式，通常使用button 或a元素作为按钮。注意按钮将使用.bar的配色方案：\r\n\t\r\n\t\t...\r\n\t\r\n**工具栏** - 工具栏包含一组按钮。对用作工具栏的元素，应用.button-bar样式，通常使用div元素作为工具栏：\r\n\t\r\n\t\t...\r\n\t\r\n### .bar : 嵌入input\r\n一种常见的UI模式是在标题栏中嵌入搜索栏，比如大众点评：\r\n\r\n ![006.png](//static.cnodejs.org/FpfOQwVc8HnSCNShDGpBPfPwFqWF)\r\n\r\n在.bar元素中嵌入input元素，需要注意两点：\r\n\r\n1. 在条块元素上应用**.item-input-inset**样式\r\n2. 将input包裹在应用**.item-input-wrapper**样式的元素内\r\n这是因为，在ionic的实现中，**.bar中的.input** 样式定义如下：\r\n\r\n\t\t.bar.item-input-inset{\r\n\t\t\t.item-input-wrapper{\r\n\t\t\t\t.input{\r\n\t\t\t\t\t...\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n### 内容：.content和.scroll-content\r\n[ionic](http://xc.hubwiz.com/course/55010505e564e5172c0b9405)预定义了两个内容容器样式：\r\n\r\n**.content** - 流式定位，内容元素在文档流中按顺序定位\r\n**.scroll-content** - 绝对定位，内容元素占满整个屏幕\r\n这两种样式都可以使用以下样式进一步确定位置及范围：\r\n\r\n ![007png.png](//static.cnodejs.org/Fm9LE8U-YyReY5aXnzViQNBr4c35)\r\n \r\n 参考资料： [http://www.hubwiz.com/course/5507ca5be564e51314f544e4/](http://www.hubwiz.com/course/5507ca5be564e51314f544e4/) \r\n 上面链接中还有一些实例。 [ionic](http://www.hubwiz.com) [AngularJS](http://www.hubwiz.com)","title","ionic之基本布局","last_reply_at","2016-02-26 09:03:43.615","good",true,"top",48,"visit_count",19851,"2015-03-27 02:41:01.203","author",{"_13":55,"_22":56},"2596887568","https://avatars3.githubusercontent.com/u/9349200?v=4"]