Bootstrap5 Instalación y uso

Podemos instalar Bootstrap5 de las siguientes dos maneras:

Usar el CDN de Bootstrap5.
Desde el sitio oficialgetbootstrap.comDescargar Bootstrap 5.

Bootstrap 5 CDN

CDNJS：

Bootstrap5 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.2/umd/popper.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>

Nota:popper.min.js se usa para configurar popovers, tooltips y menús desplegables.

bootstrap.bundle.js (versión sin comprimir) o bootstrap.bundle.min.js (versión comprimida) incluye los complementos incluidos como popper.min.js y otros scripts dependientes, por lo que también podemos usar directamente el siguiente código:

Ejemplo

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>

Bootstrap5 CDN（jsDelivr）

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

Bootstrap5 CDN（Staticfile）

<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">


<script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

Además, también puedes usar los siguientes servicios CDN:

Recomendado en China 1:https://cdn.bytedance.com/
Recomendado en China 2:https://www.staticfile.net/
Recomendado internacional:https://cdnjs.com/

Descargar Bootstrap 5

Puedes ir al sitio web oficialhttps://getbootstrap.com/Descargar el paquete de recursos de Bootstrap5.

Nota:Además, también puedes instalarlo a través de herramientas de gestión de paquetes como npm, yarn, gem, composer, etc.
npm install bootstrap
yarn add bootstrap
gem install bootstrap -v 5.1.1
composer require twbs/bootstrap:5.1.1

Crear tu primera página de Bootstrap 5

1. Agregar el doctype de HTML5

Bootstrap requiere el tipo de archivo HTML5, por lo que debes agregar la declaración de doctype HTML5.

El doctype HTML5 se declara en la cabecera del documento y se configura la codificación correspondiente:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> </html>

Prioridad para dispositivos móviles

Para que los sitios web desarrollados con Bootstrap sean compatibles con dispositivos móviles y garantizar una representación adecuada y el zoom táctil, es necesario agregar la etiqueta meta viewport en el head de la página, como se muestra a continuación:

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

width=device-widthIndica que el ancho es el ancho de la pantalla del dispositivo.

initial-scale=1Indica la escala inicial.

Clases de contenedor

Bootstrap 5 necesita un elemento contenedor para envolver el contenido del sitio web.

Podemos usar las siguientes dos clases de contenedor:

La clase .container se usa para contenedores de ancho fijo y diseño responsivo.
La clase .container-fluid se usa para contenedores con ancho del 100%, que ocupan todo el viewport.

Dos páginas de Bootstrap 5

Ejemplo de .container en Bootstrap5

<div class="container"> <h1>Mi primera página de Bootstrap</h1> <p>Este es un texto.</p> </div>

Pruébalo »

El siguiente ejemplo muestra un contenedor que ocupa todo el viewport.

Ejemplo de .container-fluid en Bootstrap5

<div class="container-fluid"> <h1>Mi primera página de Bootstrap</h1> <p>Usa .container-fluid, con ancho del 100%, ocupando todo el viewport.</p> </div>