Descargar

Bootstrap (actualmente versión 3.2.0) tiene algunos pasos iniciales muy fáciles, cada una hecha específicamente para diferentes habilidades y casos. Léelo para ver cuál es la que se ajusta a tus necesidades

Bootstrap

CSS compilado y disminuido, JavaScript y fuentes. No se incluyen documentos ni archivos fuente originales.

Descargar Bootstrap

Código fuente

Código fuente Less, JavaScript, y los archivos de las fuentes, junto con nuestros documentos. Requeire de un compilador Less y algunas algunas configuraciones.

Descargar el código fuente

Sass

Bootstrap trasladado de Less a Sass para que se incluya fácilmente en proyectos de Rails, Compass, o solo de Sass.

Descargar Sass

CDN de Bootstrap

Las personas de MaxCDN gentilmente proveen soporte de CDN para CSS y JavaScript de Bootstrap. Solamente hace falta que acceda a estos enlaces de Bootstrap CDN.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Instalar con Bower

Instalar y manejar Less, CSS, JavaScript y las fuentes de Bootstrap utilizandoBower.

$ bower install bootstrap

Lo que se incluye

Se puede descargar Bootstrap de dos maneras, en las cuales encontrará los siguientes directorios y archivos, que agrupan lógicamente los recursos comunes y proveen variaciones compiladas y minimizadas.

Se requiere jQuery.

Por favor notar que todos los plugin JavaScript requieren de JQuery incluidos, como se muestra en la plantilla para principiantes . Consulta nuestro bower.json Para verificar cuales versiones de JQuery son soportadas.

Bootstrap compilado previamente

Cuando se haya descargado, descomprima la carpeta comprimida para ver la estructura de Bootstrap (compilada). Verá algo como lo siguiente:

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

Esta es la forma más básica de Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Se incluyen las fuentes de Glyphicons y el tema opcional de Bootstrap.

Código fuente de Bootstrap

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

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

El less/, js/, y fonts/ son los códigos fuente de nuestros CSS, JS, y fuentes de icono (respectivamente). La carpeta dist/ incluye todo lo indicado en la sección anterior de descargas precompiladas. La carpeta docs/ incluye el código fuente de nuestra documentación y examples/ of Bootstrap usage. Además de esto, cualquier otro archivo incluido provee compatibilidad para paquetes, información de licencia y desarrollo.

Compiling CSS and JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:
  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Available Grunt commands

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

grunt watch (Watch)

Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

grunt test (Run tests)

Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

