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.
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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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.js
e bootstrap.bundle.min.js
incluyen 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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 ventanas emergentes) y luego nuestros complementos de JavaScript.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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
- 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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-sizing
valor global de content-box
a border-box
. Esto garantiza padding
que 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 ::before
y , ::after
heredarán todos los especificados box-sizing
para 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.chat
servidor, en el#bootstrap
canal. - La ayuda de implementación se puede encontrar en Stack Overflow (etiquetado
bootstrap-5
). - Los desarrolladores deben usar la palabra clave
bootstrap
en 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.