jQuery Mobile - 网格布局

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

下表详细说明了网格的类型。

序号 类型 & 说明
1 Basic grids

<div> 中包含ui-grid-solo类创建单列网格,网格宽度为100%

2 Two column grids

将类 ui-grid-a 添加到 <div> 并包含两个类为 ui-block-aui-block-b 的子容器 创建两列布局。

3 Three-column grids

ui-grid-b 类用于创建三列网格,它包含三个类为ui-block-a/b/c 的子容器。

4 Four-column grids

ui-grid-c 类用于创建四列网格,它包含四个子容器,类为 ui-block-a/b/c/d/e .

5 Five-column grids

ui-grid-d 类用于创建一个五列网格,它包含五个子容器,类为 ui-block-a/b/c/d

6 Multiple row grids

通过在容器上指定任何列类,可以将多行包装在网格中。

7 Grid solo class

通过覆盖单个断点下方的网格样式,标准网格具有响应性。

8 Responsive grids

35em(560px)以下的堆栈网格,可以应用预设断点。

9 Breakpoint preset

35em (560px) 以下的堆栈网格,可以应用预设断点。 在网格容器中,包含 .ui-responsive 类。

❮ jQuery Mobile - 布局