Sistema de rejillas y responsive
Segun hemos aprendido en el tutprial de udemy, primero de todo se debe crear un contenedor, para ello se pondrá div-container y se le dará al tabulador para crearlo.
Dentro del contenedor se creará una fila, con div-row y tabulador.
Dentro de la fila se crearan las columnas con un div-col y tabulador.
Las columnas deberan tener como maximo 12 de longitud. Por lo que el maximo sería div-col-xs-12.
En moviles se usa el xs (extra small), en dispositivos pequeños como una tablet se usa sm, en pantallas medianas se usa md y en grandes se usa lg. Se pueden crear columnas a nuestro gusto pero nunca excediendo las 12.
El responsive se usa para que cambien las columnas segun el tamaño del dispositivo que tengamos para facilitar la lectura.
Un ejemplo sería <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
Dispositivos muy pequeños (moviles) (<768px)
Dispositivos pequeños (tablets) (768px)
Dispositivos medianos (992px)
Dispositivos grandes (1200px)
Dentro del contenedor se creará una fila, con div-row y tabulador.
Dentro de la fila se crearan las columnas con un div-col y tabulador.
Las columnas deberan tener como maximo 12 de longitud. Por lo que el maximo sería div-col-xs-12.
En moviles se usa el xs (extra small), en dispositivos pequeños como una tablet se usa sm, en pantallas medianas se usa md y en grandes se usa lg. Se pueden crear columnas a nuestro gusto pero nunca excediendo las 12.
El responsive se usa para que cambien las columnas segun el tamaño del dispositivo que tengamos para facilitar la lectura.
Un ejemplo sería <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
El offset se usa para indicar que se dejan vacías esas columnas.
Dispositivos muy pequeños (moviles) (<768px)
Dispositivos pequeños (tablets) (768px)
Dispositivos medianos (992px)
Dispositivos grandes (1200px)
Comentarios
Publicar un comentario