ionic 网格(Grid)
ionic 的网格（Grid）和多数框架不太一样，底层采用的是弹性盒子模型（Flexible Box Model）。好处也很直接：放在移动端用，绝大多数手机都能支持。具体来说，row 样式用来定义行，col 样式则负责定义列。 同等大小网格 在带有 row 的样式的元素里如果包含了 col 的样式，
ionic 的网格（Grid）和多数框架不太一样，底层采用的是弹性盒子模型（Flexible Box Model）。好处也很直接：放在移动端用，绝大多数手机都能支持。具体来说，row 样式用来定义行，col 样式则负责定义列。
同等大小网格
在带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。
以下实例中 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。
.col
.col
.col
.col
.col
指定列宽
一行里的每一列，其实不必做成一样宽。默认状态下，系统会把这些列平均分配；当然，也可以按百分比来自定义每列的宽度，前提是整行仍然基于 12 个网格来划分。
.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col
注意：实例中，每个 col 样式会自动添加上边框和灰色背景。
下面列出了指定列宽的一些百分比的样式名:
| .col-10 | 10% |
| .col-20 | 20% |
| .col-25 | 25% |
| .col-33 | 33.3333% |
| .col-50 | 50% |
| .col-67 | 66.6666% |
| .col-75 | 75% |
| .col-80 | 80% |
| .col-90 | 90% |
有偏移量的网格
列可以设置左侧偏移量，实例如下：
.col
.col
.col
.col
.col
下面是一些百分比的偏移量样式名：
| .col-offset-10 | 10% |
| .col-offset-20 | 20% |
| .col-offset-25 | 25% |
| .col-offset-33 | 33.3333% |
| .col-offset-50 | 50% |
| .col-offset-67 | 66.6666% |
| .col-offset-75 | 75% |
| .col-offset-80 | 80% |
| .col-offset-90 | 90% |
纵向对齐网格
弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。
实例中，最后一列设置了最高的内容用于更好的演示纵向对齐网格。
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
响应式网格
手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。
不同设备响应式类的样式如下:
| 响应式类 | 描述 |
| .responsive-sm | 小于手机横屏 |
| .responsive-md | 小于平板竖屏 |
| .responsive-lg | 小于平板横屏 |
.col
.col
.col
.col
ionic 是一套相当成熟的 HTML5 应用开发框架（HTML5 Hybrid Mobile App Framework）。 它的价值就在于，能够把 HTML、CSS 和 Ja vascript 这些常见的 Web 技术，真正用到移动应用开发里，做出体验上尽可能贴近原生应用的产品。 ionic 主
前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Ja vascript 来构建，所以我们可以创建一个 www 目录，并在目录下创建 index.html 文件，代码如
Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。 bar-light bar-light bar-stable bar-stable bar-positive bar-pos
按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。 默认情况下，按钮显示样式为：display: inline-block。 Default button-light button-stable button-positive button-calm button-balan
列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮，开关，图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项
近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。 针对移动端的应用，卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。 卡片一般放在页面顶部，当然也可以实现左右切换的功能。 基本卡片，包含了文本信息。 默认情况下，卡片（card）这类
list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性：placeholder 来看这个例子：这里的输入框默认都会撑满 100% 宽度，也就是左右两侧不带边框；同时，通过 placeholder 属性给输入字段预先放上一段提示文字，方便用
切换开关和 HTML 里的 checkbox 标签本质上很接近，不过在移动设备上，它用起来通常更顺手，交互体验也更自然。 切换开关可以使用 toggle-assertive 来指定颜色。 这个示例展示的是一组可切换的开关列表。需要注意的是，每个选项除了保留 item 类之外，还必须额外加上 item
ionic Range 本质上就是一个滑块控件，ionic 也顺手给它准备了不少开箱即用的默认样式。更方便的是，这个组件的适配性很高，不管是放在列表里，还是用在 Card 这类元素中，都能直接使用。 实例 Ranges In A List 实际运行后的效果如下所示：
火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力，依托字节自研豆包多模态大模型，凭借火山方舟一站式平台，提供模型精调、推理部署、智能应用搭建等全链路服务，结合高性能AI算力，助力各行业快速落地大模型数字化与智能化应用。
