Empezando
Una descripción general de Bootstrap, cómo descargar y usar, plantillas y ejemplos básicos, y más.
Una descripción general de Bootstrap, cómo descargar y usar, plantillas y ejemplos básicos, y más.
Bootstrap (actualmente v3.3.7) 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.
CSS, JavaScript y fuentes compilados y minificados. No se incluyen documentos ni archivos fuente originales.
Source Less, JavaScript y archivos de fuentes, junto con nuestros documentos. Requiere un compilador Less y alguna configuración.
Bootstrap portado de Less a Sass para una fácil inclusión en proyectos Rails, Compass o solo Sass.
La gente de jsDelivr amablemente brinda soporte de CDN para CSS y JavaScript de Bootstrap. Simplemente use estos enlaces CDN de Bootstrap .
También puede instalar y administrar Less, CSS, JavaScript y fuentes de Bootstrap usando Bower :
También puede instalar Bootstrap usando npm :
require('bootstrap')
cargará todos los complementos jQuery de Bootstrap en el objeto jQuery. El bootstrap
módulo en sí no exporta nada. Puede cargar manualmente los complementos jQuery de Bootstrap individualmente cargando los /js/*.js
archivos en el directorio de nivel superior del paquete.
Bootstrap package.json
contiene algunos metadatos adicionales bajo las siguientes claves:
less
- ruta al archivo fuente principal Less de Bootstrapstyle
- ruta al CSS no minimizado de Bootstrap que ha sido precompilado usando la configuración predeterminada (sin personalización)También puede instalar y administrar Less, CSS, JavaScript y fuentes de Bootstrap usando Composer :
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.
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.
Tenga en cuenta que todos los complementos de JavaScript requieren que se incluya jQuery, como se muestra en la plantilla de inicio . Consulte nuestrobower.json
para ver qué versiones de jQuery son compatibles.
Una vez descargado, descomprima la carpeta comprimida para ver la estructura de (el compilado) Bootstrap. Verás algo como esto:
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.
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:
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.
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.
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.
Luego, desde la línea de comando:grunt-cli
globalmente con npm install -g grunt-cli
./bootstrap/
directorio raíz, luego ejecute npm install
. npm examinará el package.json
archivo 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.
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 QUnit sin cabeza en PhantomJS .
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.
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
.
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.
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.
Plantilla súper básica que incluye la barra de navegación junto con contenido adicional.
Personalice la barra de navegación y el carrusel, luego agregue algunos componentes nuevos.
Estructura básica para un panel de administración con barra lateral fija y barra de navegación.
Diseño y diseño de formulario personalizado para un formulario de inicio de sesión simple.
Cree una barra de navegación personalizada con enlaces justificados. ¡Aviso! No demasiado amigable con Safari.
Deshabilite fácilmente la capacidad de respuesta de Bootstrap según nuestros documentos .
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.
Manténgase actualizado sobre el desarrollo de Bootstrap y comuníquese con la comunidad con estos útiles recursos.
irc.freenode.net
servidor, en el canal ##bootstrap .twitter-bootstrap-3
.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 visibilidad.También puede seguir a @getbootstrap en Twitter para conocer los últimos chismes y videos musicales increíbles.
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 .
<meta>
mencionada en los documentos de CSSwidth
en el .container
para 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 !important
consultas con medios o algún selector-fu..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.
Hemos aplicado estos pasos a un ejemplo. Lea su código fuente para ver los cambios específicos implementados.
¿Desea migrar de una versión anterior de Bootstrap a v3.x? Consulte nuestra guía de migración .
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.
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.
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.
Cromo | Firefox | Safari | |
---|---|---|---|
Androide | Soportado | Soportado | N / A |
iOS | Soportado | Soportado | Soportado |
Del mismo modo, se admiten las últimas versiones de la mayoría de los navegadores de escritorio.
Cromo | Firefox | explorador de Internet | Ópera | Safari | |
---|---|---|---|---|---|
Mac | Soportado | Soportado | N / A | Soportado | Soportado |
ventanas | Soportado | Soportado | Soportado | Soportado | No soportado |
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 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.
Rasgo | explorador de Internet 8 | explorador de Internet 9 |
---|---|---|
border-radius |
No soportado | Soportado |
box-shadow |
No soportado | Soportado |
transform |
No soportado | Compatible, con -ms prefijo |
transition |
No soportado | |
placeholder |
No soportado |
Visite ¿Puedo usar... para obtener detalles sobre la compatibilidad del navegador con las funciones CSS3 y HTML5?
Tenga cuidado con las siguientes advertencias cuando use Respond.js en sus entornos de desarrollo y producción para Internet Explorer 8.
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.
file://
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.
@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.
IE8 no es totalmente compatible box-sizing: border-box;
cuando se combina con min-width
, max-width
, min-height
o max-height
. Por esa razón, a partir de v3.0.1, ya no usamos max-width
en .container
s.
IE8 tiene algunos problemas @font-face
cuando 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.
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:
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 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:
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 .
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.
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-*-1
clases 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:
.pull-right
a su última columna de cuadrícula para obtener la alineación a la derechaEl soporte para overflow: hidden
on 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 .
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 .
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: absolute
o 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.
El .dropdown-backdrop
elemento 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 ).
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.
:hover
/ :focus
en el móvilA 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, :hover
los 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 :hover
se "peguen" de manera indeseable en dichos navegadores. Algunos navegadores móviles también se vuelven :focus
igualmente pegajosos. Actualmente no existe una solución sencilla para estos problemas que no sea la eliminación completa de dichos estilos.
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:
@screen-*
variables Menos para que el papel de su impresora se considere más grande que extrapequeño.Además, a partir de Safari v8.0, los correos electrónicos de ancho fijo .container
pueden 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:
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.
En <select>
los elementos, el navegador de valores de Android no mostrará los controles laterales si hay un border-radius
y/o border
aplicado. (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.
¿Quieres ver un ejemplo? Mira esta demostración de JS Bin.
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 .
Si bien no admitimos oficialmente complementos o complementos de terceros, ofrecemos algunos consejos útiles para ayudarlo a evitar posibles problemas en sus proyectos.
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 padding
no 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).
Bootstrap sigue los estándares web comunes y, con un esfuerzo adicional mínimo, se puede usar para crear sitios que sean accesibles para quienes usan AT .
Si su navegación contiene muchos enlaces y viene antes del contenido principal en el DOM, agregue un Skip to main content
enlace 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-only
clase ocultará visualmente el enlace de omisión, y la .sr-only-focusable
clase se asegurará de que el enlace sea visible una vez enfocado (para usuarios de teclado videntes).
Debido a deficiencias/errores de larga data en Chrome (consulte el problema 262171 en el rastreador de errores de Chromium ) e Internet Explorer (consulte este artículo sobre enlaces en la página y orden de enfoque ), deberá asegurarse de que el destino de su enlace de omisión es al menos programáticamente enfocable agregandotabindex="-1"
.
Además, es posible que desee suprimir explícitamente una indicación de enfoque visible en el objetivo (particularmente porque Chrome actualmente también establece el enfoque en los elementos tabindex="-1"
cuando se hace clic con el mouse) con #content:focus { outline: none; }
.
Tenga en cuenta que este error también afectará cualquier otro enlace en la página que su sitio pueda estar usando, haciéndolos inútiles para los usuarios de teclado. Puede considerar agregar una solución provisional similar a todos los demás anclajes con nombre/identificadores de fragmentos que actúan como objetivos de enlace.
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 .
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.
Bootstrap se publica bajo la licencia MIT y tiene copyright 2016 Twitter. Reducido a trozos más pequeños, se puede describir con las siguientes condiciones.
La licencia completa de Bootstrap se encuentra en el repositorio del proyecto para obtener más información.
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.
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.