Bootstrap
5.3
Primeros pasos
Introducción

Comienza con Bootstrap

Bootstrap es un conjunto de herramientas de interfaz potente y repleto de funciones. Construye cualquier cosa, desde el prototipo hasta la producción, en minutos.

Inicio rápido

Comienza incluyendo CSS y JavaScript listos para producción de Bootstrap a través de CDN sin necesidad de realizar ningún paso de compilación. Velo en la práctica con esta demo de Bootstrap CodePen (opens in a new tab).

  1. Crea un nuevo archivo index.html en la raíz de tu proyecto. Incluye el <meta name="viewport"> también para un comportamiento de respuesta adecuado (opens in a new tab) en dispositivos móviles.
HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
  1. Incluye CSS y JS de Bootstrap. Coloca la etiqueta <link> en el <head> para nuestro CSS y la etiqueta <script> para nuestro paquete JavaScript (incluido Popper para colocar menús desplegables, poppers y tooltips) antes del </body>. Obtén más información sobre nuestros enlaces CDN.
HTML
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

También puedes incluir Popper (opens in a new tab) y nuestro JS por separado. Si no planeas usar menús desplegables, ventanas emergentes popovers o tooltips, ahorra algunos kilobytes al no incluir Popper.

HTML
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
  1. ¡Hola mundo! Abre la página en el navegador de tu elección para ver tu página Bootstrapped. Ahora puedes empezar a construir con Bootstrap creando tu propio layout, agregando docenas de componentes y utilizando nuestros ejemplos oficiales.

Enlaces CDN

Como referencia, aquí están nuestros enlaces CDN principales.

DescripciónURL
CSShttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css (opens in a new tab)
JShttps://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js (opens in a new tab)

También puedes usar la CDN para obtener cualquiera de nuestras compilaciones adicionales enumeradas en la página Contenidos.

Próximos pasos

Componentes JS

¿Tienes curiosidad por saber qué componentes requieren explícitamente nuestro JavaScript y Popper? 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.

  • Alertas descartables
  • Botones para alternar estados y funcionalidad de casilla de verificación/radio
  • Carrusel para todos los comportamientos, controles e indicadores de las diapositivas.
  • Contraer para alternar la visibilidad del contenido
  • Menú desplegables para visualización y posicionamiento (también requiere Popper (opens in a new tab))
  • Modales para mostrar, posicionar y comportamiento de desplazamiento
  • Barra de navegación para extender nuestros complementos Collapse y Offcanvas para implementar comportamientos responsive
  • Navs con el complemento Tab para alternar paneles de contenido
  • Offcanvases para visualización, posicionamiento y comportamiento de desplazamiento
  • Scrollspy para comportamiento de desplazamiento y actualizaciones de navegación
  • Toasts para mostrar y descartar
  • Tooltips y popovers para mostrar y posicionar (también requiere Popper (opens in a new tab))

Globales importantes

Bootstrap emplea un puñado de estilos y configuraciones globales importantes, todos los cuales están casi exclusivamente orientados a la normalización de estilos entre navegadores. Vamos a sumergirnos.

HTML5 doctype

Bootstrap requiere el uso de HTML5 doctype. Sin él, verás un estilo original e incompleto.

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

Viewport meta

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 usando media queries CSS. Para garantizar una representación adecuada y un zoom táctil para todos los dispositivos, agrega la metaetiqueta responsive de viewport a tu <head>.

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

Puedes ver un ejemplo de esto en acción en el inicio rápido.

Box-sizing

Para un dimensionado 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 final calculado de un elemento, pero puede causar problemas con algunos programas de terceros como Google Maps y Google Custom Search Engine.

En las raras ocasiones en que necesites sobrescribirlo, usa algo como lo siguiente:

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

Con el fragmento anterior, los elementos anidados (incluido el contenido generado mediante ::before y ::after) heredarán el box-sizing especificado para ese .selector-for-some-widget.

Obtén más información sobre model box y tamaños en CSS Tricks (opens in a new tab).

Reboot

Para mejorar el renderizado entre navegadores, utilizamos Reboot para corregir inconsistencias entre navegadores y dispositivos mientras proporcionando restablecimientos un poco más obstinados de elementos HTML comunes.

Community

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

También puedes seguir a @getbootstrap en Twitter (opens in a new tab) para conocer los últimos chismes y fantásticos vídeos musicales.

Descargar