Scribd
Cargar
45 vistas40 páginas

Guía Completa de Bootstrap 5

Curso de Bootstrap 5

Cargado por

ortizalan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
45 vistas40 páginas

Guía Completa de Bootstrap 5

Curso de Bootstrap 5

Cargado por

ortizalan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Bootstrap 5

Miguel Ortuño
Escuela de Ingenierı́a de Fuenlabrada
Universidad Rey Juan Carlos

Diciembre de 2024

Miguel Ortuño - 2024 Boostrap 5 1


©2024 Miguel Ortuño
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0

Miguel Ortuño - 2024 Boostrap 5 2


Caracterı́sticas

¿Qué es Bootstrap?

Bootstrap es un framework libre para desarrollo web


Desarrollado inicialmente en 2011 por ingenieros de Twitter
La versión actual, Bootstrap 5, aparece en mayo de 2021. A
diferencia de las anteriores, emplea vanilla JavaScript, no
jQuery
Incluye plantillas HTML y CSS con tipografı́as, formas,
botones, cuadros, tablas, barras de navegación, carruseles de
imágenes y muchas otras
Aunque su preferencia es mobile first, permite crear diseños
que se ven bien en múltiples dispositivos (responsive design)
Orientado a programadores, no a diseñadores gráficos
Es posiblemente la herramienta más popular para este fin,
aunque hay alternativas como Foundation

Miguel Ortuño - 2024 Boostrap 5 3


Caracterı́sticas

Caracterı́sticas de Bootstrap

Ventajas
Resulta sencillo y rápido escribir páginas con muy buen
aspecto
Se adapta a distintos dispositivos (responsive design)
Proporciona un diseño consistente
Es compatible con los navegadores modernos
Es software libre
Inconvenientes
Al ser una herramienta muy popular, las páginas web que no
estén personalizadas quedan iguales que las de todo el mundo
No es especialmente fácil personalizar los estilos (Foundation
puede ser más adecuado para esto)

Miguel Ortuño - 2024 Boostrap 5 4


Caracterı́sticas

Holamundo en Bootstrap

Para usar Bootstrap basta con


Definir el viewport
Incluir un elemento link apuntando al CSS de Bootstrap
Incluir un elemento script apuntando al código JavaScript de
Bootstrap

Miguel Ortuño - 2024 Boostrap 5 5


Caracterı́sticas

<!doctype html>
<html lang="es-ES">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
rel="stylesheet" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>

<title>Holamundo en Bootstrap 5</title>


</head>

<body>
<div class="container">
<h1>Holamundo en Bootstrap 5</h1>
</div>
</body>

</html>

http://ortuno.es/hola_bootstrap5.html

Miguel Ortuño - 2024 Boostrap 5 6


Caracterı́sticas

Adaptación del contenido a la pantalla

Ya desde su diseño original, un requisito importante para el web es


que las páginas se pueda representar en pantallas de cualquier
tamaño. Con la aparición de los smartphones, esto es aún más
necesario y más complicado. A lo largo de los años se han usado
varias técnicas para conseguir esto, cada vez mejores
1 Técnica inicial
Viewport. Barras de desplazamiento horizontal y vertical,
recomposición de los elementos sobre el viewport
2 Primeros smartphones
Viewport virtual
3 Teléfonos móviles actuales
Diseño responsive basado en grid

Miguel Ortuño - 2024 Boostrap 5 7


Caracterı́sticas

Viewport
Para diseñar webs en dispositivos móviles, es importante tener
claro qué es el viewport y cómo se comporta
Viewport es la zona visible de una página web. En los
navegadores tradicionales de escritorio, coincide con la
ventana del navegador
Supongamos una página web grande y compleja, como la
portada de un periódico. La página no cabrá en la ventana del
navegador, el usuario usará las barras de scroll para mover el
viewport sobre el documento. Al redimensionar la ventana,
cambiará el tamaño del viewport
Cambiar el tamaño del viewport reposiciona el texto y todos
los elementos: las lı́neas se truncan, las imáges se recolocan,
etc
Viewport es un rectángulo donde se compone un fragmento (tal
vez completo) de la página web para presentarla al usuario
Miguel Ortuño - 2024 Boostrap 5 8
Caracterı́sticas

Viewport virtual

Con la aparición de los navegadores en teléfonos móviles, los


