फ्रेमवर्क 7 - लेआउट ग्रिड
विवरण
फ़्रेमवर्क 7 सामग्री को उपयोगकर्ता की आवश्यकता के अनुसार रखने के लिए विभिन्न प्रकार के ग्रिड प्रकार प्रदान करता है।
निम्न तालिका में वर्णित लेआउट ग्रिड विभिन्न प्रकार के कॉलम आकार प्रदान करता है -
| S.No | कक्षा | टेबल क्लास | चौड़ाई |
|---|---|---|---|
| 1 | col-5 | गोली-5 | 5% |
| 2 | col-10 | गोली-10 | 10% |
| 3 | col-15 | गोली-15 | 15% |
| 4 | कॉल-20 | गोली-20 | 20% |
| 5 | कॉल-25 | गोली-25 | 25% |
| 6 | col-30 | गोली-30 | 30% |
| 7 | col-33 | गोली-33 | 33.3% |
| 8 | col-35 | गोली-35 | 35% |
| 9 | col-40 | गोली-40 | 40% |
| 10 | col-45 | गोली-45 | 45% |
| 1 1 | col-50 | गोली-50 | 50% |
| 12 | col-55 | गोली-55 | 55% |
| 13 | कॉल-60 | गोली-60 | 60% |
| 14 | col-65 | गोली-65 | 65% |
| 15 | col-66 | गोली-66 | 66.6% |
| 16 | col-70 | गोली-70 | 70% |
| 17 | col-75 | गोली-75 | 75% |
| 18 | col-80 | गोली-80 | 80% |
| 19 | कॉल-85 | गोली -85 | 85% |
| 20 | col-90 | गोली-90 | 90% |
| 21 | col-95 | गोली-95 | 95% |
| 21 | col-100 | गोली-100 | 100% |
| 22 | कॉल-ऑटो | गोली-ऑटो | समान चौड़ाई |
उदाहरण
निम्न उदाहरण अपनी सामग्री को रखने के लिए ग्रिड लेआउट प्रदान करता है जैसा कि आपको फ्रेमवर्क 7 में आवश्यक है -
<!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 के रूप में खोलें। आउटपुट नीचे दिखाए गए अनुसार प्रदर्शित किया गया है।
यह कोड सामग्री को उपयोगकर्ता की आवश्यकता के अनुसार रखने के लिए विभिन्न प्रकार के ग्रिड प्रकार प्रदान करता है।