Framework7 - Lưới bố cục
Sự miêu tả
Framework7 cung cấp các loại kiểu lưới khác nhau để đặt nội dung theo nhu cầu của người dùng.
Lưới bố cục cung cấp các loại kích thước cột khác nhau như được mô tả trong bảng sau:
| S. không | Lớp học | Lớp bảng | Chiều rộng |
|---|---|---|---|
| 1 | col-5 | máy tính bảng-5 | 5% |
| 2 | col-10 | máy tính bảng-10 | 10% |
| 3 | col-15 | máy tính bảng-15 | 15% |
| 4 | col-20 | máy tính bảng-20 | 20% |
| 5 | col-25 | máy tính bảng-25 | 25% |
| 6 | col-30 | máy tính bảng-30 | 30% |
| 7 | col-33 | máy tính bảng-33 | 33,3% |
| số 8 | col-35 | máy tính bảng-35 | 35% |
| 9 | col-40 | máy tính bảng-40 | 40% |
| 10 | col-45 | máy tính bảng-45 | 45% |
| 11 | col-50 | máy tính bảng-50 | 50% |
| 12 | col-55 | máy tính bảng-55 | 55% |
| 13 | col-60 | máy tính bảng-60 | 60% |
| 14 | col-65 | máy tính bảng-65 | 65% |
| 15 | col-66 | máy tính bảng-66 | 66,6% |
| 16 | col-70 | máy tính bảng-70 | 70% |
| 17 | col-75 | máy tính bảng-75 | 75% |
| 18 | col-80 | máy tính bảng-80 | 80% |
| 19 | col-85 | máy tính bảng-85 | 85% |
| 20 | col-90 | máy tính bảng-90 | 90% |
| 21 | col-95 | máy tính bảng-95 | 95% |
| 21 | col-100 | máy tính bảng-100 | 100% |
| 22 | col-auto | máy tính bảng tự động | Chiều rộng bằng nhau |
Thí dụ
Ví dụ sau cung cấp bố cục lưới để đặt nội dung của bạn khi bạn cần trong 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>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng layout_grid.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/layout_grid.html đầu ra được hiển thị như hình dưới đây.
Mã này cung cấp các loại lưới khác nhau để đặt nội dung theo nhu cầu của người dùng.