Bootstrap (framework)

El texto que sigue es una traduccin defectuosa.

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

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

Bootstrap

getbootstrap.com

Informacin general

Desarrollador(es) Twitter

Lanzamiento inicial 19 de agosto de 2011

ltima versin estable 3.3.7 ([[1] info])

25 de julio de 2016 (1 ao, 3 meses y 6
das)

ltima versin en 2016

pruebas

Gnero software libre

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

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

6Creando una cuadrilla de diseo fija con una cuadrilla de diseo fluida anidada
 7Referencias

8Bibliografa

9Enlaces externos

Origen[editar]
Bootstrap fue desarrollado por Mark Otto y Jacob 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 v3.0.0, v3.3.7

Versin 4 || v4 alfa,

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 Bootstrap67 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.c
ss" 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>

Creando una cuadrilla de diseo fija con una cuadrilla de

diseo fluida anidada[editar]

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