Bootstrap 5: cómo empezar

Tabla de contenido

¿Qué es Bootstrap?

Bootstrap es un framework front-end gratuito para un desarrollo web más rápido y sencillo
Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, botones, tablas, navegación, modales, carruseles de imágenes y muchos otros, así como complementos de JavaScript opcionales.
Bootstrap también te brinda la posibilidad de crear fácilmente diseños responsivos.

¿Qué es el Diseño Web Responsivo?

El diseño web responsivo consiste en crear sitios web que se ajusten automáticamente para verse bien en todos los dispositivos, desde teléfonos pequeños hasta computadoras de escritorio grandes.

Ejemplo de arranque 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Versiones de arranque

Bootstrap 5 (lanzado en 2021) es la versión más nueva de Bootstrap (lanzado en 2013); con nuevos componentes, hojas de estilo más rápidas y más capacidad de respuesta.

Bootstrap 5 admite las versiones más recientes y estables de todos los principales navegadores y plataformas. Sin embargo, Internet Explorer 11 y versiones inferiores no son compatibles.

La principal diferencia entre Bootstrap 5 y Bootstrap 3 y 4 es que Bootstrap 5 ha cambiado a JavaScript básico en lugar de jQuery.

Nota: El equipo aún admite Bootstrap 3 y Bootstrap 4 para correcciones de errores críticos y cambios en la documentación. y es perfectamente seguro seguir usándolos. Sin embargo, NO se agregarán nuevas funciones a a ellos.

¿Por qué utilizar Bootstrap?

Ventajas de Bootstrap:

Fácil de usar: Cualquiera con conocimientos básicos de HTML y CSS puede empezar a utilizar Bootstrap.
Funciones responsivas: el CSS responsivo de Bootstrap se ajusta a teléfonos, tabletas y computadoras de escritorio.
Enfoque móvil primero: en Bootstrap, los estilos móviles primero son parte del marco central
Compatibilidad del navegador: Bootstrap 5 es compatible con todos los navegadores modernos (Chrome, Firefox, Edge, Safari y Opera). Tenga en cuenta que si necesita soporte para IE11 y versiones anteriores, debe usar ya sea BS4 o BS3.

¿Dónde conseguir Bootstrap 5?

Hay dos formas de empezar a utilizar Bootstrap 5 en su propio sitio web.

Puede:

Incluir Bootstrap 5 desde una CDN
Descargue Bootstrap 5 desde getbootstrap.com

Bootstrap 5 CDN

Si no desea descargar y alojar Bootstrap 5 usted mismo, puede incluirlo desde una CDN (Content Delivery Network).

jsDelivr proporciona soporte CDN para CSS y JavaScript de Bootstrap:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Una ventaja de utilizar la CDN Bootstrap 5:
Muchos usuarios ya lo han descargado. Bootstrap 5 de jsDelivr al visitar Otro sitio. Como resultado, se cargará desde la memoria caché cuando visiten su sitio, lo que acelera el tiempo de carga. Además, la mayoría de las CDN se asegurarán de que una vez que un usuario solicite un archivo, se entregará. desde el servidor más cercano a ellos, lo que también conduce a un tiempo de carga más rápido.

¿JavaScript?
Bootstrap 5 usa JavaScript para diferentes componentes (como modales, información sobre herramientas, ventanas emergentes, etc.). Sin embargo, si solo usas el CSS forma parte de Bootstrap, no los necesitas.

Descargando Bootstrap 5

Si desea descargar y alojar Bootstrap 5 usted mismo, vaya a https://getbootstrap.com/, y sigue las instrucciones allí.

Crea tu primera página web con Bootstrap 5

1. Añade el tipo de documento HTML5

Bootstrap 5 utiliza elementos HTML y propiedades CSS que requieren el tipo de documento HTML5.

Incluya siempre el tipo de documento HTML5 al principio de la página, junto con el atributo lang y el título y juego de caracteres correctos:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap 5 es móvil primero

Bootstrap 5 está diseñado para responder a dispositivos móviles. Los estilos móviles primero son parte del marco central.

Para garantizar una representación adecuada y un zoom táctil, agregue la siguiente etiqueta dentro del Elemento <head>:

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

La parte width=device-width establece el ancho de la página para seguir el ancho de la pantalla. del dispositivo (que variará según el dispositivo).

La parte initial-scale=1 establece el nivel de zoom inicial cuando la página se carga por primera vez. por el navegador.

3. Contenedores

Bootstrap 5 también requiere un elemento contenedor para envolver el contenido del sitio.

Hay dos clases de contenedores para elegir:

La clase .container proporciona un contenedor de ancho fijo responsivo
La clase .container-fluid proporciona un contenedor de ancho completo, que abarca todo el ancho de la ventana gráfica.

.container

.container-fluid

Dos páginas básicas de Bootstrap 5

El siguiente ejemplo muestra el código para una página básica de Bootstrap 5 (con un contenedor responsivo de ancho fijo):

Ejemplo de contenedor

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

El siguiente ejemplo muestra el código para una página básica de Bootstrap 5 (con un contenedor de ancho completo):

Ejemplo de fluido de contenedor

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Pruébelo usted mismo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>