Bootstrap (framework)

El texto que sigue es una traduccin defectuosa.

Si quieres colaborar con Wikipedia, busca el artculo original y mejora esta traduccin.

{{subst:Aviso mal
Copia y pega el siguiente cdigo en la pgina de discusin del autor:
traducido|Bootstrap (framework)}} ~~~~

Bootstrap

Desarrollador(es)

Twitter
getbootstrap.com

Informacin general

Lanzamiento inicial Agosto 2011

ltima versin 3.3.6 ([[1] info])

estable 24 de noviembre de 2015 (1 ao, 4
meses y 15 das)

ltima versin en 2016

pruebas
 Gnero ?

Programado en HTML, CSS, LESS y JavaScript

Sistema operativo Cross-platform

Licencia MIT License (Apache License 2.0 prior to

3.0.1)

Estado actual Activo

En espaol No

[editar datos en Wikidata]

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]

Versione
s

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

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.
Versin 2
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.mi
n.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