Bootstrap es un framework o conjunto de herramientas de Cdigo abierto para diseo de sitios

y aplicaciones web. Contiene plantillas de diseo con tipografa, formularios, botones, cuadros,
mens de navegacin y otros elementos de diseo basado en HTML y CSS, as como,
extensiones de JavaScript opcionales adicionales.
Es el proyecto ms popular en GitHub1 y es usado por la NASA y la MSNBC entre otras
organizaciones.2 3

ndice
[ocultar]

1Origen

o 1.1Versiones

2Caractersticas

3Estructura y Funcin

o 3.1Sistema de cuadrilla y diseo sensible

o 3.2Entendiendo la hoja de estilo CSS

o 3.3Componentes re-usables

o 3.4Plug-ins de JavaScript

4Uso

5Creando una cuadrilla de diseo fija

6Referencias

7Bibliografa

8Enlaces externos

Origen[editar]
Bootstrap fue desarrollado por Mark Otto y Jacbod Thornton de Twitter, como un marco de
trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de
Bootstrap, se usaban varias libreras para el desarrollo de interfaces de usuario, las cuales
llevaban a inconsistencias y a una gran carga de trabajo en su mantenimiento. Segn el
desarrollador de Twitter Mark Otto, frente a esos desafos:
"...un pequeo grupo de desarrolladores nos reunimos a disear y construir una nueva herramienta interna
y vimos una oportunidad de hacer ms. A travs de ese proceso, nos vimos construyendo algo mucho ms
sustancial que otra herramienta interna. Meses despus terminamos con una primera versin de Bootstrap
como una manera de documentar y compartir bienes y patrones de diseo comunes dentro de la
compaa."
Mark Otto4

El primer desarrollo en condiciones reales ocurri durante la primera "Semana de Hackeo"

(Hackweek) de Twitter."5 Mark Otto mostr a algunos colegas como acelerar el desarrollo de sus
proyectos con la ayuda de la herramienta de trabajo. Como resultado, decenas de temas se han
introducido en el marco de trabajo.
En agosto del 2011, Twitter liber a Bootstrap como cdigo abierto. En febrero del 2012, se
convirti en el proyecto de desarrollo ms popular de GitHub.
Versiones[editar]

Versiones

Versin 1 v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0 , v1.0.0

Versin 2 v2.3.2,v2.3.1,v2.3.0 ,v2.2.2,v2.2.1,v2.2.0,v2.1.1,v2.1.0,v2.0.4,v2.0.3,v2.0.2,v2.0.1,v2.0.0

Versin 3 v3.1.1,v3.1.0,v3.0.3,[2],v3.0.1,v3.0.0, v3.3.6

Caractersticas[editar]
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible
con la mayora de los navegadores web. La informacin bsica de compatibilidad de sitios web o
aplicaciones est disponible para todos los dispositivos y navegadores. Existe un concepto de
compatibilidad parcial que hace disponible la informacin bsica de un sitio web para todos los
dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las
esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de
soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es
requerida para su uso.
Desde la versin 2.0 tambin soporta diseos sensibles. Esto significa que el diseo grfico de
la pgina se ajusta dinmicamente, tomando en cuenta las caractersticas del dispositivo usado
(Computadoras, tabletas, telfonos mviles).
Bootstrap es de cdigo abierto y est disponible en GitHub. Los desarrolladores estn
motivados a participar en el proyecto y a hacer sus propias contribuciones a la plataforma.

Estructura y Funcin[editar]

Ejemplo de una pgina web usando el Framework de Bootstrap renderizado en Mozilla Firefox
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que
implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada
bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden
adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su
proyecto.
Los ajustes son posibles en una medida limitada a travs de una hoja de estilo de configuracin
central. Los cambios ms profundos son posibles mediante las declaraciones LESS.
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores,
selectores anidados, as como clases mixin.
Desde la versin 2.0, la configuracin de Bootstrap tambin tiene una opcin especial de
"Personalizar" en la documentacin. Por otra parte, los desarrolladores eligen en un formulario
los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus
necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-
compilada.
Sistema de cuadrilla y diseo sensible[editar]
Bootstrap viene con una disposicin de cuadrilla estndar de 940 pxeles de ancho.
Alternativamente, el desarrollador puede usar un diseo de ancho-variable. Para ambos casos,
la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de
dispositivos: telfonos mviles, formato de retrato y paisaje, tabletas y computadoras con baja y
alta resolucin (pantalla ancha). Esto ajusta el ancho de las columnas automticamente.
Entendiendo la hoja de estilo CSS[editar]
Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones bsicas de estilo
para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema
de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y
formularios.
Componentes re-usables[editar]
En adicin a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos
comnmente usados. sta incluye botones con caractersticas avanzadas (e.g grupo de botones
o botones con opcin de men desplegable, listas de navegacin, etiquetas horizontales y
verticales, ruta de navegacin, paginacin, etc.), etiquetas, capacidades avanzadas de
miniaturas tipogrficas, formatos para mensajes de alerta y barras de progreso.
Plug-ins de JavaScript[editar]
Los componentes de JavaScript para Bootstrap estn basados en la librera jQuery de
JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen
elementos adicionales de interfaz de usuario como dilogos, tooltips y carruseles. Tambin
extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo
una funcin de auto-completar para campos de entrada (input). La versin 2.0 soporta los
siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert,
Button, Collapse, Carousel y Typeahead.
Una implementacin de Bootstrap usando el Dojo toolkit tambin est disponible. Es
llamada Dojo Bootstrap6 7 y es un puerto de los plug-ins de Twitter Bootstrap. Usa el cdigo
Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition8 ).

