清单 10. List 元素在 grid 布局下的样例代码
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-list>
<ion-list-header>
Section I
</ion-list-header>
<ion-item>Terminator I</ion-item>
<ion-item>Blade Runner</ion-item>
<ion-item>
<button ion-button color="danger" outline>Choose</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col col-6>
<ion-list>
<ion-list-header>
Section II
</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>Blade Runner</ion-item>
<ion-item>
<button ion-button color="secondary"
outline>Choose</button>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
图 4. 使用 grid 分割页面布局
在一个 grid 控制的区域中，可以使用嵌套页面的方式布局元素，例如图 4 中的 list 元素。从大体上，这里的页面布局元素分为两大类。
- 列式元素，包括 List/Card 等
- 多页面元素，占据整个页，通过点击实现页面跳转和返回，包括 Modal/Segment/Slide 等
其他元素
当然，还有一些页面必须元素，例如按钮、输入框等用于页面交互的元素；另外，也有提示框，脚标等等提示元素。这块和 Web 开发很相似。
总结
相比于 Web 开发，ionic 同样使用了 grid 的 12 列布局模式。在整体的风格方面，受限于移动端的显示大小，提供的页面分割元素相对简单。在页面交互中，ionic 提供 List，Card，Segment 等页面控制风格，我们可以根据需求选择。
真机测试
最后一段，我们来说一下真机测试。运行添加 IOS 平台命令来初始化 IOS 工作区。完成后，会在项目的 platforms 文件夹下有 ios 目录，这里有生成供 Xcode 调用的代码。如清单 11。
清单 11. Ionic 初始化 ios 和 android 平台
> ionic cordova platform add ios > ionic cordova platform add android
使用 xcode 打开 plaforms/ios/test.xcworkspace 工作区。在设备里面，可以选择模拟器例如 iphone6，iphone7，也可以选择连接到 Mac 的真机。由于 IOS 开发是要收费的，所以我们需要配置一个临时测试环境。