Bootstrap V.3. CSS
Para iniciarnos en el corazón del CSS que usa bootstrap, necesitaremos conocimientos básicos acerca de "html5, css y responsive desing".
Siempre comenzamos con el encabezado HTML5,
<!DOCTYPE html>
<html lang="en"> ...
</html>
Bootstrap está diseñado para ser compatible con la mayoria de los dispositivos del mercado y como no, deja hueco para la parte "mobile".
Al iniciar un meta nos asegurará que el render es correcto y que no tiene un zoom aplicado.
Para ello:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Incluso podemos asegurarnos de hacerlo no escalable.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Tipografía.
Respecto a este tema Bootstrap tiene algunos principios definidos en base.
El color de fondo será blanco en el cuerpo.
Usará los atributos de fuente base@font-family-base, @font-size-base, and @line-height-base
y tendrá definidos valores por defecto para los link con @link-color:hover
Estos estilos podremos encontrarlos en scaffolding.less.
Respecto a la estructura, la grid system.Seguimos manteniendo la idea báse de dividir las filas en 12 columnas .
La row principal tendrá una class .container que dará atributos de alineación y padding.
Media Querry
/*Dispositivos extra pequeños (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Dispositivos pequeños (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/*Dispositivos medianos(desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Grandes dispositicos (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
En ocasiones expandiremos nuestras queries para incluir un ancho maximo limitandolo por css.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Extra small devicesPhones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
comportamiento de cuadricula
Horizontal
Oculto al inicio horizontal "sobre"
Ancho máximo
No (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
# of columns
12
Ancho máximo columnas
Auto
60px
78px
95px
Gutter width
30px (15px on each side of a column)
Encajable
Sí
Offsets
Sí
Ordenado columna
N/A
Sí
Como hacíamos en la versión anterior la forma de construir nuestra web se basará en un código similar a esta:
<div class="row">En nuestra formación anterior las class eran nombradas por span ahora tendremos col dentro de nuestra fila
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
y dependiendo de nuestro dispositivo se usará xs, sm, md.
En el caso anteriormente descrito md correspondería a un diseño para movil o tablet.
Para trabajar por ejemplo entre "mobile" y "escritorio" usaríamos una "fusión" entre las dos clases.
.col-xs-12 .col-md-8
La forma de trabajar se asemejaria al siguiente código.
<!-- Para xs versión extra pequeña usaremos todas las columnas, mientras que para md medium grid usaremos 8 "columnas" para el primer div y 4 para el segundo. -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> <!-- En este caso dividiremos al 50% para movil y al 33.3% para escritorio -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div> <!-- En este caso dividiremos a la mitad el ancho de las columnas. -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Para fusionar tanto mobile, con tablet y desktops usaremos tanto el xs, sm, md y lg la class quedaría similar a .col-xs-12 .col-sm-6 .col-md-8.
Algo como en el siguiente ejemplo:
<div class="row">-XS-SM-MD-LG- Estos serían los prefix los cuales acompañaríamos de un -número del 1-12 como en el bootstrap 2.3.2. Según las necesidades.
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
La idea es similar a la versión anterior con la principal diferencia que podremos definir diferentes anchos para nuestros div, dependiendo del dispositivo al que vayan destinados.
No hay comentarios:
Publicar un comentario