Ejercicios 1
Ejercicio 1 - Diseño responsive (1 punto)
En este ejercicio vamos a practicar con la librería Bootstrap y su sistema de rejilla. Partiremos de la plantilla para una página web básica facilitada en la teoría, le añadiremos un contenedor de tipo container e iremos añadiendo filas y columnas intentando imitar el diseño (y colores) del esquema de la siguiente figura:
En el esquema de la figura se pueden ver tres disposiciones de la misma web, la de la izquierda se refiere a los tamaños grandes (lg) y medianos (md), la disposición central al tamaño pequeño o de tablets (sm) y la de la derecha la correspondiente a móviles (xs).
Tenéis que aplicar las clases de Bootstrap necesarias para que al cambiar el tamaño de la pantalla se cambie la disposición de los bloques como se muestra en el esquema. Tened en cuenta que la columna roja tendrá que desaparecer cuando el tamaño sea extra pequeño (xs).
Ejercicio 2 - Offset y ordenación (1 punto)
En este ejercicio vamos a practicar con algunas características más de Bootstrap: la posibilidad de añadir un offset (o espacio inicial a las columnas), el cambio de orden de los elementos de una fila y la visibilidad de las columnas según el tamaño del dispositivo.
Para ello nos crearemos una nueva página web partiendo de la plantilla básica, le añadiremos un contendor de tipo container e iremos añadiendo filas y columnas intentando imitar el diseño, colores y contenidos del esquema de la siguiente figura:
Tened en cuenta que:
La segunda fila (que contiene 4 columnas con los números 1, 2, 3 y 4) es solamente una fila a la que se le han añadido offsets. Para forzar el cambio de fila se puede añadir un elemento entre la 2ª y la 3ª columna que solo sea visible cuando la pantalla sea mediana o grande (md o lg) y que aplique la clase
clearfixde Bootstrap.El orden de la tercera fila (con las letras a, b, c, d) se ha alterado para las disposiciones de pantalla grandes (md o lg) usando las clases de bootstrap
col-*-push-*ycol-*-pull-*.En la 5ª fila naranja se ha aplicado un cambio de orden y un offset para las pantallas grandes y medianas (md o lg). Además, cuando la pantalla sea de tipo xs se deberá de ocultar una de sus columnas.
La fila azul claro en la que pone Desktop (para pantallas lg o md), Tablet (para sm) y Mobile (cuando la pantalla es xs) en realidad son 3 filas distintas con clases para que solo se muestren en dichos tamaños de pantalla.
La última fila se deberá de ocultar solamente cuando la pantalla sea del tipo xs.
Ejercicio 3 - Personalizando mediante media query (1 punto)
En este ejercicio se pide que creéis una nueva página web usando la librería Bootstrap. El contenido aparecerá centrado en la pantalla y constará de tres filas con el siguiente contenido y disposición cuando la pantalla sea de tamaño medio (md) y grande (lg):
Una fila en la parte superior con una única columna con fondo verde que ocupará todo el ancho, en dicha columna aparecerá el texto "Header" alineado a la izquierda y en grande.
Una segunda fila con tres columnas en color rojo con el mismo ancho y con los números 1, 2 y 3 (respectivamente) centrados y en letras grandes.
La tercera y última fila contendrá dos columnas de igual ancho y en color amarillo, la primera columna tendrá el texto "footer 1" alineado a la derecha y la segunda el texto "footer 2" alineado a la izquierda (ambos usando un tamaño de fuente grande).
En la siguiente imagen se puede ver un esquema de la web a realizar:
Como se puede ver en el esquema de la imagen la disposición de las columnas y la alineación de los textos variará dependiendo del tamaño de la pantalla. Tenéis que reproducir este comportamiento para que la apariencia de la web sea similar al esquema (número de columnas, alineaciones de los textos y colores) cuando el tamaño de la pantalla sea la de un tablet (sm) o la de un teléfono (xs).
Tened en cuenta que:
Siempre que sea posible se utilizarán las clases que provee Bootstrap.
Cuando no sea posible (por ejemplo para controlar la alineación de los textos y el cambio de color de fondo) tendréis que definir una media query que lo haga.
Última actualización