cambios del tamaño de la pantalla son mucho más drásticos. La
técnicas tradicionales siguen funcionando, pero proporcionan una
experiencia de uso muy poco satisfactoria
El área visible de un móvil es demasiado pequeña, componer
una página web tradicional en ese viewport queda mal.
Observa lo que sucede en esta página antigua cuando la
ventana es muy grande o muy pequeña
https://tinyurl.com/y7e77lvw
Además, en un navegador para móvil no hay barras de scroll,
ocuparı́an un espacio demasiado valioso. Ni ventanas, serı́an
demasiado pequeñas

Miguel Ortuño - 2024 Boostrap 5 9


Caracterı́sticas

Para solucionar este problema, aparece el concepto del viewport


virtual, mayor que el viewport fı́sico, esto es, mayor que lo que se
puede representar en la pantalla real del dispositivo
Lo introduce Apple para Safari en iOS, luego pasa a ser
estándar
El ancho del viewport virtual es razonablemente grande, por
ejemplo 980 pixeles en el navegador safari para iPhone
El navegador compone la página sobre este viewport virtual,
ya no hacen falta barras desplazamiento horizontal
El usuario arrastra el viewport fı́sico (la pantalla real, más
pequeña) sobre el viewport virtual, para que le muestre una
zona u otra del documento. También se le puede permitir
hacer zoom
Redimensionar este viewport fı́sico ya no provoca la
recomposición de la página

Miguel Ortuño - 2024 Boostrap 5 10


Caracterı́sticas

Páginas responsive

Una página web moderna con un minimo de calidad se entiende


que tiene que ser responsive
La página se adapta al tamaño de la pantalla (escritorio,
tablet, móvil), sin usar la barra de desplazamiento horizontal,
que es muy incómoda. La barra de desplazamiento vertical se
sigue usando, no es molesta
El diseño responsive tal y como lo conocemos en la actualidad
se basa en el uso de un grid. En español se traduce por
cuadrı́cula, rejilla o casilla 1 . Aquı́ veremos el grid de
Bootstrap, hay otros pero siempre son similares
En estas páginas ya no hace falta un viewport virtual, porque
la página está diseñada para adaptarse al viewport ordinario
(la pantalla pequeña)

1
en ocasiones le llamaremos celda por analogı́a con las hojas de cálculo
Miguel Ortuño - 2024 Boostrap 5 11
Caracterı́sticas

Las mismas 12 casillas se presenta de forma distinta en un


ordenador

XXXXXXXXXXXX

En un tablet
XXXXXX
XXXXXX

En un móvil
XXXX
XXXX
XXXX

Miguel Ortuño - 2024 Boostrap 5 12


Caracterı́sticas

Mobile first
Con una propiedad de etiqueta meta, podemos indicar la
escala inicial del viewport
Como las páginas con bootstrap son responsive, especificamos
que el viewport virtual coincida con el ancho de la pantalla,
esto es, con el viewport ordinario. En otras palabras: que no
haya un viewport virtual

<meta name="viewport" content="width=device-width, initial-scale=1">

También se puede inhabilitar el zoom en dispositivos móviles


con user-scalable=no
Los usuarios sólo podrán hacer scroll y tendrá una apariencia
nativa.

<meta name="viewport" content="width=device-width, initial-scale=1,


maximum-scale=1, user-scalable=no">

Miguel Ortuño - 2024 Boostrap 5 13


Rejilla de Bootstrap

Contenedores

Para que sean responsivos,todos los elementos de Bootstrap


deben estar dentro de un elemento contenedor
Los contenedores no se pueden anidar
Asegúrate de cerrar correctamente cada contenedor. Si alguna
fila queda fuera, sus columnas quedarán mal alineadas. Y este
error no lo detecta el W3C validator.

Miguel Ortuño - 2024 Boostrap 5 14


Rejilla de Bootstrap

Para un contenedor responsivo de tamaño fijo, se usa .container

<div class="container">
...
</div>

http://ortuno.es/container.html

Si se desea un contenedor con el ancho total (del viewport), se ha


de usar .container-fluid

<div class="container-fluid">
...
</div>

http://ortuno.es/container_fluid.html

Miguel Ortuño - 2024 Boostrap 5 15


Rejilla de Bootstrap

El sistema de cuadrı́culas de Boostrap


La pantalla se divide en filas y columnas
Llamaremos celda a la intersección entre una fila y una
columna 2
El contenido se coloca dentro de una celda, y siempre se
mostrará dentro de esa misma celda
El ancho de cada celda se mide en casillas
En cada fila hay hasta 12 casillas, que el diseñador decide
cómo repartir entre celdas
Cuando la pantalla tiene la suficiente resolución, las celdas de
la misma fila se ven unas al lado de otras (disposición normal)
Cuando la resolución disminuye, las celdas que originalmente
estaban en la misma fila, pasan a verse unas encima de otras
(disposición apilada)
2
en realidad Bootstrap no usa este concepto, habla solo de columna, pero
entendemos que es una terminologı́a confusa: un ladrillo individual no puede ser
una columna, hacen falta varios ladrillos apilados
Miguel Ortuño - 2024 Boostrap 5 16
Rejilla de Bootstrap

