Programación Web: Bootstrap
Bootstrap es un "framework" (marco de trabajo) para diseñar webs a través de CSS y Javascript. Funciona añadiendo
una referencia a una hoja de estilo y a unos scripts de Javascript. Estos archivos pueden descargarse o
referenciarlos a través de un CDN ("Content Delivery Network", Red de Entrega de Contenido). Suele ser necesario
compaginarlo con una hoja de estilos propia para personalizar más el diseño.
https://getbootstrap.com/docs/4.3/getting-started/introduction/
1. Referencia al CSS
- Etiqueta
<link>
con la dirección de la hoja de estilos de bootstrap.
2. Referencia a los Javascript
- Etiquetas
<script>
con las direcciones de los scripts de JQuery, Popper.js (versión 'umd') y Bootstrap.
3. Uso de la librería
- El funcionamiento se basa principalmente en indicar mediante la
propiedad
class
de cada elemento el diseño que le queremos aplicar.
4. Contenedores
- El elemento básico en Bootstrap es el “contenedor”:
<div class=”container”>
- Contenedor fluido (ocupa todo el ancho de la ventana):
container-fluid
5. Diseño en rejilla
El diseño se basa en filas y columnas, que se adaptan al tamaño de la pantalla:
- Fila:
row
- Columna:
col-
- Para aplicar a partir de:
- pantallas muy pequeñas:
col-xs-
- pequeñas:
col-sm-
- medianas:
col-md-
- grandes:
col-lg-
- extra grandes:
col-xl-
- pantallas muy pequeñas:
- Para aplicar a partir de:
El diseño se divide en 12 columnas:
Ejemplo: Tres recuadros iguales (en horizontal) a partir de pantallas
medianas: tres columnas de clase col-md-4
(el elemento ocupa 4 columnas)
- Ancho variable según el contenido:
col-md-auto
- Columna que ocupe el ancho restante de la fila:
col
(col-sm
, etc.)
6. Modificar la disposición de los elementos
- Alineación vertical:
- Grupo:
align-items-start
align-items-center
align-items-end
- Individual:
align-self-start
align-self-center
align-self-end
- Grupo:
- Alineación horizontal:
justify-content-start
justify-content-center
justify-content-end
justify-content-around
(separados de forma equitativa)justify-content-between
(cada elemento en un extremo)
- Cambiar orden:
order-<<n° orden>>
Ejemplo:order-1
. Se puede añadir el ámbito en el que se aplica (order-md-3
)order-first order-last
- Mover elementos horizontalmente:
offset-<<n° columnas>>
Permite indicar el ámbito:offset-md-2
- Posición absoluta, relativa,...
position-absolute
position-relative
position-static
position-fix
position-sticky
- Posición fija inferior
fixed-bottom
7. Tamaño, márgenes, rellenos
- Ancho:
w
w-25
(25% de ancho respecto al padre)w-100
- No funciona con cualquier valor
- margen
m
, paddingp
t
superior,l
izquierda,r
derecha,b
inferior,x
izquierda y derecha,y
superior e inferior0-5
indica el tamaño del margen o paddingm-auto
: margen automático (centra).- Ejemplo:
ml-1
8. Colores
- Fondo:
bg-primary
bg-success
bg-danger
bg-warning
bg-info
9. Texto
text-center
text-justify
text-truncate
(añade puntos suspensivos a la parte de texto que no se muestra)text-<<color>>
font-weight-light
font-italic
text-muted
(tono gris para p.e.<small>
)
10. Tablas
table
(base para definir tablas)table-responsive-<<sm,md,lg,xl>>
(se coloca en un div que contiene a la tabla, permite hacerla adaptable)- Propiedad
scope=col
(se aplica en una celda que sea la referencia de la columna) - Propiedad
scope=row
(se aplica en una celda que sea la referencia de la fila) table-dark
thead-light
thead-dark
(se aplica en<thead>
)table-striped
(fondo de filas alterno)table-bordered
table-hover
table-sm
(tabla más pequeña)- Fondo para filas o celdas:
table-active
table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark
<caption>
(ayuda a los lectores de pantalla a identificar la tabla)
11. Imágenes
img-thumbnail
(añade un borde a la imagen)img-fluid
rounded
(redondea bordes)float-
(left
,right
)
12. Listas
list-
(unstyled
,inline
,inline-item
,group
)
13. Menús de navegación
- Necesita de enlazar a los scripts de Javascript.
- Dropdowns (enlaces desplegables):
<div id="dropdown"> <button class="btn btn-primary dropdown-toggle" id="btnmenu" data-toggle="dropdown">Grupo</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Item</a> </div> </div>
- Menús:
14. Botones
- Clase principal:
<button type="button" class="btn">
- Clases secundarias:
btn-primary
btn-secundary
- ...
btn-outline-primary
(fondo blanco, colorea el borde)
15. Badges
- Son pequeños recuadros o placas que pueden servir para indicar un número relacionado con una etiqueta
anterior (número de mensajes de una categoría), o para una etiqueta de “Nuevo”.
<span class="badge">45</span>
badge-info
, ...
16. Formularios
- Formularios en horizontal:
form-inline
- Componentes del formulario:
form-control
17. Resúmenes de noticias o artículos
media
en el elemento que engloba, dentro imagen (usar márgenes y alineación) ymedia-body
para el texto- Se puede usar en listas (
<ul class="list-unstyled">
,<li class="media">
)
18. Etiqueta “figure”
figure
,figure-img
,figure-caption
19. Lectores de pantalla
- Ayudan a personas con discapacidad visual a entender el contenido de la página
- Clase
sr-only
permite aplicar un texto explicativo que no se verá en pantalla. - Etiquetas
aria
también ayudan a definir contenido.
20. Alertas
alert
- Propiedad
role=alert
alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark
alert-link
(para que el color de los enlaces coincida)
21. Otras clases
- Añadir flexbox:
d-flex
- Añadir display box:
d-box
display-<<1-4>>
(otra forma de crear cabeceras)lead
(para que destaque un párrafo)blockquote
blockquote-footer
card
card-header
card-body
card-title
,card-text
card-footer