Comience con Bootstrap

Bootstrap es un potente conjunto de herramientas de front-end repleto de funciones. Cree cualquier cosa, desde el prototipo hasta la producción, en minutos.

En esta página

Inicio rápido

Comience incluyendo el CSS y JavaScript listos para producción de Bootstrap a través de CDN sin necesidad de ningún paso de compilación. Véalo en la práctica con esta demostración de Bootstrap CodePen .

Cree un nuevo index.htmlarchivo en la raíz de su proyecto. Incluya la <meta name="viewport">etiqueta también para un comportamiento receptivo adecuado en los 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>

Incluye CSS y JS de Bootstrap. Coloque la <link>etiqueta en el <head>para nuestro CSS y la <script>etiqueta para nuestro paquete de JavaScript (incluido Popper para colocar menús desplegables, ventanas emergentes e información sobre herramientas) antes del cierre </body>. Obtenga más información sobre nuestros enlaces de CDN .

<!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-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

También puedes incluir Popper y nuestro JS por separado. Si no planea usar menús desplegables, ventanas emergentes o información sobre herramientas, ahorre algunos kilobytes al no incluir Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

¡Hola Mundo! Abra la página en el navegador de su elección para ver su página Bootstrapped. Ahora puede comenzar a construir con Bootstrap creando su propio diseño , agregando docenas de componentes y utilizando nuestros ejemplos oficiales .

enlaces CDN

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

Descripción	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

También puede usar la CDN para obtener cualquiera de nuestras compilaciones adicionales que se enumeran en la página Contenidos .

Próximos pasos

Lea un poco más sobre algunas configuraciones de entorno global importantes que utiliza Bootstrap.
Lea sobre lo que se incluye en Bootstrap en nuestra sección de contenido y la lista de componentes que requieren JavaScript a continuación.
¿Necesitas un poco más de potencia? Considere compilar con Bootstrap al incluir los archivos fuente a través del administrador de paquetes .
¿ Está buscando usar Bootstrap como un módulo con <script type="module">? Consulte nuestra sección sobre el uso de Bootstrap como módulo .

Componentes JS

¿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 nuestros complementos Collapse y Offcanvas para implementar comportamientos receptivos
Navs con el complemento Tab para alternar paneles de contenido
Offcanvases para visualización, posicionamiento y comportamiento de desplazamiento
Scrollspy para el comportamiento de desplazamiento y actualizaciones de navegación
Tostadas para mostrar y despedir
Información sobre herramientas 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 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ás un estilo funky e incompleto.

<!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 el inicio rápido .

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, al mismo tiempo que brindamos 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 .
Pregunte y explore nuestras discusiones de GitHub .
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 descubrimiento.

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