Cada fila es un elemento div de HTML con la clase row.


Observa que empleando notación de los selectores de CSS
(donde el punto significa clase), podemos llamarle .row
Dentro de la fila hay elementos a los que en esta asignatura
llamamos celdas, que pueden ser de los tipos .col-N,
.col-sm-N, .col-md-N, .col-lg-N, .col-xl-N o
.col-xxl-N
Ejemplo:

<div class="row">
<div class="col-md-4">
</div>
</div>

Estos 6 tipos de celdas dependen del ancho de viewport (pantalla)


en el que queramos que las celdas se muestren en disposición
normal, no apilada

Miguel Ortuño - 2024 Boostrap 5 17


Rejilla de Bootstrap

.col-N
Pantallas muy pequeñas, de menos de 576px
.col-sm-N
Pantallas pequeñas de al menos 576px
.col-md-N
Pantallas medianas de al menos 768px
.col-lg-N
Pantallas grandes de al menos 992px
.col-xl-N
Pantallas muy grandes de al menos 1200px
.col-xxl-N
Pantallas extra grandes de al menos 1400px
Donde N es un número entre 1 y 12, que indica el ancho de cada
columna. El total de las columnas de cada fila puede sumar un
máximo de 12. La frontera entre cada uno de estos tamaños se
denomina breackpoint
Miguel Ortuño - 2024 Boostrap 5 18
Rejilla de Bootstrap

Columnas .col-xxl-N
Disposición normal en pantallas extra grandes.
Se apilan en pantallas muy grandes, grandes, medianas,
pequeñas o muy pequeñas
Columnas .col-xl-N
Disposición normal en pantallas muy grandes o extra grandes.
Se apilan en pantallas grandes, medianas, pequeñas o muy
pequeñas
Columnas .col-lg-N
Disposición normal en pantallas grandes, muy grandes o extra
grandes.
Se apilan en medianas, pequeñas o muy pequeñas

Miguel Ortuño - 2024 Boostrap 5 19


Rejilla de Bootstrap

Columnas .col-md-N
Disposición normal en pantallas medianas, grandes, muy
grandes o extra grandes.
Se apilan en: pequeñas o muy pequeñas
Columnas .col-sm-N
Disposición normal en pantallas pequeñas, medianas, grandes,
muy grandes o extra grandes.
Se apilan en muy pequeñas
Columnas .col-N
Disposición normal en cualquier pantalla: muy pequeñas,
pequeñas, medianas, grandes, muy grandes o extra grandes.
Nunca se apilan

Miguel Ortuño - 2024 Boostrap 5 20


Rejilla de Bootstrap

Dicho de otro modo


Cada tipo de columna se muestra en su disposición normal,
esto es, horizontalmente, si la pantalla es de su tipo o de un
tipo mejor
En otro caso, las casillas se apilan verticalmente
Esto parece un poco complicado, pero con el siguiente ejemplo
verás que no:
1 Vete a
http://ortuno.es/rejilla_01.html
2 Maximiza la ventana
3 Vete reduciéndo el ancho gradualmente. Esto es equivalente a
tener una pantalla menor. Verás que según vayas reduciendo,
las cuadrı́culas que originalmente están en disposición normal
(horizontal) se van apilando (verticalmente)

Miguel Ortuño - 2024 Boostrap 5 21


Rejilla de Bootstrap

Alineación horizontal de las cuadrı́culas


Las celdas (que formarán columnas cuando sean varias a la misma
distancia del eje vertical) se pueden alinear de diversa forma en
horizontal añadiendo a la fila (el div de clase row) las clases

justify-content-start
justify-content-center
justify-content-end
justify-content-around
justify-content-between
justify-content-evenly

En el código fuente de este ejemplo podrás ver


El resultado de usar las distintas clases de alineamiento
horizontal. En este caso con dos columnas de 3 casillas cada
una
El uso de la clase border con el color border-primary
http://ortuno.es/rejilla_02.html

Miguel Ortuño - 2024 Boostrap 5 22


Componentes de Bootstrap

Componentes de Bootstrap

Bootstrap viene con una serie de estilos (generalmente en formato


de clase CSS) y componentes en JavaScript.
btn
table
card
carousel
y otras utilidades responsivas

