Framework7 - 布局网格

Framework7布局网格 - 从概述，环境，布局，导航栏，工具栏，搜索栏，状态栏，侧面板，内容块，布局网格，叠加层，预加载器，进度条，列表视图，手风琴，卡片，芯片，按钮开始学习Framework7 ，动作按钮，窗体，选项卡，Swiper滑块，照片浏览器，自动完成，选择器，日历，刷新，无限滚动，消息，消息栏，通知，延迟加载，颜色主题，细线，模板概述，自动编译，Template7页面，活动状态，点击保持事件，触摸波纹。

描述

Framework7提供了不同类型的网格类型，可根据用户需要放置内容.

布局网格提供不同类型的列大小如下表所示 :

S.No	类	表类	宽度
1	col-5	tablet-5	5％
2	col-10	tablet-10	10％
3	col-15	tablet-15	15％
4	col-20	tablet-20	20％
5	col-25	tablet-25	25％
6	col-30	tablet-30	30％
7	col -33	tablet-33	33.3％
8	col-35	t能够-35	35％
9	col-40	tablet-40	40％
10	col-45	tablet-45	45％
11	col-50	tablet-50	50％
12	col-55	tablet-55	55％
13	col-60	tablet-60	60％
14	col-65	tablet-65	65％
15	col-66	tablet-66	66.6％
16	col-70	tablet-70	70％
17	col- 75	tablet-75	75％
18	col-80	tablet-80	80％
19	col-85	tablet-85	85％
20	col-90	tablet-90	90％
21	col-95	tablet-95	95％
21	col-100	tablet-100	100％
22	col-auto	tablet-auto	等宽

示例

以下示例提供了在Framework7中根据需要放置内容的网格布局;

                           Layout Grid                                                                                                      Layout Grid

Columns with gutter

col 1 col 2

col 1 col 2 col 3 col 4

col 1 col 2 col 3 Columns without gutter

col 1 col 2

col 1 col 2 col 3 col 4

col 1 col 2 col 3 Nested Columns

col 1

col 2 col 3 col 1

col 2 col 3 Columns With Different Equal Width

col 1 col 2

col 1 col 2 col 3 col 4

col 1 col 2 col 3 col 4 Columns With Equal Width

col-1 col-2 col-3 col-4

输出

让我们执行以下步骤，看看上面给出的代码如何工作 : 去;

将上面给出的HTML代码保存为服务器根文件夹中的 layout_grid.html 文件.
将此HTML文件打开为http://localhost/layout_grid.html，输出显示如下所示.
此代码提供了不同类型的网格类型，以根据用户需要放置内容.