Grid: Preparativos

En la maquetación de una página comenzamos por la declaración del tipo de documento, en nuestro caso, para el diseño de rejillas, tenemos que usar HTML5, por lo que empezamos nuestra página con:

 <!DOCTYPE html> <html lang="es">    ...    </html>

Móviles

Lo segundo que tenemos que poner es unas líneas para los móviles. En Bootstrap 3 ya están incluídos los estilos para que se vea todo bien por lo que lo único que debemos incorporar es una línea dentro del HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1">

Con esta línea, hacemos que el zoom funcione correctamente, ajustando el que viene en los navegadores móviles por defecto. Con esta línea es suficiente para que funcione correctamente, pero si queremos deshabilitarlo solamente tenemos que añadirle la propiedad: user-scalable=1 en la ínea anterior:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">

Imágenes Responsive

En mi opinión, esto ha sido un retroceso de esta versión (Bootstrap3), las imágenes ya no tienen un comportamiento responsive por defecto como ocurría en Bootstrap2, sino que hay que añadirle a cada imagen una clase, .img-responsive, que incluye las propiedades: max-width: 100% y height: auto; consiguiendo así que la imagen se escale en función del elemento que la contenga.

<img src="…" class="img-responsive" alt="Imagen responsive">

Por lo cual, es algo que hay que recordar cada vez que pongamos una imagen y advertir también de ello, a los gestores de los contenidos futuros de la web.

Normalizar CSS

Lo que tiempos atrás llamabamos reset.css, resetear estilos, ahora los llamamos Normalizar, y por supuesto van mucho más allá de lo que antaño, consiguiendo igualar todas las diferencias de los navegadores al comprender nuestras medidas, propiedades y funciones.
Podemos verlo en su página oficial: normalize.css

Centrar contenido

En nuestra maquetación HTML4, siempre usabamos un contenedor general para que el contenido de la web quedase centrado respecto al navegador, usabamos un div y una clase a la cual le dabamos el nombre que nos gustase porque nosotros ibamos a crear el estilo. Ahora, debemos usar “container”, pues es el nombre de la clase en Bootstrap para éste efecto. Los containers no se pueden anidar debido a las propiedades que tienen asignadas. De este modo, comenzamos la estructura de la página.

<div class="container"> …

Seguiremos avanzando en otros artículos.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s