Miguel Ortuño - 2024 Boostrap 5 23


Componentes de Bootstrap

Colores contextuales
La gama concreta de colores se decidirá en el CSS.
Aquı́ pondremos clases con valor semántico.
Con alguna excepción como light o white, puesto que al elegir
el color del fondo, puede ser necesario indicar también el color
del texto (en este ejemplo, el texto blanco sobre fondo blanco
no se ve)

<h2>Colores del texto</h2>


<p class="text-muted">Muted (silenciado, apagado).</p>
<p class="text-primary">Primary.</p>
<p class="text-success">Success (éxito).</p>
<p class="text-info">Info.</p>
<p class="text-warning">Warning.</p>
<p class="text-danger">Danger.</p>
<p class="text-secondary">Secondary.</p>
<p class="text-body">Body (tı́picamente negro).</p>
<p class="text-light">Light grey .</p>
<p class="text-white">White.</p>

Miguel Ortuño - 2024 Boostrap 5 24


Componentes de Bootstrap

<h2>Colores del fondo</h2>


<p class="bg-primary text-white">Primary.</p>
<p class="bg-success text-white">Sucess (éxito)</p>
<p class="bg-info text-white">Info.</p>
<p class="bg-warning text-white">Warning.</p>
<p class="bg-danger text-white">Danger.</p>
<p class="bg-secondary text-white">Secondary.</p>
<p class="bg-dark text-white">Dark (grey).</p>
<p class="bg-light text-dark">Light (grey).</p>

http://ortuno.es/colores.html

Miguel Ortuño - 2024 Boostrap 5 25


Componentes de Bootstrap

Botones

La clase btn de Bootstrap puede añadirse a los elementos HTML


<button>, <input> y <a>
Tienen efecto hover: destacan un botón cuando se posiciona
el ratón encima

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-secondary">secondary</button>
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-warning">warning</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-dark">dark</button>
<button type="button" class="btn btn-light">light</button>
<button type="button" class="btn btn-link">link</button>

Miguel Ortuño - 2024 Boostrap 5 26


Componentes de Bootstrap

<button type="button" class="btn btn-outline-primary">btn-outline-primary</button>


<button type="button" class="btn btn-outline-secondary">btn-outline-secondary</button>
<button type="button" class="btn btn-outline-success">btn-outline-success</button>
<button type="button" class="btn btn-outline-info">btn-outline-info</button>
<button type="button" class="btn btn-outline-warning">btn-outline-warning</button>
<button type="button" class="btn btn-outline-danger">btn-outline-danger</button>
<button type="button" class="btn btn-outline-dark">btn-outline-dark</button>
<button type="button" class="btn btn-outline-light text-dark">btn-outline-light</button>

Con el atributo disabled (atributo, no clase), el botón queda


inhabilitado

<button type="button" class="btn btn-primary" disabled>


disabled Primary
</button>

http://ortuno.es/botones.html

Miguel Ortuño - 2024 Boostrap 5 27


Componentes de Bootstrap

Imágenes

Para modificar el aspecto de una imagen, Bootstrap, nos permite


añadir clases al elemento <img>
Contorno:
rounded
Esquinas redondeadas
rounded-circle
Circular
img-thumbnail
Miniatura (reborde blanco)

Miguel Ortuño - 2024 Boostrap 5 28


Componentes de Bootstrap

Alineación:
float-start
Izquierda
float-end
Derecha
mx-auto d-block
centrada
fluid
El uso de esta clase es especialmente interesante: no fijamos
un tamaño en pixeles, sino que la imagen se adapta en cada
caso para ocupar todo el espacio disponible en la celda. Si la
imagen no cabe, se reduce (no se trunca)

Miguel Ortuño - 2024 Boostrap 5 29


Componentes de Bootstrap

<div class="row">
rounded
<div class="col-xl-12">
<img src="images/plaza_espana.jpg" alt="Plaza de España,
,→ Madrid"
width="400" class="rounded">
</div>
</div>

http://ortuno.es/imagenes.html

Miguel Ortuño - 2024 Boostrap 5 30


Componentes de Bootstrap

Tablas
Para dar formato a un elemento <table>, Bootstrap 5 nos ofrece
las clases .table, .table-bordered, .table-hover, .table-dark y
.table-striped
<table class="table table-striped">
<thead>
<tr>
<th>Baraja española</th>
<th>Baraja francesa</th>
</tr>
</thead>
<tbody>
<tr>
<td>Caballo</td>
<td>Reina</td>
</tr>
<tr>
<td>Rey</td>
<td>Rey</td>
</tr>
</tbody>
</table>