grunt (Build absolutely everything and run tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Plantilla básica

Comienze con una plantilla básica HTML o modifique alguno de estos ejemplos. Esperamos que adapte nuestras plantillas y ejemplos para adaptarlos a sus necesidades.

Copie el código HTML siguiente para comenzar a trabajar con un documento mínimo de Bootstrap.

<!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">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Ejemplos

Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

Using the framework

Plantilla inicial

Solo lo básico: CSS compilado y JavaScript junto con un contenedor.

Tema de Bootstrap

Cargue el tema opcional de Bootstrap para una experiencia visualmente mejorada.

Cuadrículas

Varios ejemplos de esquemas de cuadrícula con los cuatro niveles, anidado y más.

Jumbotron

Agregue componentes alrededor de un Jumbotron con una barra de navegación y columnas básicas de cuadrícula.

Jumbotron estrecho

Cree una página más personalizada al reducir el contenedor predeterminado y el Jumbotron.

Barras de nav. en funcionamiento

Barra de navegación

Plantillas muy básicas que incluyen la barra de nav. y algo de contenido adicional.

Barra de navegación estática superior

Plantilla muy básica con una barra de navegación estática superior junto con algo de contenido adicional.

Barra de navegación fija

Plantilla muy básica con una barra de navegación fija además de algo de contenido adicional.

Componentes personalizados

Cubierta

Una plantilla de una página para crear páginas iniciales sencillas y hermosas.

Bandeja circular

Personalice la barra de navegación y bandeja circular, para agregar algunos nuevos componentes.

Blog

Distribución de blog de dos columnas sencilla con navegación, encabezado y tipo de letra personalizados.

Consola

Estructura básica para una consola de admin con barras laterales y de navegación fijas.

Página de inicio de sesión

Esquema de forma personalizada para un formato de inicio de sesión sencillo

Navegación justificada

Create a custom navbar with justified links. Heads up! Not too Safari friendly.

Pie de página pegadizo

Coloque un pie de página en la parte inferior de la página de vista cuando el contenido es más corto que este.

Pie de página pegadizo y barra nav.

Coloque un pie de página en la parte inferior de la ventana de vista con una barra de nav. superior.

Experimentos

Bootstrap que no responde

Easily disable the responsiveness of Bootstrap per our docs.

Fondo

Cree un menú de navegación de fondo activable para usarse con Bootstrap.

Comunidad

Manténgase actualizado sobre el desarrollo de Bootstrap y comuníquese con la comunidad, gracias a estos recursos útiles.

También puede seguir a Bootstrap @twbootstrap en Twitter en donde hay los chismes y videos de música increíbles más recientes.

Desactivar las reacciones

Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like in this non-responsive example.

Pasos para desactivar las reacciones de páginas

  1. Omit the viewport <meta> mentioned in the CSS docs
  2. Modifique el width del .container para cada nivel de cuadrícula con un solo ancho, por ejemplo width: 970px !important; Asegúrese que esto vaya después del CSS predeterminado de Bootstrap. Usted puede opcionalmente evitar el !important al averiguar el medio usado o con algún selector-fu.
  3. Si usa barras de navegación, quite todo el comportamiento de expansión y reducción.
  4. Para estructuras de cuadrícula, utilice las clases .col-xs-* además de las grandes o medianas. No se preocupe. La cuadrícula de dispositivos muy pequeños se puede ampliar o reducir para todas las resoluciones.

Todavía necesitará Respond.js para IE8 (ya que las consultas de medios están todavía allí y deben procesarse.) Esto desactiva los aspectos de "sitio móvil" de Bootstrap.

Plantilla de Bootstrap con desactivación de reacciones

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

Ver un ejemplo de reacciones desactivadas

Migración de v2.x a v3.x

Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.

Navegadores y dispositivos compatibles

Se creó Bootstrap para que funcione mejor con los navegadores más recientes de escritorio y móvil. Esto significa que las versiones anteriores podrían desplegar ciertos componentes con estilos distintos pero que funcionan completamente.

Navegadores compatibles

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 8-11. More specific support information is provided below.

Chrome Firefox Internet Explorer Opera Safari
Android Compatible Compatible No disp. No compatible No disp.
iOS Compatible No disp. No compatible Compatible
Mac OS X Compatible Compatible Compatible Compatible
Windows Compatible Compatible Compatible Compatible No compatible

De manera no oficial, Bootstrap debe verse y funcionar lo suficientemente bien en Chromium y Chrome para Linux, Firefox para Linux e Internet Explorer 7, aunque no son compatibles oficialmente.

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

Internet Explorer 8 y 9

También se pueden usar Internet Explorer 8 y 9. Sin embargo, recuerde que algunas propiedades de CSS3 y elementos de HTML5 no son admitidos por completo en estos navegadores. Además, Internet Explorer 8 requiere el uso de Respond.js para permitir las consultas de medios.

Opción Internet Explorer 8 Internet Explorer 9
border-radius No se puede usar Compatible
box-shadow No se puede usar Compatible
transform No se puede usar Compatible con -ms prefijo
transition No se puede usar
placeholder No se puede usar

Visite Puedo usar... donde hay detalles de compatibilidad de navegadores con las opciones de CSS3 y HTML5.

Internet Explorer 8 y Respond.js

Conozca las siguientes advertencias sobre el uso de Respond.js en ambientes de desarrollo y producción de Internet Explorer 8.

Respond.js y CSS en dominios múltiples

Si utiliza Respond.js con CSS albergado en un (sub)dominio distinto (por ejemplo, en un CDN) se requiere una configuración adicional. Ver los docs de Respond.js donde hay detalles.

Respond.js and file://

Debido a las reglas de seguridad de navegadores, Respond.js no funciona con las páginas vistas mediante el file:// protocolo (como cuando se abre un archivo local de HTML). Para realizar pruebas de opciones de reacciones de IE8, vea sus páginas por medio de HTTP(S). Ver los docs de Respond.js docs donde hay detalles.

Respond.js y @import

Respond.js no funciona con CSS al que se realiza una referencia mediante @import. Específicamente, se conoce que algunas configuraciones de Drupal utilizan @import. Ver los docs de Respond.js donde hay detalles.

Internet Explorer 8 y tamaño de cuadro

IE8 no es completamente compatible con box-sizing: border-box; cuando se combina con min-width, max-width, min-height, o max-height. Por tal motivo, desde v3.0.1, ya no utilizamos max-width en .container.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #13863 for details.

Modos de compatibilidad de IE

Bootstrap no funciona con modos de compatibilidad de Internet Explorer anteriores. Para estar seguro de que utiliza el modo de generación de gráficos más reciente de IE, considere incluir la etiqueta adecuada de <meta> en sus páginas.

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

Confirme el modo de documento al abrir las herramientas de depuración: pulse F12 y revise el "modo de documento".

This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.

Vea esta pregunta de desbordamiento de pila donde hay información adicional.

Internet Explorer 10 en Windows 8 y Windows Phone 8

Internet Explorer 10 no distingue device width (ancho de dispositivo) de viewport width (ancho de ventanilla de observación), y por tanto no aplica correctamente las consultas de medios en el CSS de Bootstrap. Normalmente, solo haría falta agregar un fragmento de código de CSS para solucionarlo:

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

Sin embargo, esto no funciona en dispositivos que tienen versiones de Windows Phone anteriores a Update 3 (a.k.a. GDR3), ya que hace que tales dispositivos muestren una vista principalmente de escritorio en vez de una estrecha de teléfono. Para solucionarlo, debe incluir el siguiente CSS y JavaScript para resolver el problema.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
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)
}

