Descargar

Bootstrap (actualmente v3.4.1) tiene algunas formas fáciles de comenzar rápidamente, cada una de las cuales atrae a un nivel de habilidad y caso de uso diferentes. Lea para ver qué se adapta a sus necesidades particulares.

jsDelivr

La gente de jsDelivr amablemente brinda soporte de CDN para CSS y JavaScript de Bootstrap. Simplemente use estos enlaces jsDelivr .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Instalar con Bower

También puede instalar y administrar Less, CSS, JavaScript y fuentes de Bootstrap usando Bower :

bower install bootstrap

Instalar con npm

También puede instalar Bootstrap usando npm :

npm install bootstrap@3

require('bootstrap')cargará todos los complementos jQuery de Bootstrap en el objeto jQuery. El bootstrapmódulo en sí no exporta nada. Puede cargar manualmente los complementos jQuery de Bootstrap individualmente cargando los /js/*.jsarchivos en el directorio de nivel superior del paquete.

Bootstrap package.jsoncontiene algunos metadatos adicionales bajo las siguientes claves:

• less- ruta al archivo fuente principal Less de Bootstrap
• style- ruta al CSS no minimizado de Bootstrap que ha sido precompilado usando la configuración predeterminada (sin personalización)

Instalar con Composer

También puede instalar y administrar Less, CSS, JavaScript y fuentes de Bootstrap usando Composer :

composer require twbs/bootstrap

Autoprefixer requerido para Less/Sass

Bootstrap usa Autoprefixer para manejar los prefijos de proveedores de CSS . Si está compilando Bootstrap desde su fuente Less/Sass y no está utilizando nuestro Gruntfile, deberá integrar Autoprefixer en su proceso de compilación usted mismo. Si está utilizando Bootstrap precompilado o nuestro Gruntfile, no necesita preocuparse por esto porque Autoprefixer ya está integrado en nuestro Gruntfile.

Qué está incluido

Bootstrap se puede descargar de dos formas, dentro de las cuales encontrará los siguientes directorios y archivos, agrupando lógicamente los recursos comunes y proporcionando variaciones tanto compiladas como minimizadas.

Bootstrap precompilado

Una vez descargado, descomprima la carpeta comprimida para ver la estructura de (el compilado) Bootstrap. Verás algo como esto:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Esta es la forma más básica de Bootstrap: archivos precompilados para un uso rápido en casi cualquier proyecto web. Proporcionamos CSS y JS compilados ( bootstrap.*), así como CSS y JS compilados y minimizados ( bootstrap.min.*). Los mapas de origen CSS ( bootstrap.*.map) están disponibles para su uso con las herramientas de desarrollo de ciertos navegadores. Se incluyen fuentes de Glyphicons, al igual que el tema Bootstrap opcional.

Código fuente de Bootstrap

La descarga del código fuente de Bootstrap incluye los activos precompilados de CSS, JavaScript y fuentes, junto con la fuente Less, JavaScript y la documentación. Más específicamente, incluye lo siguiente y más:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, js/y son el fonts/código fuente de nuestras fuentes CSS, JS e icon (respectivamente). La dist/carpeta incluye todo lo que se enumera en la sección de descarga precompilada anterior. La docs/carpeta incluye el código fuente de nuestra documentación y examples/del uso de Bootstrap. Más allá de eso, cualquier otro archivo incluido brinda soporte para paquetes, información de licencia y desarrollo.

Compilando CSS y JavaScript

Bootstrap usa Grunt para su sistema de compilación, con métodos convenientes para trabajar con el marco. Así es como compilamos nuestro código, ejecutamos pruebas y más.

Instalando gruñido

Para instalar Grunt, primero debe descargar e instalar node.js (que incluye npm). npm significa módulos empaquetados de nodos y es una forma de administrar las dependencias de desarrollo a través de node.js.

1. Instalar grunt-cliglobalmente con npm install -g grunt-cli.
2. Navegue al /bootstrap/directorio raíz, luego ejecute npm install. npm examinará el package.jsonarchivo e instalará automáticamente las dependencias locales necesarias que se enumeran allí.

Cuando haya terminado, podrá ejecutar los diversos comandos de Grunt proporcionados desde la línea de comandos.

Comandos Grunt disponibles

grunt dist(Solo compila CSS y JavaScript)

Regenera el /dist/directorio con archivos CSS y JavaScript compilados y minimizados. Como usuario de Bootstrap, este es normalmente el comando que desea.

grunt watch(Reloj)

Observa los archivos fuente de Less y los vuelve a compilar automáticamente en CSS cada vez que guarda un cambio.

grunt test(Ejecutar pruebas)

Ejecuta JSHint y ejecuta las pruebas de QUnit en navegadores reales gracias a Karma .

grunt docs(Cree y pruebe los activos de los documentos)

Construye y prueba CSS, JavaScript y otros activos que se usan cuando se ejecuta la documentación localmente a través de bundle exec jekyll serve.

grunt(Construir absolutamente todo y ejecutar pruebas)

Compila y minimiza CSS y JavaScript, construye el sitio web de documentación, ejecuta el validador HTML5 contra los documentos, regenera los recursos del Personalizador y más. Requiere Jekyll . Por lo general, solo es necesario si está pirateando Bootstrap.

Solución de problemas

Si encuentra problemas con la instalación de dependencias o la ejecución de comandos de Grunt, primero elimine el /node_modules/directorio generado por npm. Luego, vuelva a ejecutar npm install.

Plantilla básica

Comience con esta plantilla HTML básica o modifique estos ejemplos . Esperamos que personalice nuestras plantillas y ejemplos, adaptándolos a sus necesidades.

Copie el HTML a continuación para comenzar a trabajar con un documento Bootstrap mínimo.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Ejemplos

Construya sobre la plantilla básica anterior con los muchos componentes de Bootstrap. Lo alentamos a personalizar y adaptar Bootstrap para satisfacer las necesidades de su proyecto individual.

Obtenga el código fuente de cada ejemplo a continuación descargando el repositorio de Bootstrap . Se pueden encontrar ejemplos en el docs/examples/directorio.

Usando el marco

Plantilla de inicio

Nada más que lo básico: CSS y JavaScript compilados junto con un contenedor.

tema de arranque

Cargue el tema Bootstrap opcional para una experiencia mejorada visualmente.

Cuadrículas

Múltiples ejemplos de diseños de cuadrícula con los cuatro niveles, anidamiento y más.

jumbotron

Construya alrededor del jumbotron con una barra de navegación y algunas columnas de cuadrícula básicas.

jumbotron estrecho

Cree una página más personalizada estrechando el contenedor predeterminado y el jumbotron.

Barras de navegación en acción

barra de navegación

Plantilla súper básica que incluye la barra de navegación junto con contenido adicional.

Barra de navegación superior estática

Plantilla súper básica con una barra de navegación superior estática junto con contenido adicional.

barra de navegación fija

Plantilla súper básica con una barra de navegación superior fija junto con contenido adicional.

Componentes personalizados

Cubrir

Una plantilla de una página para crear páginas de inicio simples y hermosas.

Carrusel

Personalice la barra de navegación y el carrusel, luego agregue algunos componentes nuevos.

Blog

Diseño de blog simple de dos columnas con navegación, encabezado y tipo personalizados.

Tablero

Estructura básica para un panel de administración con barra lateral fija y barra de navegación.

página de inicio de sesión

Diseño y diseño de formulario personalizado para un formulario de inicio de sesión simple.

navegación justificada

Cree una barra de navegación personalizada con enlaces justificados. ¡Aviso! No demasiado amigable con Safari.

Pie de página fijo

Adjunte un pie de página en la parte inferior de la ventana gráfica cuando el contenido sea más corto.

Pie de página fijo con barra de navegación

Adjunte un pie de página en la parte inferior de la ventana gráfica con una barra de navegación fija en la parte superior.

Experimentos

Bootstrap no receptivo

Deshabilite fácilmente la capacidad de respuesta de Bootstrap según nuestros documentos .

fuera del lienzo

Cree un menú de navegación fuera del lienzo que se pueda alternar para usar con Bootstrap.

Instrumentos

Bootlint

Bootlint es la herramienta oficial de borrado HTML de Bootstrap. Comprueba automáticamente varios errores HTML comunes en las páginas web que usan Bootstrap de una manera bastante "vainilla". Los componentes/widgets de Vanilla Bootstrap requieren que sus partes del DOM se ajusten a ciertas estructuras. Bootlint comprueba que las instancias de los componentes de Bootstrap tengan HTML estructurado correctamente. Considere agregar Bootlint a su cadena de herramientas de desarrollo web Bootstrap para que ninguno de los errores comunes ralentice el desarrollo de su proyecto.

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 otros Bootstrappers usando IRC en el irc.freenode.netservidor, en el canal ##bootstrap .
• Para obtener ayuda con Bootstrap, pregunte en StackOverflow usando la etiquetatwitter-bootstrap-3 .
• 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.
• Encuentre ejemplos inspiradores de personas que construyen con Bootstrap en Bootstrap Expo .

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

Deshabilitar la capacidad de respuesta

Bootstrap adapta automáticamente sus páginas para varios tamaños de pantalla. Aquí le mostramos cómo deshabilitar esta función para que su página funcione como este ejemplo que no responde .

Pasos para deshabilitar la capacidad de respuesta de la página

1. Omita la ventana gráfica <meta>mencionada en los documentos de CSS
2. Anule el widthen el .containerpara cada nivel de cuadrícula con un solo ancho, por ejemplo, width: 970px !important;asegúrese de que esto viene después del Bootstrap CSS predeterminado. Opcionalmente, puede evitar las !importantconsultas con medios o algún selector-fu.
3. Si usa barras de navegación, elimine todo el comportamiento de contracción y expansión de la barra de navegación.
4. Para diseños de cuadrícula, use .col-xs-*clases además de, o en lugar de, las medianas/grandes. No se preocupe, la cuadrícula del dispositivo extrapequeño se adapta a todas las resoluciones.

Aún necesitará Respond.js para IE8 (ya que nuestras consultas de medios aún están allí y deben procesarse). Esto deshabilita los aspectos de "sitio móvil" de Bootstrap.

Plantilla de Bootstrap con capacidad de respuesta deshabilitada

Hemos aplicado estos pasos a un ejemplo. Lea su código fuente para ver los cambios específicos implementados.

Ver ejemplo que no responde

Compatibilidad con navegadores y dispositivos

Bootstrap está diseñado para funcionar mejor en los navegadores móviles y de escritorio más recientes, lo que significa que los navegadores más antiguos pueden mostrar representaciones de ciertos componentes con estilos diferentes, aunque completamente funcionales.

Navegadores compatibles

Específicamente, admitimos las últimas versiones de los siguientes navegadores y plataformas.

Los navegadores alternativos que utilizan la última versión de WebKit, Blink o Gecko, ya sea directamente o mediante la API de vista web de la plataforma, no son compatibles explícitamente. Sin embargo, Bootstrap debería (en la mayoría de los casos) mostrarse y funcionar correctamente en estos navegadores también. A continuación se proporciona información de soporte más específica.

Dispositivos móviles

En términos generales, Bootstrap admite las últimas versiones de los navegadores predeterminados de cada plataforma principal. Tenga en cuenta que los navegadores proxy (como Opera Mini, el modo Turbo de Opera Mobile, UC Browser Mini, Amazon Silk) no son compatibles.

Navegadores de escritorio

Del mismo modo, se admiten las últimas versiones de la mayoría de los navegadores de escritorio.

En Windows, admitimos Internet Explorer 8-11 .

Para Firefox, además de la última versión estable normal, también admitimos la última versión de versión de soporte extendido (ESR) de Firefox.

Extraoficialmente, Bootstrap debería verse y comportarse lo suficientemente bien en Chromium y Chrome para Linux, Firefox para Linux e Internet Explorer 7, así como en Microsoft Edge, aunque oficialmente no son compatibles.

Para obtener una lista de algunos de los errores del navegador con los que debe lidiar Bootstrap, consulte nuestro Muro de errores del navegador .

Internet Explorer 8 y 9

Internet Explorer 8 y 9 también son compatibles; sin embargo, tenga en cuenta que algunas propiedades CSS3 y elementos HTML5 no son totalmente compatibles con estos navegadores. Además, Internet Explorer 8 requiere el uso de Respond.js para habilitar la compatibilidad con consultas de medios.

Visite ¿Puedo usar... para obtener detalles sobre la compatibilidad del navegador con las funciones CSS3 y HTML5?

Internet Explorer 8 y Respond.js

Tenga cuidado con las siguientes advertencias cuando use Respond.js en sus entornos de desarrollo y producción para Internet Explorer 8.

Respond.js y CSS entre dominios

El uso de Respond.js con CSS alojado en un (sub)dominio diferente (por ejemplo, en un CDN) requiere una configuración adicional. Consulte los documentos de Respond.js para obtener más información.

Respond.js yfile://

Debido a las reglas de seguridad del navegador, Respond.js no funciona con páginas vistas a través del file://protocolo (como cuando se abre un archivo HTML local). Para probar funciones receptivas en IE8, vea sus páginas a través de HTTP(S). Consulte los documentos de Respond.js para obtener más información.

Respond.js y@import

Respond.js no funciona con CSS al que se hace referencia a través de @import. En particular, se sabe que algunas configuraciones de Drupal usan @import. Consulte los documentos de Respond.js para obtener más información.

Internet Explorer 8 y tamaño de caja

IE8 no es totalmente compatible box-sizing: border-box;cuando se combina con min-width, max-width, min-heighto max-height. Por esa razón, a partir de v3.0.1, ya no usamos max-widthen .containers.

Internet Explorer 8 y @font-face

IE8 tiene algunos problemas @font-facecuando se combina con :before. Bootstrap usa esa combinación con sus Glyphicons. Si una página se almacena en caché y se carga sin el mouse sobre la ventana (es decir, presione el botón Actualizar o cargue algo en un iframe), la página se procesa antes de que se cargue la fuente. Al pasar el cursor sobre la página (cuerpo), se mostrarán algunos de los íconos y al pasar el mouse sobre los íconos restantes, también se mostrarán. Consulte el número 13863 para obtener más información.

Modos de compatibilidad de IE

Bootstrap no es compatible con los antiguos modos de compatibilidad de Internet Explorer. Para asegurarse de que está utilizando el modo de representación más reciente para IE, considere incluir la <meta>etiqueta adecuada en sus páginas:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirme el modo de documento abriendo las herramientas de depuración: presione F12y marque el "Modo de documento".

Esta etiqueta se incluye en toda la documentación y los ejemplos de Bootstrap para garantizar la mejor representación posible en cada versión compatible de Internet Explorer.

Consulte esta pregunta de StackOverflow para obtener más información.

Internet Explorer 10 en Windows 8 y Windows Phone 8

Internet Explorer 10 no diferencia el ancho del dispositivo del ancho de la ventana gráfica y, por lo tanto, no aplica correctamente las consultas de medios en el CSS de Bootstrap. Normalmente, solo agregaría un fragmento rápido de CSS para solucionar esto:

@-ms-viewport       { width: device-width; }

Sin embargo, esto no funciona para los dispositivos que ejecutan versiones de Windows Phone 8 anteriores a la Actualización 3 (también conocida como GDR3) , ya que hace que dichos dispositivos muestren una vista de escritorio en su mayoría en lugar de una vista estrecha de "teléfono". Para solucionar esto, deberá incluir el siguiente CSS y JavaScript para solucionar el error .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Para obtener más información y pautas de uso, lea Windows Phone 8 y Device-Width .

Como aviso, incluimos esto en toda la documentación y los ejemplos de Bootstrap como demostración.

Redondeo porcentual de Safari

El motor de renderizado de las versiones de Safari anteriores a v7.1 para OS X y Safari para iOS v8.0 tuvo algunos problemas con la cantidad de lugares decimales utilizados en nuestras .col-*-1clases de cuadrícula. Entonces, si tuviera 12 columnas de cuadrícula individuales, notaría que se quedaron cortas en comparación con otras filas de columnas. Además de actualizar Safari/iOS, tiene algunas opciones para soluciones alternativas:

• Agregue .pull-righta su última columna de cuadrícula para obtener la alineación a la derecha
• Modifique sus porcentajes manualmente para obtener el redondeo perfecto para Safari (más difícil que la primera opción)

Modales, barras de navegación y teclados virtuales

Desbordamiento y desplazamiento

El soporte para overflow: hiddenon the <body>element es bastante limitado en iOS y Android. Con ese fin, cuando se desplaza más allá de la parte superior o inferior de un modal en cualquiera de los navegadores de esos dispositivos, el <body>contenido comenzará a desplazarse. Consulte el error de Chrome n.° 175502 (corregido en Chrome v40) y el error de WebKit n.° 153852 .

Campos de texto iOS y desplazamiento

A partir de iOS 9.3, mientras un modal está abierto, si el toque inicial de un gesto de desplazamiento está dentro de los límites de un texto <input>o un <textarea>, el <body>contenido debajo del modal se desplazará en lugar del propio modal. Consulte el error n.º 153856 de WebKit .

teclados virtuales

Además, tenga en cuenta que si está utilizando una barra de navegación fija o entradas dentro de un modal, iOS tiene un error de representación que no actualiza la posición de los elementos fijos cuando se activa el teclado virtual. Algunas soluciones para esto incluyen transformar sus elementos position: absoluteo invocar un temporizador de enfoque para tratar de corregir el posicionamiento manualmente. Esto no lo maneja Bootstrap, por lo que depende de usted decidir qué solución es mejor para su aplicación.

Menús desplegables de la barra de navegación

El .dropdown-backdropelemento no se usa en iOS en la navegación debido a la complejidad de la indexación z. Por lo tanto, para cerrar los menús desplegables en las barras de navegación, debe hacer clic directamente en el elemento desplegable (o en cualquier otro elemento que active un evento de clic en iOS ).

Zoom del navegador

El zoom de página inevitablemente presenta artefactos de representación en algunos componentes, tanto en Bootstrap como en el resto de la web. Dependiendo del problema, es posible que podamos solucionarlo (busque primero y luego abra un problema si es necesario). Sin embargo, tendemos a ignorarlos, ya que a menudo no tienen una solución directa más que soluciones alternativas.

Fijo :hover/ :focusen el móvil

A pesar de que el desplazamiento real no es posible en la mayoría de las pantallas táctiles, la mayoría de los navegadores móviles emulan el soporte de desplazamiento y lo hacen :hover"pegajoso". En otras palabras, :hoverlos estilos comienzan a aplicarse después de tocar un elemento y solo dejan de aplicarse después de que el usuario toca algún otro elemento. Esto puede hacer que los estados de Bootstrap :hoverse "peguen" de manera indeseable en dichos navegadores. Algunos navegadores móviles también se vuelven :focusigualmente pegajosos. Actualmente no existe una solución sencilla para estos problemas que no sea la eliminación completa de dichos estilos.

Impresión

Incluso en algunos navegadores modernos, la impresión puede ser peculiar.

En particular, a partir de Chrome v32 e independientemente de la configuración de los márgenes, Chrome usa un ancho de ventana gráfica significativamente más estrecho que el tamaño del papel físico al resolver consultas de medios al imprimir una página web. Esto puede provocar que la cuadrícula extra pequeña de Bootstrap se active inesperadamente al imprimir. Consulte el problema n.º 12078 y el error de Chrome n.º 273306 para obtener algunos detalles. Soluciones sugeridas:

• Adopte la cuadrícula extra pequeña y asegúrese de que su página se vea aceptable debajo de ella.
• Personalice los valores de las @screen-*variables Menos para que el papel de su impresora se considere más grande que extrapequeño.
• Agregue consultas de medios personalizadas para cambiar los puntos de interrupción del tamaño de la cuadrícula solo para medios impresos.

Además, a partir de Safari v8.0, los correos electrónicos de ancho fijo .containerpueden hacer que Safari use un tamaño de fuente inusualmente pequeño al imprimir. Consulte el n.º 14868 y el error de WebKit n.º 138192 para obtener más detalles. Una posible solución para esto es agregar el siguiente CSS:

@media print {
  .container {
    width: auto;
  }
}

Navegador de acciones de Android

Fuera de la caja, Android 4.1 (e incluso algunas versiones más recientes aparentemente) se envían con la aplicación del navegador como el navegador web predeterminado de elección (a diferencia de Chrome). Desafortunadamente, la aplicación del navegador tiene muchos errores e inconsistencias con CSS en general.

Seleccionar menús

En <select>los elementos, el navegador de valores de Android no mostrará los controles laterales si hay un border-radiusy/o borderaplicado. (Consulte esta pregunta de StackOverflow para obtener más detalles). Use el fragmento de código a continuación para eliminar el CSS ofensivo y representarlo <select>como un elemento sin estilo en el navegador de Android. El rastreo del agente de usuario evita la interferencia con los navegadores Chrome, Safari y Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

¿Quieres ver un ejemplo? Mira esta demostración de JS Bin.

Validadores

Para proporcionar la mejor experiencia posible a los navegadores antiguos y con errores, Bootstrap utiliza hacks de navegador CSS en varios lugares para dirigir CSS especial a ciertas versiones del navegador con el fin de evitar errores en los propios navegadores. Es comprensible que estos hacks hagan que los validadores de CSS se quejen de que no son válidos. En un par de lugares, también utilizamos funciones de CSS de última generación que aún no están completamente estandarizadas, pero se utilizan únicamente para la mejora progresiva.

Estas advertencias de validación no importan en la práctica, ya que la parte no pirateada de nuestro CSS se valida por completo y las porciones pirateadas no interfieren con el funcionamiento adecuado de la porción no pirateada, por lo que ignoramos deliberadamente estas advertencias en particular.

Nuestros documentos HTML también tienen algunas advertencias de validación de HTML triviales e intrascendentes debido a nuestra inclusión de una solución para un cierto error de Firefox .

Soporte de terceros

Si bien no admitimos oficialmente complementos o complementos de terceros, ofrecemos algunos consejos útiles para ayudarlo a evitar posibles problemas en sus proyectos.

tamaño de caja

Algunos programas de terceros, incluidos Google Maps y Google Custom Search Engine, entran en conflicto con Bootstrap debido a * { box-sizing: border-box; }una regla que hace que paddingno afecte el ancho calculado final de un elemento. Obtenga más información sobre el modelo de caja y el tamaño en CSS Tricks .

Según el contexto, puede anular según sea necesario (Opción 1) o restablecer el tamaño del cuadro para regiones enteras (Opción 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Accesibilidad

Bootstrap sigue los estándares web comunes y, con un esfuerzo adicional mínimo, se puede usar para crear sitios que sean accesibles para aquellos que usan AT .

Saltar navegación

Si su navegación contiene muchos enlaces y viene antes del contenido principal en el DOM, agregue un Skip to main contentenlace antes de la navegación (para una explicación simple, vea este artículo del Proyecto A11Y sobre omitir enlaces de navegación ). El uso de la .sr-onlyclase ocultará visualmente el enlace de omisión, y la .sr-only-focusableclase se asegurará de que el enlace sea visible una vez enfocado (para usuarios de teclado videntes).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Encabezados anidados

Al anidar encabezados ( <h1>- <h6>), el encabezado de su documento principal debe ser un <h1>. Los encabezados posteriores deben hacer un uso lógico de <h2>:<h6> de modo que los lectores de pantalla puedan construir una tabla de contenido para sus páginas.

Obtenga más información en HTML CodeSniffer y AccessAbility de Penn State .

Contraste de color

Actualmente, algunas de las combinaciones de colores predeterminadas disponibles en Bootstrap (como las diversas clases de botones con estilo , algunos de los colores de resaltado de código utilizados para bloques de código básicos , la clase auxiliar de .bg-primary fondo contextual y el color de enlace predeterminado cuando se usa sobre un fondo blanco) tener una relación de contraste baja (por debajo de la relación recomendada de 4,5:1 ). Esto puede causar problemas a los usuarios con baja visión o daltónicos. Es posible que sea necesario modificar estos colores predeterminados para aumentar su contraste y legibilidad.

Recursos adicionales

• Bookmarklet "HTML Codesniffer" para identificar problemas de accesibilidad
• Extensión de herramientas de accesibilidad para desarrolladores de Chrome
• Analizador de contraste de color
• El Proyecto A11Y
• Documentación de accesibilidad de MDN

Preguntas frecuentes sobre licencias

Bootstrap se publica bajo la licencia MIT y tiene copyright 2019 Twitter. Reducido a trozos más pequeños, se puede describir con las siguientes condiciones.

Requiere que:

• Mantenga la licencia y el aviso de derechos de autor incluidos en los archivos CSS y JavaScript de Bootstrap cuando los use en sus obras.

Te permite:

• Descargue y use Bootstrap gratuitamente, en su totalidad o en parte, para fines personales, privados, internos de la empresa o comerciales
• Use Bootstrap en paquetes o distribuciones que cree
• Modificar el código fuente
• Otorgar una sublicencia para modificar y distribuir Bootstrap a terceros no incluidos en la licencia

Te prohíbe:

• Responsabilizar a los autores y propietarios de licencias por daños, ya que Bootstrap se proporciona sin garantía
• Responsabilizar a los creadores o titulares de derechos de autor de Bootstrap
• Redistribuir cualquier pieza de Bootstrap sin la atribución adecuada
• Usar cualquier marca propiedad de Twitter de cualquier manera que pueda indicar o implicar que Twitter respalda su distribución.
• Usar cualquier marca propiedad de Twitter de cualquier manera que pueda declarar o implicar que usted creó el software de Twitter en cuestión.

No requiere que usted:

• Incluya la fuente de Bootstrap en sí, o de cualquier modificación que le haya hecho, en cualquier redistribución que pueda ensamblar que la incluya.
• Envíe los cambios que realice en Bootstrap al proyecto Bootstrap (aunque se recomiendan dichos comentarios)

La licencia completa de Bootstrap se encuentra en el repositorio del proyecto para obtener más información.

Traducciones

Los miembros de la comunidad han traducido la documentación de Bootstrap a varios idiomas. Ninguno tiene soporte oficial y es posible que no siempre estén actualizados.

• Bootstrap 中文文档 (chino)
• Bootstrap på Dansk (danés)
• Bootstrap en francés (francés)
• Bootstrap auf Deutsch (alemán)
• Bootstrap en italiano (italiano)
• Bootstrap 한국어 (coreano)
• Bootstrap em Português do Brasil (portugués brasileño)
• Bootstrap по-русски (ruso)
• Bootstrap en Español (Español)
• Türkçe Bootstrap (turco)
• Bootstrap українською (ucraniano)
• Bootstrap bằng tiếng Việt (vietnamita)

No ayudamos a organizar ni a alojar traducciones, solo las vinculamos.

¿Terminó una traducción nueva o mejor? Abra una solicitud de extracción para agregarla a nuestra lista.