¿Qué es?
Bootstrap (inicialmente Blueprint) es un framework desarrollado por Twitter y publicado por ellos mismos. Este framework gratuito y de código abierto nos ayuda a maquetar de forma muy sencilla nuestra página web en los distintos dispositivos(sitios web responsive). Además incluye diversas plantillas de diseño desde las que podemos partir.
¿Cuáles son sus funcionalidades?
Su principal funcionalidad es la capacidad de adaptar la interfaz de una página web al tamaño de la pantalla del dispositivo en el que se vea. Además dispone de varios componentes que podemos incluir:
- Alertas
- Carrusel
- Formularios
- Botones
- Dropdowns
- Spinners
- Barra de progreso
- Menú
- Tarjetas
- Breadcrumb
- Paginación
CARACTERÍSTICAS DE BOOTSTRAP
- Mobile-first: primero se preocupa de desarrollar una página web para dispositivos móviles, y luego para ordenadores.
- Compatible con css y Javascript.
- Compatibilidad con JQuery y con las Medias Queries.
- Utiliza Flexbox por defecto.
- Amplia compatibilidad con los principales navegadores del mercado(Chrome,Firefox,Internet Explorer, Edge,…)
- Responsive design: el diseño de la web se adapta automáticamente al tamaño del dispositivo.
- Dispone de un gran apoyo por parte de la comunidad en github.
ICONOS CON BOOTSTRAP
Este famoso framework también incorpora más de 140 iconos que podemos utilizar en la página web. Para utilizarlos podemos añadirlos mediante clases entre otras formas. En esta web podemos ver todos los iconos disponibles: https://icons.getbootstrap.com.
Para utilizarlos podemos añadirlos con su CDN para iconos:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">SISTEMA DE COLUMNAS(GRID) EN BOOTSTRAP
Este sistema GRID que incorpora Bootstrap se basa en un diseño de 12 columnas que nos permite diseñar y organizar nuestra página web en distintos dispositivos de diferentes tamaños. Este sistema creado con flexbox divide la pantalla en filas y estas a su vez se dividen en 12 columnas.
Ejemplo:
1º) Será diseñar un contenedor principal con la clase container, dentro estableceremos las filas row y dentro las columnas col. También podríamos utilizar col-x para las columnas donde la x es el número de columnas a ocupar, o incluso definir las columnas así col-lg-x indicamos el numero de columnas a ocupar para una pantalla superior a 992px.
<div class="container">
<div class="row">
<div class="col-lg-1"> 1</div>
<div class="col-lg-1"> 2</div>
<div class="col-lg-1"> 3</div>
<div class="col-lg-1"> 4</div>
<div class="col-lg-1"> 5</div>
<div class="col-lg-1"> 6</div>
<div class="col-lg-1"> 7</div>
<div class="col-lg-1"> 8</div>
<div class="col-lg-1"> 9</div>
<div class="col-lg-1"> 10</div>
<div class="col-lg-1"> 11</div>
<div class="col-lg-1"> 12</div>
</div>
<div class="row">
<div class="col-lg-6">Primera columna </div>
<div class="col-lg">Segunda columna</div>
<div class="col-lg">Tercera columna</div>
</div>
<div class="row">
<div class="col-lg-6">
Primera de tres columnas 3fila
</div>
<div class="col-lg-6">
Segunda de tres columnas 3fila
</div>
<div class="col-lg">
Tercera de tres columnas 3fila
</div>
</div>
</div>
Todo esto nos puede resultar muy útil para diseñar nuestra web y repartir el contenido para diferentes pantallas.
Por ejemplo en esta web podemos ver como se comporta el contenido al redimensionar:
https://cdpn.io/enlil25/fullpage/Xmaqjx
CDN BOOTSTRAP
Como ya hemos visto podemos cargar ciertas librerías utilizando un CDN (Content Delivery Network) el cual nos permite cargar una librería desde un servidor externo reduciendo los tiempos de carga. El framework Bootstrap dispone de un CDN que podemos agregar a nuestras páginas web.
BOOTSTRAP 4 :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">BOOTSTRAP 5:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">