in English

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 plantilla de página de inicio.

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren jQuery , Popper y nuestros propios complementos de JavaScript. Usamos la versión delgada de jQuery , pero también se admite la versión completa.

Coloque una de las siguientes <script>s cerca del final de sus páginas, justo antes de la etiqueta de cierre </body>, para habilitarlas. jQuery debe venir primero, luego Popper y luego nuestros complementos de JavaScript.

Paquete

Incluya todos los complementos de JavaScript de Bootstrap con uno de nuestros dos paquetes. Ambos bootstrap.bundle.jse bootstrap.bundle.min.jsincluyen Popper para nuestra información sobre herramientas y popovers, pero no jQuery . Incluya jQuery primero, luego un paquete de JavaScript de Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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 popovers) y luego nuestros complementos de JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Componentes

¿Tiene curiosidad por saber qué componentes requieren explícitamente jQuery, nuestro JavaScript y Popper? Haga clic en el enlace Mostrar componentes a continuación. Si no está seguro acerca de la estructura 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
  • Scrollspy para el comportamiento de desplazamiento y actualizaciones de navegación
  • Información sobre herramientas y popovers para mostrar y posicionar (también requiere Popper )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Eso es todo lo que necesita para los requisitos generales de la página. 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, shrink-to-fit=no">

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-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 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.chatservidor, en el #bootstrapcanal.
  • La ayuda de implementación se puede encontrar en Stack Overflow (etiquetado bootstrap-4).
  • 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 visibilidad.

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

CSP y SVG integrados

Varios componentes de Bootstrap incluyen SVG incrustados en nuestro CSS para diseñar componentes de manera consistente y sencilla en todos los navegadores y dispositivos. Para organizaciones con configuraciones de CSP más estrictas , hemos documentado todas las instancias de nuestros SVG integrados (todos los cuales se aplican a través de background-image) para que pueda revisar más a fondo sus opciones.

Según la conversación de la comunidad , algunas opciones para abordar esto en su propia base de código incluyen reemplazar las URL con activos alojados localmente, eliminar las imágenes y usar imágenes en línea (no es posible en todos los componentes) y modificar su CSP. Nuestra recomendación es revisar cuidadosamente sus propias políticas de seguridad y decidir cuál es el mejor camino a seguir, si es necesario.