Incorporacion Modelo Virtual

Bootstrap - Pasos iniciales
Un resumen de Bootstrap, cómo descargarlo, cómo usarlo,

plantillas básicas, ejemplos y mucho más.
Descargar
Bootstrap tiene maneras muy fáciles para comenzar rápidamente, cada una de las cuales son
atractivas para un nivel distinto de destrezas y caso de uso. Léalos todos para que averigüe el
que es más idóneo para sus necesidades específicas.
Bootstrap Código fuente Sass

CSS compilado y disminuido, Consiga Less, JavaScript y archivos Bootstrap trasladado de Less a
JavaScript y fuentes. No se incluyen de fuente, junto con nuestros docs. Sass para que se incluya fácilmente
documentos ni archivos fuente Se requieren un compilador Less en proyectos de Rails, Compass, o
originales. y algunas configuraciones. solo de Sass.
Descargar Bootstrap Descargar el código fuente Descargar Sass
Currently v3.1.1.
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.


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.c
ss">


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme
.min.css">


<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/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.
Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult
our bower.json to see which versions of jQuery are supported.
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.
Plantilla básica
Start with this basic HTML template, or modify these examples. We hope you'll customize our
templates and examples, adapting them to suit your needs.
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>


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



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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></scri
pt>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ejemplos
Build on the basic template above with Bootstrap's many components. See also Customizing
Bootstrap for tips on maintaining your own Bootstrap variants.
Using the framework
Plantilla inicial Tema de Bootstrap Cuadrículas

Solo lo básico: CSS compilado y Cargue el tema opcional de Varios ejemplos de esquemas de
JavaScript junto con un contenedor. Bootstrap para una experiencia cuadrícula con los cuatro niveles,
visualmente mejorada. anidado y más.
Jumbotron Jumbotron estrecho

Agregue componentes alrededor de Cree una página más personalizada
un Jumbotron con una barra de al reducir el contenedor
navegación y columnas básicas de predeterminado y el Jumbotron.
cuadrícula.
Barras de nav. en funcionamiento

Barra de navegación Barra de navegación Barra de navegación fija
Plantillas muy básicas que incluyen estática superior Plantilla muy básica con una barra
la barra de nav. y algo de contenido Plantilla muy básica con una barra de navegación fija además de algo
adicional. de navegación estática superior de contenido adicional.
junto con algo de contenido
adicional.
Componentes personalizados
Cubierta Bandeja circular Blog

Una plantilla de una página para Personalice la barra de navegación Distribución de blog de dos
crear páginas iniciales sencillas y y bandeja circular, para agregar columnas sencilla con navegación,
hermosas. algunos nuevos componentes. encabezado y tipo de letra
personalizados.
Consola Página de inicio de Navegación justificada

Estructura básica para una consola sesión Create a custom navbar with
de admin con barras laterales y de Esquema de forma personalizada justified links. Heads up! Not too
navegación fijas. para un formato de inicio de sesión WebKit friendly.
sencillo
Pie de página pegadizo Pie de página pegadizo y
Coloque un pie de página en la barra nav.
parte inferior de la página de vista Coloque un pie de página en la
cuando el contenido es más corto parte inferior de la ventana de vista
que este. con una barra de nav. superior.
Experimentos
Bootstrap que no Fondo

responde Cree un menú de navegación de
Easily disable the responsiveness fondo activable para usarse con
of Bootstrap per our docs. Bootstrap.
Comunidad
Manténgase actualizado sobre el desarrollo de Bootstrap y comuníquese con la comunidad,

gracias a estos recursos útiles.
Lea y suscríbase a El Blog oficial de Bootstrap.

Converse con colegas que usan Bootstrap usando IRC en el servidor de irc.freenode.net, en el canal ##twitter-
bootstrap channel.
For help using Bootstrap, ask on StackOverflow using the tag twitter-bootstrap-3.
Encuentre ejemplos inspiradores de personas que desarrollan gracias a Bootstrap en Bootstrap Expo.
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    No disp.
iOS  No disp.  
No disp.
Mac OS X    
Windows     
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.
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.
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".
Se incluye esta etiqueta en todas las documentaciones de Bootstrap y ejemplos para garantizar la mejor generación
posible de gráficos en cada versión compatible de 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.
Para su información, incluimos esto en los docs de Bootstrap como un ejemplo.
Redondeo de porcentajes de Safari

