Introducción

Comience con Bootstrap, el marco de trabajo más popular del mundo para crear sitios adaptables para dispositivos móviles, con jsDelivr y una página de inicio de plantilla.

En esta página

Inicio rápido

¿Está buscando agregar rápidamente Bootstrap a su proyecto? Use jsDelivr, un CDN gratuito de código abierto. ¿Utiliza un administrador de paquetes o necesita descargar los archivos fuente? Dirígete a la página de descargas .

CSS

Copie y pegue la hoja de estilo <link>antes que <head>todas las demás hojas de estilo para cargar nuestro CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren nuestros propios complementos de JavaScript y Popper . Coloque una de las siguientes <script>s cerca del final de sus páginas, justo antes de la etiqueta de cierre </body>, para habilitarlas.

Paquete

Incluya cada complemento y dependencia de JavaScript de Bootstrap con uno de nuestros dos paquetes. Ambos bootstrap.bundle.jse bootstrap.bundle.min.jsincluyen Popper para nuestra información sobre herramientas y ventanas emergentes. Para obtener más información sobre lo que se incluye en Bootstrap, consulte nuestra sección de contenidos .

<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>

Separado

Si decide optar por la solución de secuencias de comandos separadas, Popper debe ser lo primero (si está utilizando información sobre herramientas o popovers) y luego nuestros complementos de JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Módulos

Si usa <script type="module">, consulte nuestra sección sobre el uso de Bootstrap como módulo .

Componentes

¿Tiene curiosidad por saber qué componentes requieren explícitamente nuestro JavaScript y Popper? Haga clic en el enlace Mostrar componentes a continuación. Si no está seguro acerca de la estructura general de la página, siga leyendo para ver una plantilla de página de ejemplo.

Mostrar componentes que requieren JavaScript

Alertas por despedir
Botones para alternar estados y funcionalidad de casilla de verificación/radio
Carrusel para todos los comportamientos de diapositivas, controles e indicadores
Colapso para alternar la visibilidad del contenido
Menús desplegables para visualización y posicionamiento (también requiere Popper )
Modales para mostrar, posicionar y comportamiento de desplazamiento
Barra de navegación para extender nuestro complemento Collapse para implementar un comportamiento receptivo
Offcanvases para visualización, posicionamiento y comportamiento de desplazamiento
Tostadas para mostrar y despedir
Información sobre herramientas y popovers para mostrar y posicionar (también requiere Popper )
Scrollspy para el comportamiento de desplazamiento y actualizaciones de navegación

Plantilla de inicio

Asegúrese de configurar sus páginas con los últimos estándares de diseño y desarrollo. Eso significa usar un tipo de documento HTML5 e incluir una metaetiqueta de ventana gráfica para comportamientos de respuesta adecuados. Póngalo todo junto y sus páginas deberían verse así:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Para conocer los próximos pasos, visite los documentos de diseño o nuestros ejemplos oficiales para comenzar a diseñar el contenido y los componentes de su sitio.

Globales importantes

Bootstrap emplea un puñado de estilos y configuraciones globales importantes que deberá tener en cuenta al usarlo, todos los cuales están orientados casi exclusivamente a la normalización de estilos de navegadores cruzados. Sumerjámonos.

tipo de documento HTML5

Bootstrap requiere el uso del tipo de documento HTML5. Sin él, verá un estilo funky incompleto, pero incluirlo no debería causar contratiempos considerables.

<!doctype html>
<html lang="en">
  ...
</html>

Metaetiqueta responsiva

Bootstrap se desarrolla primero para dispositivos móviles , una estrategia en la que primero optimizamos el código para dispositivos móviles y luego escalamos los componentes según sea necesario utilizando consultas de medios CSS. Para garantizar una representación adecuada y el zoom táctil para todos los dispositivos, agregue la metaetiqueta de ventana gráfica sensible a su archivo <head>.

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

Puede ver un ejemplo de esto en acción en la plantilla de inicio .

tamaño de caja

Para un dimensionamiento más sencillo en CSS, cambiamos el box-sizingvalor global de content-boxa border-box. Esto garantiza paddingque no afecte el ancho calculado final de un elemento, pero puede causar problemas con algún software de terceros como Google Maps y Google Custom Search Engine.

En las raras ocasiones en que necesite anularlo, use algo como lo siguiente:

.selector-for-some-widget {
  box-sizing: content-box;
}

Con el fragmento anterior, los elementos anidados, incluido el contenido generado a través de ::beforey , ::afterheredarán todos los especificados box-sizingpara ese archivo .selector-for-some-widget.

Obtenga más información sobre el modelo de caja y el tamaño en CSS Tricks .

Reiniciar

Para mejorar la representación entre navegadores, usamos Reiniciar para corregir las inconsistencias entre los navegadores y dispositivos mientras proporcionamos restablecimientos ligeramente más obstinados a los elementos HTML comunes.

Comunidad

Manténgase actualizado sobre el desarrollo de Bootstrap y comuníquese con la comunidad con estos útiles recursos.

Lea y suscríbase al blog oficial de Bootstrap .
Chatea con compañeros Bootstrappers en IRC. En el irc.libera.chatservidor, en el #bootstrapcanal.
La ayuda de implementación se puede encontrar en Stack Overflow (etiquetado bootstrap-5).
Los desarrolladores deben usar la palabra clave bootstrapen los paquetes que modifican o agregan a la funcionalidad de Bootstrap cuando se distribuyen a través de npm o mecanismos de entrega similares para una máxima capacidad de detección.

También puede seguir a @getbootstrap en Twitter para conocer los últimos chismes y videos musicales increíbles.