jQuery Mobile - 网格布局

jQuery Mobile 网格系统通过一系列行和列创建页面布局。

下表详细演示了各种网格类型。

序号	类型及描述
1	基本网格在<div>中包含ui-grid-solo类以创建一个单列网格，网格宽度为100%。
2	两列网格向<div>添加类ui-grid-a，并包含两个子容器，类分别为ui-block-a和ui-block-b，以创建两列布局。
3	三列网格 ui-grid-b类用于创建三列网格，它包含三个子容器，类分别为ui-block-a/b/c。
4	四列网格 ui-grid-c类用于创建四列网格，它包含四个子容器，类分别为ui-block-a/b/c/d/e。
5	五列网格 ui-grid-d类用于创建五列网格，它包含五个子容器，类分别为ui-block-a/b/c/d。
6	多行网格可以通过在容器上指定任何列类来将多行包装在网格中。
7	Grid solo 类标准网格通过在单个断点以下覆盖网格样式来实现响应式。
8	响应式网格在低于35em (560px)时堆叠网格，可以应用预设断点。
9	断点预设在低于35em (560px)时堆叠网格，可以应用预设断点。在网格容器中，包含.ui-responsive类。

jquery_mobile_layouts.htm

打印页面

广告