Bootstrap 4
  • Contenidos
  • Introducción
    • Frameworks responsive
    • Funcionamiento del diseño adaptable
    • Probando el responsive
  • Página básica
  • Sistema de rejilla
    • Columnas de ancho específico
    • Columnas de ancho automático
    • Forzar el cambio de fila
    • Anidamiento de columnas
    • Márgenes o espaciado entre columnas
    • Ordenación de columnas
    • Alineación
  • Utilidades Responsive
  • Media Queries
  • Componentes Responsive
    • Botones
    • Desplegables
    • Grupos de botones
    • Formularios
    • Navegación
    • Barra de navegación
    • Tablas
  • Ejercicios 1
  • Ejercicios 2
  • Ejercicios 3
  • Ejercicios 4
  • Bibliografía
Powered by GitBook
On this page

Was this helpful?

Ejercicios 3

PreviousEjercicios 2NextEjercicios 4

Last updated 5 years ago

Was this helpful?

Ejercicio 1 - Maquetación de componentes

Para practicar con los componentes de Bootstrap y su integración en el sistema de rejilla se propone la realización de un nuevo sitio web con el siguiente aspecto:

Esta web está dividida en tres zonas: cabecera, zona de contenido y pie de página. En la zona de contenido se incluye 5 tarjetas (cards) con el mismo diseño. Como se puede ver en el diseño superior, el número de tarjetas por fila cambiará dependiendo del tamaño de la pantalla.

Además, al pulsar sobre el botón de las tarjetas (todas tendrán el mismo enlace), se abrirá la siguiente página:

Esta página tendrá un único diseño: barra superior, zona de contenido y pie de paǵina. En este caso en la barra superior se añadirá un botón para volver a la página anterior. En la zona de contenido tendremos un título, dos párrafos con texto de ejemplo, una imagen y dos botones (en la misma fila). El primer botón nos permitirá volver a la página anterior y el segundo mostrará una lista de acciones. Este segundo botón lo podemos implementar mediante un Dropdown que muestre las opciones: "Guardar favorito", "Exportar a PDF", "Imprimir" y "Compartir".