PDF de programación - Bootstrap 3

Tabla de contenido

Contenidos
Introducción

Frameworks responsive
Funcionamiento del diseño adaptable
Probando el responsive

Página básica
Sistema de Rejilla

Forzar el cambio de fila
Anidamiento de columnas
Márgenes o espaciado entre columnas
Ordenación de columnas

Utilidades responsive
Media Queries
Componentes Responsive

Botones
Desplegables
Grupos de botones
Formularios
Navegación
Barra de navegación
Tablas
Ejercicios 1
Ejercicios 2
Bibliografía

1.1
1.2
1.2.1
1.2.2
1.2.3
1.3
1.4
1.4.1
1.4.2
1.4.3
1.4.4
1.5
1.6
1.7
1.7.1
1.7.2
1.7.3
1.7.4
1.7.5
1.7.6
1.7.7
1.8
1.9
1.10

2

Contenidos

Contenidos

El diseño de webs tipo "responsive" permite crear webs adaptables a diferentes tamaños de
pantalla, desde webs para pantallas tamaño escritorio, pasando por tablets, hasta webs
para móviles. Este tipo de diseño se basa en crear un único código y utilizar reglas y estilos
CSS para adaptar los contenidos a los diferentes tamaños de pantalla.

Los contenidos principales del libro son:

Introducción

Frameworks responsive
Funcionamiento del diseño adaptable
Probando el responsive

Página básica
Sistema de rejilla

Forzar el cambio de fila
Anidamiento de columnas
Márgenes o espaciado entre columnas
Ordenación de columnas

Utilidades responsive
Media Queries
Componentes Responsive

Botones
Desplegables
Grupos de botones
Formularios
Navegación
Barra de navegación
Tablas
Ejercicios
Bibliografía

3

Introducción

Introducción al diseño "responsive"

El diseño web responsive, adaptable o adaptativo, conocido por las siglas RWD (del inglés,
Responsive Web Design) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la
apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día
las páginas web se visualizan en multitud de tipos de dispositivos como tabletas,
smartphones, libros electrónicos, portátiles, PCs, etc. Esta tecnología pretende que con un
solo diseño web tengamos una visualización adecuada en cualquier dispositivo.

El diseño responsive se basa en proporcionar a todos los usuarios de una web los mismos
contenidos y una experiencia de usuario lo más similar posible, frente a otras
aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o
webs servidas dinámicamente en función del dispositivo.

Aunque todas tienen pros y contras, la web responsive es considerada por muchos expertos
como la mejor práctica posible, al unificar la web, reducir tiempos de desarrollo y ofrecer
grandes ventajas para SEO móvil.

Variabilidad en las resoluciones de pantalla

Durante muchos años el desarrollo web se ha basado en la resolución estándar de
1024×768 (hace apenas 3 años aproximadamente el 40% de los usuarios tenía esta
resolución). Pero en la actualidad existe una amplia variedad de resoluciones, no solo en
pantallas de ordenadores de escritorio sino también para tablets y dispositivos móviles.

4

Introducción

Es muy importante conocer todas estas estadísticas así como cuales son las dimensiones
de pantalla de los usuarios, a qué público vamos dirigidos, etc. y así poder tenerlo en
cuenta en la usabilidad de nuestra web. Ya no es posible centrar el desarrollo pensando que
los usuarios van a tener (en un alto porcentaje) una única resolución de pantalla.

Desde hace ya unos años en el desarrollo web se ha sustituido en cierta medida el
problema de la compatibilidad de navegadores (gracias a que poco a poco todas las
compañías se están ciñendo a los estándares con HTML5/CSS3 y otras se basan
directamente en web-kit) por el problema de las resoluciones de los dispositivos.

En la siguiente tabla se pueden ver las últimas estadísticas (2014) de las resoluciones de
pantalla más utilizadas:

Resolución

% utilización

> 1920x1080
1920x1080
1366x768
1280x1024
1280x800
1024x768
800×600
< 800×600

34%
13%
31%
8%
7%
6%
0.5%
0.5%

En la actualidad ya no es 1024x768 la resolución más utilizada, sino que es 1366×768 y
resoluciones superiores a 1920x1080.

Es fundamental tener en cuenta que en el diseño responsive, al variar tanto las posibles
resoluciones en las que se verá nuestra web deberemos mostrar en primer lugar los
contenidos más importantes e imprescindibles.

Ejemplos de sitios web creados con tecnología
Responsive

En un artículo llamado: "Responsive Web Design: 50 Examples and Best Practices"
muestra excelentes ejemplos de la aplicación de esta tecnología. Algunos de estos
ejemplos son:

dConstruct 2011

5

Introducción

Boston Globe

Food Sense

6

Introducción

Deren keskin

7

Frameworks responsive

Frameworks responsive

Como se suele decir, en vez de reinventar la rueda y programar nosotros todo el diseño
responsive, podemos aprovechar algunos de los frameworks que existen en el mercado
para este propósito. Nos ahorrarán muchísimo tiempo, partiremos de código ampliamente
probado, y de unos diseños base de todos los elementos web bastante más bonitos que la
que tendrían de forma nativa.

