Bootstrap

Bootstrap es un conjunto de herramientas frontend potente y repleto de funciones. Construye cualquier cosa, desde un prototipo hasta un producto final, en cuestión de minutos.

Comienza con Bootstrap

Comienza incluyendo el CSS y JavaScript listos para producción de Bootstrap a través de CDN sin necesidad de ningún paso de construcción.

  • Crea un nuevo archivo index.html en la raíz de tu proyecto. Incluye la etiqueta <meta name="viewport"> también para un comportamiento responsive adecuado en dispositivos móviles.

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

Lenguaje del código: HTML, XML (xml)
  • Incluye el CSS y JS de Bootstrap. Coloca la etiqueta <link> en la sección <head> para nuestro CSS, y la etiqueta <script> para nuestro paquete de JavaScript (incluyendo Popper para la posición de desplegables, popovers y tooltips) antes del cierre de </body>.

<!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-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 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-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

Lenguaje del código: HTML, XML (xml)

También puedes incluir Popper y nuestro JS por separado. Si no planeas usar desplegables, popovers o tooltips, ahorra algunos kilobytes no incluyendo Popper.


<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-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

Lenguaje del código: HTML, XML (xml)
  • ¡Hola, mundo! Abre la página en el navegador de tu elección para ver tu página con Bootstrap. Ahora puedes comenzar a construir con Bootstrap creando tu propio diseño, agregando docenas de componentes y utilizando nuestros ejemplos oficiales.

Enlaces CDN para Bootstrap

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

DescripciónURL
CSShttps://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JShttps://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

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

Pasos siguientes:

  1. Lee un poco más sobre algunos ajustes importantes del entorno global que Bootstrap utiliza.
  2. Lee sobre lo que está incluido en Bootstrap en nuestra sección de contenido y la lista de componentes que requieren JavaScript a continuación.
  3. ¿Necesitas un poco más de potencia? Considera construir con Bootstrap incluyendo los archivos fuente a través del gestor de paquetes.
  4. ¿Buscas utilizar Bootstrap como un módulo con <script type="module">? Por favor, consulta nuestra sección sobre el uso de Bootstrap como un módulo.

Componentes de JavaScript

¿Curioso sobre qué componentes requieren explícitamente nuestro JavaScript y Popper? Si tienes alguna duda sobre la estructura general de la página, sigue leyendo para ver un ejemplo de plantilla de página.

  • Alertas para poder desestimarlas.
  • Botones para alternar estados y funcionalidad de casillas de verificación/radio.
  • Carrusel para todos los comportamientos de diapositivas, controles e indicadores.
  • Colapsos para alternar la visibilidad del contenido.
  • Desplegables para mostrar y posicionar (también requiere Popper).
  • Modales para mostrar, posicionar y comportamiento de desplazamiento.
  • Barra de navegación para extender nuestros plugins Collapse y Offcanvas para implementar comportamientos responsivos.
  • Navegaciones con el plugin Tab para alternar paneles de contenido.
  • Offcanvas para mostrar, posicionar y comportamiento de desplazamiento.
  • Scrollspy para comportamiento de desplazamiento y actualizaciones de navegación.
  • Toasts para mostrar y desestimar.
  • Tooltips y popovers para mostrar y posicionar (también requiere Popper).

Globales importantes

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

Doctype de HTML5

Bootstrap requiere el uso del doctype de HTML5. Sin él, verás algunos estilos extraños e incompletos.


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

Lenguaje del código: HTML, XML (xml)

Meta de viewport

Bootstrap está desarrollado pensando en dispositivos móviles, una estrategia en la que optimizamos el código para dispositivos móviles primero y luego escalamos los componentes según sea necesario utilizando consultas de medios CSS.

Para garantizar un renderizado adecuado y el zoom táctil para todos los dispositivos, agrega la etiqueta meta de viewport receptiva a tu <head>.


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

Lenguaje del código: HTML, XML (xml)

Box-sizing

Para un dimensionamiento más sencillo en CSS, cambiamos el valor global de box-sizing de content-box a border-box. Esto asegura 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 la rara ocasión en la que necesites anularlo, utiliza algo como lo siguiente:


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

Lenguaje del código: CSS (css)

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

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

Reinicio

Para mejorar el renderizado entre navegadores, utilizamos Reboot para corregir inconsistencias entre navegadores y dispositivos, al mismo tiempo que proporcionamos reinicios ligeramente más orientados a elementos HTML comunes.