Source

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, proporcionado de forma gratuita por la gente de jsDelivr. ¿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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren jQuery , Popper.js y nuestros propios complementos de JavaScript. Coloque 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.js y luego nuestros complementos de JavaScript.

Usamos la versión delgada de jQuery , pero también se admite la versión completa.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

¿Tiene curiosidad por saber qué componentes requieren explícitamente jQuery, nuestro JS y Popper.js? 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 mostrar y posicionar (también requiere Popper.js )
  • Modales para mostrar, posicionar y comportamiento de desplazamiento
  • Barra de navegación para extender nuestro complemento Collapse para implementar un comportamiento receptivo
  • Información sobre herramientas y popovers para mostrar y posicionar (también requiere Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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.

  • Siga a @getbootstrap en Twitter .
  • Lea y suscríbase al blog oficial de Bootstrap .
  • Chatea con compañeros Bootstrappers en IRC. En el irc.freenode.netservidor, 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.