Framework7 - Düzen Izgarası
Açıklama
Framework7, içeriği kullanıcı ihtiyacına göre yerleştirmek için farklı tipte ızgara türleri sağlar.
Düzen ızgarası, aşağıdaki tabloda açıklandığı gibi farklı sütun boyutu türleri sağlar -
| S.No | Sınıf | Tablo Sınıfı | Genişlik |
|---|---|---|---|
| 1 | sütun-5 | tablet-5 | % 5 |
| 2 | sütun-10 | tablet-10 | % 10 |
| 3 | sütun-15 | tablet-15 | % 15 |
| 4 | sütun-20 | tablet-20 | % 20 |
| 5 | sütun-25 | tablet-25 | % 25 |
| 6 | sütun-30 | tablet-30 | % 30 |
| 7 | sütun-33 | tablet-33 | % 33.3 |
| 8 | sütun-35 | tablet-35 | % 35 |
| 9 | col-40 | tablet-40 | % 40 |
| 10 | col-45 | tablet-45 | % 45 |
| 11 | sütun-50 | tablet-50 | % 50 |
| 12 | sütun-55 | tablet-55 | % 55 |
| 13 | col-60 | tablet-60 | % 60 |
| 14 | col-65 | tablet-65 | % 65 |
| 15 | sütun-66 | tablet-66 | % 66.6 |
| 16 | sütun-70 | tablet-70 | % 70 |
| 17 | col-75 | tablet-75 | % 75 |
| 18 | sütun-80 | tablet-80 | % 80 |
| 19 | col-85 | tablet-85 | % 85 |
| 20 | sütun-90 | tablet-90 | % 90 |
| 21 | col-95 | tablet-95 | % 95 |
| 21 | sütun-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Eşit genişlik |
Misal
Aşağıdaki örnek, içeriğinizi Framework7'de ihtiyaç duyduğunuz şekilde yerleştirmek için ızgara düzenini sağlar -
<!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>Çıktı
Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -
Yukarıda verilen HTML kodunu farklı kaydedin layout_grid.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/layout_grid.html olarak açın, çıktı aşağıda gösterildiği gibi görüntülenir.
Bu kod, içeriği kullanıcının ihtiyacına göre yerleştirmek için farklı tipte ızgara türleri sağlar.