Hay 12 sistemas de cuadrícula de respuesta fluida de columnas estándar que lo ayudan a diseñar su página de una manera ordenada y fácil. Utiliza las clases de estilo de fila y columna para definir filas y columnas respectivamente. Las filas se usan para especificar un contenedor sin relleno que se usará para las columnas receptivas y las columnas se usan para especificar una columna con subclases.
Hay una clase de contenedor que se usa para centrar el contenido de la página. La clase de contenedor se establece en ~70% del ancho de la ventana. Para agregar un contenedor, simplemente coloque su contenido dentro de una etiqueta <div> con una clase de contenedor. Aquí está la sintaxis:
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>
La cuadrícula estándar tiene 12 columnas. No importa el tamaño del navegador, cada una de estas columnas siempre tendrá el mismo ancho. Recuerde al crear un diseño que todas las columnas deben estar contenidas dentro de una fila y que debe agregar la clase col a sus <div> internos para convertirlos en columnas. Puede cambiar fácilmente el orden de sus columnas con empujar y tirar . Simplemente agregue push-s2 o pull-s2 a la clase donde s es el prefijo de clase de pantalla (s = pequeño, m = mediano, l = grande), y el número que sigue es el número de columnas que desea empujar o tirar .
Ejemplo:
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div class="green center"> <h2>GeeksforGeeks</h2> </div> <div class="row"> <div class="col s1 green center">1</div> <div class="col s1 green darken-3 center">2</div> <div class="col s1 green center">3</div> <div class="col s1 green darken-3 center">4</div> <div class="col s1 green center">5</div> <div class="col s1 green darken-3 center">6</div> <div class="col s1 green center">7</div> <div class="col s1 green darken-3 center">8</div> <div class="col s1 green center">9</div> <div class="col s1 green darken-3 center">10</div> <div class="col s1 green center">11</div> <div class="col s1 green darken-3 center">12</div> </div> <div class="row"> <div class="col s7 push-s5 green darken-1"> <span class="flow-text"> This div is 7-columns wide on pushed to the right by 5-columns. </div> <div class="col s5 pull-s7 light-green"> <span class="flow-text"> 5-columns wide pulled to the left by 7-columns. </div> </div> </body> </html>
Clases de cuadrícula: el sistema de cuadrícula de materialización tiene cuatro clases:
- .s (para dispositivos móviles)
- .m (dispositivos de tableta)
- .l (dispositivos de escritorio)
- .xl (dispositivos de escritorio grandes)
|
Dispositivos móviles <= 600px |
Dispositivos de tableta > 600 píxeles |
Dispositivos de escritorio > 992 píxeles |
Grandes dispositivos de escritorio >1200px |
|
|---|---|---|---|---|
| Prefijo de clase | .s | .metro | .l | .SG |
| Ancho del contenedor | 90% | 85% | 70% | 70% |
| Número de columnas | 12 | 12 | 12 | 12 |
En el ejemplo anterior, solo definimos el tamaño para pantallas pequeñas usando “col s12”. Con solo decir s12, esencialmente estamos diciendo «col s12 m12 l12». Pero al definir explícitamente el tamaño, podemos hacer que nuestro sitio web sea más receptivo.
<!DOCTYPE html> <html> <head> <!--Import Google Icon Font--> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src= "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> </head> <body> <div class="green center"> <h2>GeeksforGeeks</h2> </div> <!--Responsive layout--> <div class="row"> <div class="grid-example col s12 light-green center"> <span class="flow-text"> Always full-width (col s12) </div> <div class="grid-example col s8 m6 green center"> <span class="flow-text"> Full-width on mobile (col s8 m6) </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA