Framework7 - เค้าโครงตาราง
คำอธิบาย
Framework7 จัดเตรียมกริดประเภทต่างๆเพื่อวางเนื้อหาตามที่ผู้ใช้ต้องการ
ตารางเค้าโครงมีขนาดคอลัมน์ประเภทต่างๆตามที่อธิบายไว้ในตารางต่อไปนี้ -
| ส. เลขที่ | คลาส | คลาสตาราง | ความกว้าง |
|---|---|---|---|
| 1 | col-5 | แท็บเล็ต -5 | 5% |
| 2 | col-10 | แท็บเล็ต -10 | 10% |
| 3 | col-15 | แท็บเล็ต -15 | 15% |
| 4 | col-20 | แท็บเล็ต -20 | 20% |
| 5 | col-25 | แท็บเล็ต -25 | 25% |
| 6 | col-30 | แท็บเล็ต -30 | 30% |
| 7 | col-33 | แท็บเล็ต -33 | 33.3% |
| 8 | col-35 | แท็บเล็ต -35 | 35% |
| 9 | โคล -40 | แท็บเล็ต -40 | 40% |
| 10 | สี -45 | แท็บเล็ต -45 | 45% |
| 11 | col-50 | แท็บเล็ต -50 | 50% |
| 12 | สี -55 | แท็บเล็ต -55 | 55% |
| 13 | col-60 | แท็บเล็ต -60 | 60% |
| 14 | สี -65 | แท็บเล็ต -65 | 65% |
| 15 | สี -66 | แท็บเล็ต -66 | 66.6% |
| 16 | สี -70 | แท็บเล็ต -70 | 70% |
| 17 | สี -75 | แท็บเล็ต -75 | 75% |
| 18 | col-80 | แท็บเล็ต -80 | 80% |
| 19 | สี -85 | แท็บเล็ต -85 | 85% |
| 20 | col-90 | แท็บเล็ต -90 | 90% |
| 21 | สี -95 | แท็บเล็ต -95 | 95% |
| 21 | สี -100 | แท็บเล็ต -100 | 100% |
| 22 | col-auto | แท็บเล็ตอัตโนมัติ | ความกว้างเท่ากัน |
ตัวอย่าง
ตัวอย่างต่อไปนี้มีเค้าโครงกริดสำหรับวางเนื้อหาของคุณตามที่คุณต้องการใน 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 ผลลัพธ์จะแสดงดังที่แสดงด้านล่าง
รหัสนี้ระบุประเภทกริดประเภทต่างๆเพื่อวางเนื้อหาตามที่ผู้ใช้ต้องการ