Bootstrap 4

El objetivo de Bootstrap es facilitarte la tarea de maquetar una página web de manera profesional y facilitando la codificación para que se adapte a cualquier dispositivo (ordenador, teléfono móvil, etc.). De hecho, maquetar una página web con Bootstrap es más sencillo que maquetarla utilizando tu propia codificación de CSS.

Bootstrap es tan guay, que esta misma página lo utiliza. Este site está hecho con WordPress, pero he modificado la plantilla para que utilice Bootstrap y ha resultado ser una gran decisión; me ha simplificado mucho la tarea de hacer mi página responsive.

Lecciones

Grid de Bootstrap 4

Sirven para estructurar, a nivel de diseño, la información. Deben estar dentro de un container. Existen containers de dos tipos: Inmediatamente dentro del container debemos incluir filas, es decir, div’s con el class row. Cada fila tiene como máximo (a no ser que lo modifiquemos), 12 posiciones. En el siguiente ejemplo […]

Offset

Ejemplo: Ejercicio: offset Tamaño extra small Tamaño grande

Utils

Display Posibles valores: none inline inline-block block table table-cell table-row flex inline-flex Alinear componentes horizontalmente Para ello aplicaremos los siguientes class aplicados en la row Alinear componentes verticalmente Para ello usaremos los siguientes class aplicados en la row: Margins y Padings Podemos usar los siguientes class: mt: margin-top mr: margin-right […]

Componentes

Aunque vamos a ver los componentes más habituales, puedes consultar en la documentación oficial todos los componentes. Cheasheet con una colección de snippets de Bootstrap 4 Carousel de imágenes Ejercicio carousel Hacer un carousel con las siguientes características: Dos diapositivas Un caption en la segunda diapositiva Un texto fijo que se […]

Ejercicio landing

En este ejercicio utilizaremos: Usaremos la plantilla Yeti. Para hacer más oscura la navigation bar usaremos el class bg-primary (en lugar de bg-light) y para que el texto aparezca con letras blancas, el class navbar-dark (en lugar de navbar-light) Un carousel Un formulario Navigation bar Badges List Group Cards Botones Cuadro modal

Aviso Legal | Política de privacidad