Framework7 布局网格
说明
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 |
tablet-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 |
Equal width |
示例
以下示例提供了在 Framework7 中根据需要放置内容的网格布局-
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>
输出
让我们执行以下步骤来看看上面给出的代码是如何工作的-
将上述给定的 HTML 代码保存为服务器根文件夹中的 layout_grid.html 文件。
将此 HTML 文件打开为 http://localhost/layout_grid.html，输出如下所示。
此代码提供了不同类型的网格类型以根据用户需要放置内容。