Desde Safari v6.1 para OS X y Safari para iOS v7.0.1, el motor de generación de gráficos de Safari no ha podido manejar
correctamente la cantidad de decimales utilizados en nuestras clases de cuadrícula .col-*-1. Si tiene 12 columnas
individuales de cuadrícula, notará que no se ven bien si se compara con otras filas de columnas. No podemos hacer
gran cosa (see #9282) pero si tiene algunas opciones:
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. 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>
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.in
dexOf('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">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
El bookmarklet de "HTML Codesniffer" para identificar problemas de accesibilidad.
El proyecto A11Y
Documentación de accesibilidad MDN
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.
Personalizar Bootstrap
Se puede actualizar Bootstrap mejor cuando se la maneja como una dependencia separada y
con versiones independientes en su ambiente de desarrollo. Al hacerlo será más fácil actualizar
Bootstrap en el futuro.
Cuando haya descargado e incluido los estilos y pequeños programas de Bootstrap, podrá personalizar sus
componentes. Solamente cree una nueva hoja de estilo (Less, si desea, o solo CSS sencillo), para albergar sus
personalizaciones.
¿Compilado o reducido?
Excepto si planea leer el CSS, escoja hojas de estilo minimizadas. Es el mismo código, solo compacto. Los
estilos minimizados utilizan menos ancho de banda, lo que es bueno especialmente en ambientes de
producción.
A partir de esto, incluya cualquier componente de Bootstrap y contenido de HTML que necesite para crear plantillas para
las páginas de su sitio de internet.
Personalización de componentes
Usted puede personalizar los componentes en distintas medidas, pero la mayoría corresponde a dos tipos:
personalización liviana y camb ios completos. Hay muchos ejemplos de ambos disponibles por parte de terceros.
Definimos personalizaciones livianas como cambios superficiales, tales como modificaciones de colores y fuentes de
los componentes de Bootstrap. Una ejemplo de personalización liviana es Twitter Translation Center (desarrollado por
@mdo). Revisemos cómo implementar el botón personalizado que escribimos para este sitio, .btn-ttc.
Los botones ya existentes de Bootstrap requieren solo una clase .btn para comenzar. En este caso, ampliamos el
estilo de .btn con una nueva clase de modificador, .btn-ttc, que crearemos. Esto genera un aspecto personalizado
diferente con un esfuerzo mínimo.
Nuestro botón personalizado se crea con este código:
<button type="button" class="btn btn-ttc">Save changes</button>
Revise cómo se agrega .btn-ttc a la clase normal .btn.
Para implementarlo, en la hoja de estilo personalizada, agregue el siguiente código de CSS:
/* Custom button
-------------------------------------------------- */
/* Override base .btn styles */

/* Apply text and background changes to three key states: default, hover, and active (clic
k). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
}
/* Apply the custom-colored gradients */

/* Note: you'll need to include all the appropriate gradients for various browsers and sta
ndards. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
...
}
/* Set the hover state */

/* An easy hover state is just to move the gradient up a small amount. Add other embellish
ments as you see fit. */
.btn-ttc:hover {
background-position: 0 -15px;
}
Para resumir, revise el código fuente de estilo y copie los selectores requeridos para lograr sus cambios.
En resumen, este es el flujo básico de trabajo.
Para cada elemento que desea personalizar, busque primero su código en el CSS compilado de Bootstrap.
Copie el selector del componente y los estilos y péguelos en su hoja de estilo personalizada. Por ejemplo, para
personalizar el fondo de la barra de navegación, solo copie la especificación de estilo .navbar.
En su hoja de estilo personalizada, edite el CSS que copió del código fuente de Bootstrap. No hace falta agregar
clases adicionales anteriores ni posteriores !important aquí. Simplifíquelo.
Deseche y repita hasta que esté contento con los resultados de nuestras personalizaciones.
Cuando esté cómodo con las personalizaciones livianas, los cambios completos solo igual de sencillos. Para un sitio
como Karma que utiliza Bootstrap como una reconfiguración de CSS con grandes modificaciones, hacen falta más
tareas. Pero se aplica el mismo principio: incluir primero la hoja de estilo predeterminada de Bootstrap y luego aplicar su
hoja de estilo personalizada.
Métodos de personalización alternativos

Si bien no se recomienda para novatos de Bootstrap, puede usar uno o dos métodos alternativos para la
personalización. El primero consiste en modificar los archivos .less fuente (lo que dificulta mucho las
actualizaciones) y el segundo incluye mapear el código fuente de Less a sus propias clases mediante mixins.
Por ahora, no se documentan aquí ninguna de las dos opciones.
Cómo quitar los componentes innecesarios

Not all sites and applications need to make use of everything Bootstrap has to offer, especially in production
environments where optimizing bandwidth is an issue. We encourage you to remove whatever is unused with our
Customizer.
Utilizando el personalizador, desactive cualquier componente, característica o activo que no necesita. Haga clic en
descargar y saque los archivos predeterminados de Bootstrap para reemplazarlos con estos nuevos personalizados.
Obtendrá el Bootstrap básico, pero sin las características que usted considere innecesarias. Todas las versiones
personalizadas incluyen versiones compiladas y reducidas, or lo que debe usar la que se adapte a sus necesidades.

Incorporacion Modelo Virtual

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Incorporacion Modelo Virtual

Cargado por

Copyright:

Formatos disponibles

Bootstrap - Pasos iniciales

Un resumen de Bootstrap, cómo descargarlo, cómo usarlo,

Bootstrap Código fuente Sass

Descargar Bootstrap Descargar el código fuente Descargar Sass

Instalar con Bower

Bootstrap compilado previamente

Código fuente de Bootstrap

Using the framework

Plantilla inicial Tema de Bootstrap Cuadrículas

Jumbotron Jumbotron estrecho

Barras de nav. en funcionamiento

Cubierta Bandeja circular Blog

Consola Página de inicio de Navegación justificada

Bootstrap que no Fondo

Manténgase actualizado sobre el desarrollo de Bootstrap y comuníquese con la comunidad,

Lea y suscríbase a El Blog oficial de Bootstrap.

Pasos para desactivar las reacciones de páginas

Plantilla de Bootstrap con desactivación de reacciones

Ver un ejemplo de reacciones desactivadas

Migración de v2.x a v3.x

Navegadores y dispositivos compatibles

Chrome Firefox Internet Explorer Opera Safari

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

Internet Explorer 8 y Respond.js

Respond.js y CSS en dominios múltiples

Respond.js and file://

Internet Explorer 8 y tamaño de cuadro

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

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

Internet Explorer 10 en Windows 8 y Windows Phone 8

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

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

Para su información, incluimos esto en los docs de Bootstrap como un ejemplo.

Redondeo de porcentajes de Safari

Modos, barras de navegación y teclados virtuales

Listas desplegables de la barra de navegación

Acercamiento / alejamiento en navegadores

Ventanilla de observación de la impresora

Navegador predeterminado de Android

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

/* Option 1A: Override a single element's box model via CSS */

/* Option 2B: Reset an entire region with a custom Less mixin */

Bootstrap permite estándares comunes de internet y, con un esfuerzo adicional mínimo, se

No tiene la obligación de:

Nuestro botón personalizado se crea con este código:

<button type="button" class="btn btn-ttc">Save changes</button>

Revise cómo se agrega .btn-ttc a la clase normal .btn.

Para implementarlo, en la hoja de estilo personalizada, agregue el siguiente código de CSS:

/* Override base .btn styles */

/* Apply the custom-colored gradients */

/* Set the hover state */

En resumen, este es el flujo básico de trabajo.