Introducción

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

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Inicio rápido

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

CSS

Para cargar nuestro CSS, copia y pega el <link> a la hoja de estilo en tu <head>, justo antes que todas las demás hojas de estilo.

<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. Coloca uno de los siguientes <script>s cerca del final de tus páginas, justo antes de la etiqueta de cierre </body>, para habilitarlos.

Bundle

Puedes añadir cada complemento y dependencia de JavaScript de Bootstrap con uno de nuestros dos paquetes. Tanto bootstrap.bundle.js como bootstrap.bundle.min.js incluyen Popper para nuestros tooltips (información emergente) y popovers (ventanas emergentes). Para obtener más información sobre lo que se incluye en Bootstrap, consulta nuestra sección 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 decides optar por la solución de scripts separados, Popper debe ser lo primero (si estás utilizando tooltips 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-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" 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 usas <script type="module">, consulta nuestra sección usando Bootstrap como módulo.

Componentes

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

Mostrar componentes que requieren JavaScript

Alerts, para ocultarlas
Buttons, para alternar sus estados y funcionalidad de checkbox/radio
Carousel, para todos los comportamientos de diapositivas, controles e indicadores
Collapse, para alternar la visibilidad del contenido
Dropdowns, para mostrar y posicionar (también requiere Popper)
Modals, para mostrar, posicionar y comportamiento de desplazamiento
Navbar, para extender nuestro complemento Collapse para implementar un comportamiento responsive
Offcanvases, para visualización, posicionamiento y comportamiento de desplazamiento
Toasts, para mostrar y ocultar
Tooltips 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úrate de configurar tus páginas con los últimos estándares de diseño y desarrollo. Eso significa usar un HTML5 doctype e incluir una metaetiqueta viewport para comportamientos responsive adecuados. Pon todo junto y tus 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-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" 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, visita Layout docs o nuestros ejemplos oficiales para comenzar a crear el contenido y componentes de tu sitio web.

Globales importantes

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

HTML5 doctype

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

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

Responsive meta tag

Bootstrap se desarrolla mobile first, una estrategia en la que primero optimizamos el código para dispositivos móviles y luego escalamos los componentes según sea necesario utilizando media queries CSS. Para garantizar una representación adecuada y el zoom táctil para todos los dispositivos, agrega la metaetiqueta responsive viewport a tu <head>.

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

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

Box-sizing

Para un dimensionamiento más sencillo en CSS, cambiamos el valor global box-sizing de content-box a border-box. Esto garantiza que el padding no afecte el ancho calculado final de un elemento, pero puede causar problemas con algunos software de terceros como Google Maps y Google Custom Search Engine.

En las raras ocasiones en que necesites anularlo, utiliza 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 ::before y ::after, heredarán el box-sizing especificado para ese .selector-for-some-widget.

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

Reboot

Para mejorar la compatibilidad entre navegadores, usamos Reboot para corregir las incoherencias entre navegadores.

Comunidad

Mantente actualizado sobre el desarrollo de Bootstrap y comunícate con la comunidad con estos útiles recursos.

Lee y suscríbete al Blog oficial de Bootstrap.
Únete a la sala oficial de Slack.
Chatea con compañeros Bootstrappers en IRC. En el servidor irc.libera.chat, en el canal #bootstrap.
Puedes encontrar ayuda para la implementación en Stack Overflow (etiquetado bootstrap-5).
Los desarrolladores deben usar la palabra clave bootstrap en los paquetes que modifican o agregan funcionalidad a Bootstrap cuando se distribuyen a través de npm o mecanismos de entrega similares para máxima capacidad de descubrimiento.

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

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.