Si desea información adicional y guías sobre el uso, lea Windows Phone 8 y el ancho de dispositivo.

As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.

Redondeo de porcentajes de Safari

As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our .col-*-1 grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (see #9282) but you do have some options:

  • Agregar .pull-right a su última columna de cuadrícula para lograr una alineación fija de la derecha.
  • Ajuste los porcentajes manualmente para lograr el redondeo perfecto en Safari. (Es más complicado que la primera opción.)

Estaremos atentos a esto y actualizaremos nuestro código si encontramos una solución fácil.

Modos, barras de navegación y teclados virtuales

Desbordamiento y desplazamiento

La compatibilidad con overflow: hidden del elemento <body> es muy limitado en iOS y Android. Por tal motivo, cuando se desplaza más allá del límite por encima o por debajo de un modal en cualquiera de esos navegadores de dispositivos, el contenido de <body> comenzará a desplazarse.

Teclados virtuales

Además, tome en cuenta que si está usando datos de entrada en su modal o barra de navegación, iOS tiene un error de generación de gráficos que no actualiza la posición de los elementos fijos, al activar el teclado virtual. Una de las posibles soluciones es transformar sus elementos con position: absolute o invocar un cronómetro en el sitio de enfoque, para intentar corregir el posicionamiento manualmente. Esto no se maneja con Bootstrap, así que usted deberá decidir cuál es la mejor solución para su aplicación.

Listas desplegables de la barra de navegación

The .dropdown-backdrop element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

Acercamiento / alejamiento en navegadores

El acercamiento y alejamiento en páginas siempre presentan artefactos de dibujo en algunos componentes, tanto en Bootstrap como en el internet. Dependiendo del problema, podríamos solucionarlo. (Realice una búsqueda primero y luego abra un registro de defecto, si es necesario.) Sin embargo, casi siempre no tomamos en cuenta estos problemas porque no hay soluciones directas y solo trucos difíciles.

Ventanilla de observación de la impresora

Even in some modern browsers, printing can be quirky. In particular, as of Chrome v32 and regardless of margin settings, Chrome uses a viewport width significantly narrower than the physical paper size when resolving media queries while printing a webpage. This can result in Bootstrap's extra-small grid being unexpectedly activated when printing. See #12078 for some details. Suggested workarounds:

  • Embrace the extra-small grid and make sure your page looks acceptable under it.
  • Customize the values of the @screen-* Less variables so that your printer paper is considered larger than extra-small.
  • Add custom media queries to change the grid size breakpoints for print media only.

Navegador predeterminado de Android

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Menúes de selección

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

<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>

¿Desea ver un ejemplo? Revise esta demo de JS Bin.

Soporte para software de terceros

Si bien oficialmente no ofrecemos compatibilidad con plug-in de terceros ni agregados, ofrecemos consejos útiles para que usted evite los problemas potenciales en sus proyectos.

Box-sizing

Algún software de terceros, incluyendo Google Maps y Google Custom Search Engine, tiene conflicto con Bootstrap debido a * { box-sizing: border-box; }, una regla que hace que padding no afecte el ancho final calculado de un elemento. Aprenda más acerca de modelo de caja y tamaño en trucos de CSS .

Dependiendo del contexto, puede anular el efecto según se requiera (opción 1) o reconfigurar el tamaño de cajas de 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 permite estándares comunes de internet y, con un esfuerzo adicional mínimo, se puede usar para crear sitios que son accesibles para aquellos que usan AT.

Saltarse la navegación

Si su navegación contiene muchos enlaces y se presenta antes del contenido principal del DOM, agregue un enlace Skip to main content inmediatamente después de su <body>etiqueta de apertura.(lea los motivos)

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

Encabezados anidados

Cuando hay encabezados anidados <h1> - <h6>, su encabezado de documento primario debería ser un <h1>. Los encabezados posteriores debería usar lógicamente <h2><h6>, de tal manera que los lectores de pantalla puedan crear un índice de sus páginas.

Aprenda más en CodeSniffer y AccessAbility de Penn State

Recursos adicionales

Preguntas frec.licencias

Bootstrap tiene la licencia de MIT y el derecho de autor de 2014 Twitter. Si se detalla esto en pequeños componentes, se puede describir con las siguientes condiciones:

Usted debe:

  • Incluir la licencia y la notificación de derechos de autor en sus trabajos.

Le permite:

  • Descargar y usa gratuitamente Bootstrap, en parte o por completo, para propósitos personales, privados, internos de empresas o comerciales.
  • Usar Bootstrap en paquetes o distribuciones que usted cree.
  • Modificar el código fuente
  • Otorgar una sublicencia a terceros no incluidos en la licencia, con el fin de que modifiquen y distribuyan Bootstrap.

Se prohíbe:

  • Responsabilizar a los autores o dueños de licencias por daños y perjuicios ya que Bootstrap se provee sin garantías.
  • Responsabilizar a los creadores o tenedores de derechos de autor de Bootstrap.
  • Redistribuir cualquier componente de Bootstrap sin referirse específicamente de forma apropiada a su creador.
  • Utilizar cualquier marca que pertenezca a Twitter de cualquier forma que puede declarar o aludir que Twitter respalda su distribución.
  • Utilizar marcas que pertenezcan a Twitter de cualquier forma que puede declarar o aludir que usted creó el software de Twitter indicado.

No tiene la obligación de:

  • Incluir el código fuente de Bootstrap en sí, ni ninguna de las modificaciones realizadas por usted en este, en ninguna redistribución que pueda crear que lo incorpore
  • Enviar los cambios realizados en Bootstrap de regreso al proyecto de Bootstrap (a pesar de que se alienta la entrega de comentarios)

La licencia completa de Bootstrap está en el repositorio del proyecto donde hay información adicional.

Traducciones

Los miembros de la comunidad han traducido los documentos de Bootstrap a varios idiomas. No se da soporte técnico para ninguno, y posiblemente no estén actualizados.

We don't help organize or host translations, we just link to them.

Finished a new or better translation? Open a pull request to add it to our list.