Actualmente existen en el mercado una amplia variedad de este tipo frameworks
responsive, algunos de los más utilizados son:

Bootstrap (http://getbootstrap.com/): Este framework es uno de los más populares del
mercado, habiendo sido desarrollado por el equipo de Twitter. Bootstrap ha sido creado
pensando en ofrecer la mejor experiencia de usuario tanto a usuarios de PC (IE7
incluido!), como a smartphones y tabletas. Utiliza un grid responsive de 12 columnas y
trae integrado decenas de complementos, plugins de JavaScript, tipografía,
controladores de formularios y mucho más. Además utiliza el preprocesador de CSS
LESS.

Foundation (http://foundation.zurb.com/): Junto con Bootstrap es uno de los
frameworks más avanzados que existen en la actualidad. Ha sido desarrollado con
SASS, un potente preprocesador de CSS que hace de Foundation un framework
fácilmente personalizable. Además saca partido de las nuevas tecnologías y funciona
con IE8+.

Skeleton (http://getskeleton.com/): Skeleton es un boilerplate que ofrece un grid
responsive basado en una resolución de 960px que se ajusta al tamaño de los
dispositivos móviles. Tiene poco peso e incluye una colección de archivos CSS y JS
para facilitarnos el diseño de nuestra web.

HTML5 Boilerplate (http://html5boilerplate.com/): Al igual que los demás nos ofrece un
set de utilidades para construir nuestra web responsive de forma rápida y sencilla, con
la ventaja de ser uno de los que menos ocupan.

En este curso nos vamos a centrar en Bootstrap por ser uno de los frameworks más
completos, más utilizados y que mejor funcionan. En las siguientes secciones estudiaremos
en detalle el funcionamiento de esta librería.

Bootstrap

8

Frameworks responsive

Como ya hemos comentado antes, Bootstrap es uno de los frameworks más populares y
utilizados del mercado para la creación de páginas responsive, habiendo sido desarrollado
por el equipo de Twitter.

Entre los navegadores soportados se encuentran Chrome, Firefox, Opera, Safari e Internet
Explorer a partir de la versión 8 (aunque en la versión 7 también funciona correctamente).

Está preparado para funcionar tanto en navegadores de PCs y portátiles con cualquier
tamaño de pantalla así como para tablets y smartphones de tamaños mucho más
reducidos.

Para conseguir que una misma web se pueda visualizar correctamente en todos esos
tamaños de pantalla ha diseñado un avanzado sistema de rejilla dividido en columnas para
el posicionamiento de los elementos de nuestra web. Además incorpora otras muchas
utilidades y complementos (formularios, botones, barras de navegación, etc.) para
simplificar el desarrollo de una web responsive.

9

Funcionamiento del diseño adaptable

Funcionamiento del diseño adaptable

El diseño responsive se basa en adaptar dinámicamente el diseño web en función de la
resolución de la pantalla del visitante. De esta forma adaptamos nuestras webs a
dispositivos móviles sin necesidad de tener dos sitios separados y al mismo tiempo también
podemos adaptar la web a resoluciones grandes para mejorar la experiencia de usuario.

Antiguamente se pensaba en hacer 2 diseños, uno para móviles y otro para web, sin
embargo, el diseño responsive trata de estructurar o adaptar el contenido que ya tienes en
el diseño original a otros formatos diferentes: móviles, tablets y versión de escritorio, como
bien muestra esta imagen:

La solución técnica que se le ha dado en el desarrollo web al problema de esta diversidad
de resoluciones web se llama Responsive Web Design y nos permite hacer interfaces
adaptadas al entorno del usuario mediante estructuras, bloques, columnas e imágenes
fluidas gracias a media-queries de CSS.

A partir de CSS 2.1 las hojas de estilo han incluido los media types, lo cual nos ha facilitado,
por ejemplo, proveer un estilo distinto para el diseño de impresión:

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

10

Funcionamiento del diseño adaptable

A partir de CSS 3 el W3C creó las media queries. Una media query nos permite apuntar no
sólo a ciertas clases de dispositivos, sino realmente inspeccionar las características físicas
del dispositivo que está renderizando nuestro trabajo. Para utilizarlas podemos incorporar
una query al atributo media de un link a una hoja de estilos:

<link rel="stylesheet" type="text/css" href="shetland.css"
media="screen and (max-device-width: 480px)" />

La query contiene dos componentes:

Un media type (screen, print o all).
La consulta entre paréntesis, conteniendo una característica a inspeccionar (max-
device-width o min-device-width) seguida por el valor al que apuntamos (480px).

También es posible utilizarlas directamente en el CSS como parte de una regla @media :

@media screen and (max-device-width: 480px) {
.column {
float: none;
}
}

Por ejemplo, si quisiéramos crear un estilo de bloques fluidos que para pantallas grandes se
muestre uno a continuación del otro y para pantallas pantall