Apuntes
- Instalación manual o a través de enlace: https://getbootstrap.com/docs/4.4/getting-
started/introduction/
- Containers - Contenedores, es una caja con un ancho y padding, el elemento se coloca en el
centro de la web.
- Cómo crear columnas en Bootstrap - Para crear columnas lo primero que tienes que hacer es
crear un elemento HTML padre con la etiqueta row. Esta etiqueta le dice a Bootstrap que el
contenido van a ser columnas.
Otra cosa que tienes que tener en cuenta es que Bootstrap se basa en un sistema de 12
columnas, es decir, teniendo 12 columnas en total, si quieres crear dos columnas de igual
tamaño, tienes que crear 2 columnas de 6. Si quieres 3 columnas tienes que crear 3 columnas
de 4 porque 3 * 4 = 12 columnas en total.
Por cierto, si lo que quieres es que todas las columnas de un row tengan el mismo ancho, no
hace falta que especifiques un tamaño, te vale con poner simplemente la clase col a cada
columna:
Las columnas que hemos creado hasta ahora, tienen el un el ancho que especifiquemos en la
clase y siempre será el mismo para todos los dispositivos. Si quieres cambiar el ancho de una
columna para cierto dispositivo tienes que usar estas clases:
- xs ancho de pantalla de más de 576px
- sm ancho de pantalla de más de 768px
- md ancho de pantalla de más de 992px
- lg ancho de pantalla de más de 1200px
Como los estilos se van a aplicar desde la medida en píxeles hacia arriba, tienes que tener en
cuenta que si aplicas un ancho a una columna para los dispositivos sm, también se van aplicar
en los md y en los lg
Por ejemplo, imagina que quieres crear una fila que tenga tres columnas y quieres que en
ordenador una de ellas ocupe más, en tablets ocupen lo mismo y en móvil se pongan una
debajo de la otra ocupando toda la fila:
Botones de Bootstrap
Para crear un botón tienes que usar la clase btn. Dentro de los botones bootstrap ha creado
una serie de tipos:
Para aumentar o disminuir el tamaño del botón tenemos que añadir la clase btn-lg, btn-sm, o
btn-xs dependiendo del tamaño que queramos.
Alertas
Las alertas sirven para mostrar un mensaje al usuario. Como pasa con los botones, las alertas
tienen varios tipos:
Breadcrumbs
Los breadcrubs o migas de pan, sirven para mostrar la situación del usuario dentro de una
página. Indica al usuario dónde está y de dónde viene:
Cards
Las cards o tarjetas, sirven para agrupar el contenido. Se suelen utilizar para crear listas de
elementos, por ejemplo, artículos de blog, tweets, colecciones de elementos, etc.
Esta sección en Bootstrap daría para un artículo entero, por lo que voy a ponerte un par de
ejemplos, si quieres ver todas las posibilidades te dejo el enlace a la sección en la
documentación de bootstrap:
https://getbootstrap.com/docs/4.3/components/card/
Collapse
Este elemento sirve para moder añadir un botón cuya funcionalidad sea poder ocular y
mostrar cierto contenido, es decir, crear elementos colapsables.
Dropdowns
Los dropdowns o multiselect, sirven para que el usuario pueda escoger una opción para un
conjunto de posibilidades:
Modal
Los popups son ventanas emergentes que se abren cuando el usuario interacciona con cierto
elemento de una página como un botón o un enlace.
Para que el modal pueda funcionar, Bootstrap lo que hace es usar la etiqueta de data-toggle
(en este caso modal) y de la etiqueta de data-target (en el ejemplo es el id del modal que se
crea abajo). Para cerrar el modal se usa la etiqueta html de data-dismiss=”modal”. Dentro del
modal puedes colocar el contenido que quieras.
Navbar de Bootstrap
Como pasa con los cards de Bootstrap, el navbar también tiene muchas opciones. Lo que voy a
poner a continuación es el ejemplo más típico con todas las cosas. Si quieres encontrar más
información mira este enlace:
https://getbootstrap.com/docs/4.3/components/navbar/
Lo bueno del navbar es que ya viene preparado con el típico icono de burger (tres líneas
horizontales) que aparece en la versión móvil sin que tengas que hacer nada.
Otros elementos que no hemos visto
Badge: Pequeñas etiquetas para meter texto o números
Button group: Agrupación de botones
Carousel: Agrupación de botones
Formularios: Una de las secciones más extensas de Bootstrap. Tiene todo tipo de elementos
para crear formularios. Muy recomendable.
Jumbotron: Header con información
List group: Agrupación de elementos en forma de lista
Media object: Componente para la creación de elementos repetitivos como tweets, artículos
de blog, etc
Modal: Popup
Navs: Lista de enlaces para la navegación de una web
Pagination: Para maquetar la paginación de una web
Popovers: Pequeños popups que aparecen al lado del contenido
Progress: Barra de progreso
Scrollspy: Para maquetar áreas scrollables
Spinners: Animaciones de carga
Toasts: Para maquetar notificaciones
Tooltips: Ayudas dentro del contenido
Otras utilidades
Además de los elementos funcionales y contenedores que hemos visto antes, Bootstrap
también ofrece una serie de clases de apoyo que puedes utilizar donde quieras.
Colores
Bootstrap tiene una serie de clases preparadas para poder poner colores directamente a los
textos y colores de fondo. La única pega es que los colores son los que ya vienen con Bootstrap
y si quieres colores nuevos te los tienes que hacer tu a mano:
Colores para textos:
Sombras
También viene con sombras ya hechas para ser aplicadas rápidamente sin esfuerzo:
Tamaños
Muy útil cuando necesitas poner un tamaño en porcentaje y no quieres crear una clase solo
para eso:
Mostrar y ocultar elementos
Para mostrar y ocultar elementos de forma sencilla puedes utilizar estas dos clases:
Otros elementos que no hemos visto
Como en el apartado de los elementos visuales, me dejo una serie de elementos que también
vienen con Bootstrap pero que no los he incluído porque personalmente no los uso mucho,
aunque a ti te pueden venir bien:
Bordes: Para aplicar bordes a elementos
Clearfix: Limpiar los floats
Icono de cerrar: Icono con la típica “X” para cerrar cosas
Display: Para poder añadir propiedades de display de CSS poniendo solo su etiqueta html
Embed: Para incrustar elementos como vídeos o webs dentro de una página
Flex: Propiedades flex de CSS
Float: Propiedades float de CSS
Image replacement: Reemplazar contenido por una imagen de fondo
Overflow: Propiedades overflow de CSS
Position: Propiedades position de CSS
Screen readers: Ocultar contenido a los lectores de pantalla
Spacing: Dar espacios y padding entre elementos
Stretched link: links que ocupen todo el contenido
Text: Clases de ayuda para texto
Vertical align: Alineación vertical de elementos
