Framework7 - Cuadrícula de diseño
Descripción
Framework7 proporciona diferentes tipos de tipos de cuadrícula para colocar el contenido según las necesidades del usuario.
La cuadrícula de diseño proporciona diferentes tipos de tamaño de columnas como se describe en la siguiente tabla:
| S. No | Clase | Clase de tabla | Anchura |
|---|---|---|---|
| 1 | col-5 | tableta-5 | 5% |
| 2 | col-10 | tableta-10 | 10% |
| 3 | col-15 | tableta-15 | 15% |
| 4 | col-20 | tableta-20 | 20% |
| 5 | col-25 | tableta-25 | 25% |
| 6 | col-30 | tableta-30 | 30% |
| 7 | col-33 | tableta-33 | 33,3% |
| 8 | col-35 | tableta-35 | 35% |
| 9 | col-40 | tableta-40 | 40% |
| 10 | col-45 | tableta-45 | 45% |
| 11 | col-50 | tableta-50 | 50% |
| 12 | col-55 | tableta-55 | 55% |
| 13 | col-60 | tableta-60 | 60% |
| 14 | col-65 | tableta-65 | sesenta y cinco% |
| 15 | col-66 | tableta-66 | 66,6% |
| dieciséis | col-70 | tableta-70 | 70% |
| 17 | col-75 | tableta-75 | 75% |
| 18 | col-80 | tableta-80 | 80% |
| 19 | col-85 | tableta-85 | 85% |
| 20 | col-90 | tableta-90 | 90% |
| 21 | col-95 | tableta-95 | 95% |
| 21 | col-100 | tableta-100 | 100% |
| 22 | col-auto | tablet-auto | Igual ancho |
Ejemplo
El siguiente ejemplo proporciona el diseño de cuadrícula para colocar su contenido según lo necesite en 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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como layout_grid.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/layout_grid.html, el resultado se muestra como se muestra a continuación.
Este código proporciona diferentes tipos de tipos de cuadrícula para colocar el contenido según las necesidades del usuario.