Uso[editar]
Para usar Bootstrap en una pgina HTML, el desarrollador solo debe descargar la hoja de estilo
Bootstrap CSS y enlazarla en el archivo HTML. Otra opcin sera compilar el archivo CSS desde
la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial.
Si el desarrollador tambin quiere usar los componentes de JavaScript, stos deben estar
referenciados junto con la librera jQuery en el documento HTML.
El siguiente ejemplo ilustra como funciona. El cdigo HTML define un simple formulario de
bsqueda y una lista de resultados en un formulario tabular. La pgina consiste en elementos
regulares y semnticos de HTML 5, y alguna informacin adicional de la clase de CSS de
acuerdo con la documentacin de Bootstrap. La figura muestra la representacin del documento
en Mozilla Firefox 10.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Bootstrap</title>

<!-- Bootstrap CSS -->

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<div class="container">
<h1>Search</h1>
<label>Ejemplo de un formulario sencillo de bsqueda.</label>

<!-- Formulario de bsqueda con un campo de entrada (input) y un

botn -->
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-primary">Buscar</button>
</form>

<h2>Results</h2>

<!-- Tabla con celdas de color de fondo alternantes y con marco -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Ttulo</th>
</tr>
</thead>
 <tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Consetetur sadipscing elitr</td>
</tr>
<tr>
<td>3</td>
<td>At vero eos et accusam</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Bootstrap JS -->

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>

Creando una cuadrilla de diseo fija[editar]

<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-8">...</div>
</div>

9
== Creando una cuadrilla de diseo fija con una cuadrilla de diseo fluida anidada ==

<div class="row">
<div class="col-md-4">
<div class="4">...</div>
<div class="4">...</div>
<div class="4">...</div>
 </div>
<div class="col-md-8">...</div>
</div>

Referencias[editar]
1. Volver arriba GitHub: Popular Watched Repositories.
Archivado desde el original el 24 de noviembre de 2015.
Consultado el 26 de julio de 2012.

2. Volver arriba NASA - Spot The Station. 6 de noviembre de

2012.

3. Volver arriba MSNBC - Beaking News. 6 de noviembre de

2012.

4. Volver arriba Mark Otto (17 de enero de 2012). Bootstrap in A

List Apart #342. Consultado el 5 de marzo de 2012.

5. Volver arriba Mark Otto (19 de agosto de 2011). Bootstrap from

Twitter. Archivado desde el original el 24 de noviembre de 2015.
Consultado el 27 de abril de 2012.

6. Volver arriba Blog: Using Twitter Bootstrap with Dojo. Retrieved

on 2012-09-18

7. Volver arriba Dojo Toolkit implementation of Twitter Bootstrap.

Retrieved on 2012-09-18

8. Volver arriba AMD for asynchronous loading of modules and its

dependencies. Retrieved on 2012-09-18

9. Volver arriba Insertar nota a pie dle pgina aqu

Bibliografa[editar]
Cochran, David (12 de noviembre de 2012). Twitter Bootstrap
Web Development (1st edicin). Packt Publishing.
p. 100. ISBN 978-1849518826.

Enlaces externos[editar]
Bootstrap, from Twitter - The official website, contains
documentation and downloads

Create Clean Webpages with Twitter Bootstrap - A brief article

on CodeProject that demonstrates how to get started with the
library

BootTheme : Web Designer and Theme Generator for Twitter

Bootstrap - Online tool to design web pages and generate
themes
 Bootstrap en Espaol - la traduccin ha sido avalada por el Sitio
Oficial de Bootstrap y

Bootstrap 3, el manual oficial en Castellano. Traductor: Javier

Eguiluz
Categoras:
Diseo web
HTML
Bibliotecas de JavaScript
CSS
Proyectos de software libre

Men de navegacin
No has iniciado sesin

Discusin

Contribuciones

Crear una cuenta

Acceder
Artculo
Discusin
Leer
Editar
Ver historial
Buscar
Ir

Portada
Portal de la comunidad
Actualidad
Cambios recientes
Pginas nuevas
Pgina aleatoria
Ayuda
Donaciones
Notificar un error
Imprimir/exportar
Crear un libro
Descargar como PDF
Versin para imprimir
En otros proyectos
Wikimedia Commons
Herramientas
Lo que enlaza aqu
Cambios en enlazadas
Subir archivo
Pginas especiales
Enlace permanente
Informacin de la pgina
 Elemento de Wikidata
Citar esta pgina
En otros idiomas

Deutsch
English
Franais
Bahasa Indonesia
Italiano
Bahasa Melayu


19 ms
Editar enlaces
Esta pgina fue modificada por ltima vez el 27 mar 2017 a las 15:15.
El texto est disponible bajo la Licencia Creative Commons Atribucin Compartir

Igual 3.0; pueden aplicarse clusulas adicionales. Al usar este sitio, usted acepta
nuestros trminos de uso y nuestra poltica de privacidad.
Wikipedia es una marca registrada de la Fundacin Wikimedia, Inc., una
organizacin sin nimo de lucro.

Poltica de privacidad

Acerca de Wikipedia

Limitacin de responsabilidad

Desarrolladores

Declaracin de cookies

Versin para mviles