GitForAll
menu
Guía
Proyectos
Acerca de
Guía
Proyectos
Acerca de
Materializa/grid.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Ejemplo navbar - Capacitadero.org</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="css/materializa.min.css"> </head> <body> <!--dividimos en dos partes proporcionalmente iguales la pantalla del navegador--> <div class="row"> <div class="col s12 m6">Bloque 1</div> <div class="col s12 m6">Bloque 2</div> </div> <!-- dividimos en tres partes proporcionalmente iguales la pantalla del navegador--> <div class="row"> <div class="col s12 m4">Bloque 1</div> <div class="col s12 m4">Bloque 2</div> <div class="col s12 m4">Bloque 3</div> </div> <!--dividimos en tres partes la pantalla del navegador en donde el bloque del medio es el doble de los extremos--> <div class="row"> <div class="col s12 m3">Bloque 1</div> <div class="col s12 m6">Bloque 2</div> <div class="col s12 m3">Bloque 3</div> </div> <!--dividimos en cuatro partes proporcionalmente iguales la pantalla --> <div class="row"> <div class="col s12 m3">Bloque 1</div> <div class="col s12 m3">Bloque 2</div> <div class="col s12 m3">Bloque 3</div> <div class="col s12 m3">Bloque 4</div> </div> <!--Añadimos bordes y colores de fondo a nuestro sistema grid el primer bloque tiene borde con un ancho de 1 pixel, es una linea solida de color rojo. El fondo es amarillo el segundo bloque tiene borde con un ancho de 1 pixel, es una linea solida de color amarillo. El fondo es rojo --> <div class="row"> <div class="col s12 m3" style="border: 1px solid red;background: yellow;">Bloque 1</div> <div class="col s12 m3" style="border: 1px solid yellow;background: red;">Bloque 2</div> </div> <!-- Ejemplo de dos divisiones con proporcionalidad de 1 y 2(el primer bloque, es decir el que se ve en el lado izquierdo del navegador, es la mitad del tamaño del ubicado a su lado). el primer bloque tiene una imagen y el segundo un titulo y texto sobre el producto. --> <div class="row"> <div class="col s12 m4"> <img src="img/producto.png" alt="producto 1 siendo comprado por clientes"> </div> <div class="col s12 m8"> <h2>Producto 1</h2> <p>Este producto es único en su especie, esta hecho con insumos de alta calidad...</p> </div> </div> <!-- Tres divisiones proporcionales con una imagen en cada bloque Se dio un tamaño de 280 pixels(se asumio que sus dimensiones originales son muy grandes) --> <div class="row"> <div class="col s12 m4"> <img src="img/producto-1.png" alt="producto 1 siendo comprado por clientes" width="280"> </div> <div class="col s12 m4"> <img src="img/producto-2.png" alt="producto 2 siendo comprado por clientes" width="280"> </div> <div class="col s12 m4"> <img src="img/producto-3.png" alt="producto 3 siendo comprado por clientes" width="280"> </div> </div> <script type="text/javascript" src="js/materializa.min.js"></script> </body> </html>
Regresar