http://ortuno.es/tablas.html

Miguel Ortuño - 2024 Boostrap 5 31


Componentes de Bootstrap

cards

Una tarjeta (card) es una caja redondeada dividida en cabecera,


cuerpo y pie.
Es útil para agrupar otros elementos como botones,
formularios, imágenes, etc
Sucesor de los antiguos panels en las versiones anteriores de
Bootstrap
Se les puede poner un color contextual de fondo añadiendo las
clases que ya conocemos:
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger,
.bg-secondary, .bg-dark and .bg-light

Miguel Ortuño - 2024 Boostrap 5 32


Componentes de Bootstrap

<div class="card" style="width:400px">


<div class="card-header">
<h4 class="card-title">Gato Panchi</h4>
</div>
<div class="card-body">
<img src="images/gato.jpg" alt="Fotografı́a de un gato
llamado Panchi" width="300" class="mx-auto d-block">
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary float-end">Más
,→ información</a>
</div>
</div>

http://ortuno.es/card.html

Miguel Ortuño - 2024 Boostrap 5 33


Formularios

Formularios

Bootstrap incluye clases para mejorar el aspecto y usabilidad de los


formularios
El uso de <label> es necesario, no es válido escribir texto
HTML para identificar los elementos del formulario
Los distintos elementos de un formulario aparecen unos debajo
de otros. Si los queremos unos al lado de otros, usaremos las
filas y columnas de la rejilla

Miguel Ortuño - 2024 Boostrap 5 34


Formularios

A los <label> les añadimos class="form-label"


A los elementos de entrada de texto, <input> y <textarea>
les añadimos class="form-control"
A los <checkbox> los metemos en un <div> al que añadimos
class="form-check"
A los <input type="radio"> <input type="checkbox">
les añadimos class="form-check-input"
http://ortuno.es/form_b5.html

Miguel Ortuño - 2024 Boostrap 5 35


Formularios

carousel

El componente carousel muestra fotografı́as que se desplazas


horizontalmente, como un pase de diapositivas. Se les puede añadir
tı́tulo o cualquier otro texto
El elemento de mayor nivel jerárquico del carrusel es un div
con las clases carousel y slide Tiene un atributo id cuyo valor
será referenciado por los botones que contenga

<div id="carrusel01" class="carousel slide"


data-bs-ride="carousel">

Miguel Ortuño - 2024 Boostrap 5 36


Formularios

El .slide .carousel contendrá tres divs


.carousel-indicators
Los puntos o pequeñas lı́neas que representan cada una de las
fotos. Un div de clase carousel-indicators
.carousel-inner
Un div de clase carousel-inner con las imágenes.
Cada imagen es un carousel-item, que contiene la imagen y un
carousel-caption. Importante: es muy recomendable que todas
las imágenes tenga la misma relacion alto/ancho
Los botones
http://ortuno.es/carrusel.html

Miguel Ortuño - 2024 Boostrap 5 37


Formularios

Deshabilitar elementos

Como hemos visto, muchos elementos bootstrap admiten la clase


disabled para indicar que tengan un aspecto gráfico distinto,
deshabilitado
Pero esto no los deshabilita realmente
Para deshabilitar por completo un elemento, usamos el
atributo disabled
<button type="button" class="btn btn-lg" disabled>Botón</button>
<input type="text" name="lname" disabled><br>

Miguel Ortuño - 2024 Boostrap 5 38


Formularios

Depuración

Si la página no tiene el aspecto que buscas:


Asegúrate de que todos los elementos están dentro de un
container. Normalmente solo deberı́as usar uno para la página
Usa el W3C validator. Detectará p.e. elementos sin cerrar
(aunque no elementos cerrados en el sitio incorrecto)
Comprueba que la estructura de los div está bien, que no has
cerrado ninguno demasiado pronto o demasiado tarde. Un
buen editor te ayudará con esto mostrando el código por
niveles. P.e atom cuenta con los atajos Ctrl k Ctrl 1, Ctrl k
Ctrl 2, Ctrl k Ctrl 3, etc
Si usas Bootstrap, no añadas directamente reglas CSS.
Excepto si estás seguro de lo que haces

Miguel Ortuño - 2024 Boostrap 5 39


Formularios

Enlaces relacionados

Documentación oficial
https://getbootstrap.com/docs/5.1/getting-started
Tutorial en w3schools
https://www.w3schools.com/bootstrap5/index.php

Miguel Ortuño - 2024 Boostrap 5 40

También podría gustarte