Beruflich Dokumente
Kultur Dokumente
Índice
Origen
Versiones
Características Información general
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 código abierto. En febrero del 2012, se convirtió en el proyecto de desarrollo
más popular de GitHub.
Versiones
Versiones
Versión 1 v1.4.0, v1.3.0, v1.2.0, v1.1.1, v1.1.0, v1.0.0
v2.3.2 (https://getbootstrap.com/2.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,
Versión 2
v2.0.3, v2.0.2, v2.0.1, v2.0.0
v3.3.7 (https://getbootstrap.com/docs/3.3/), v3.3.6, v3.3.5, v3.3.4, v3.3.2, v3.3.1, v3.3.0, v3.2.0,
Versión 3
v3.1.1, v3.1.0, v3.0.3, v3.0.2, v3.0.1, v3.0.0
Versión 4 v4.1.3 (https://getbootstrap.com/docs/4.1/), v4.1.2, v4.1.1, v4.1.0, v4.0.0
Características
Bootstrap tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los
navegadores web. La información básica 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 información básica 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 versión 2.0 también soporta diseños web adaptables. Esto significa que el diseño gráfico de la página se ajusta
dinámicamente, tomando en cuenta las características del dispositivo usado (Computadoras, tabletas, teléfonos móviles).
Bootstrap es de código abierto y está disponible en GitHub. Los desarrolladores están motivados a participar en el proyecto y a
hacer sus propias contribuciones a la plataforma.
Función y Estructura
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 través de una hoja de estilo de configuración central. Los cambios más
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.
Componentes re-utilizables
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye
botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación,
etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas
tipográficas, formatos para mensajes de alerta y barras de progreso.
Plug-ins de JavaScript
Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la
herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles.
También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-
completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown,
Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.
Una implementación de Bootstrap usando el Dojo toolkit también está disponible. Es llamada Dojo Bootstrap6 7 y es un puerto
de los plug-ins de Twitter Bootstrap. Usa el código Dojo al 100% y tiene soporte para AMD (Asynchronous Module Definition8
).
Uso
Para usar Bootstrap en una página HTML, el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el
archivo HTML. Otra opción sería compilar el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede
realizarse con un compilador especial.
Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery
en el documento HTML.
El siguiente ejemplo ilustra como funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados
en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de
la clase de CSS de acuerdo con la documentación de Bootstrap. La figura muestra la representación del documento en Mozilla
Firefox 10.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Bootstrap</title>
</head>
<body>
<div class="container">
<h1>Search</h1>
<label>Ejemplo de un formulario sencillo de búsqueda.</label>
<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>Título</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>
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-8">...</div>
</div>
<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
1. «GitHub: Popular Watched Repositories» (https://web.archive.org/web/20100419140506/http://github.com/popula
r/watched). Archivado desde el original (https://github.com/popular/watched) el 19 de abril de 2010. Consultado el
26 de julio de 2012.
2. «NASA - Spot The Station» (http://spotthestation.nasa.gov/). 6 de noviembre de 2012.
3. «MSNBC - Beaking News» (http://www.breakingnews.com/). 6 de noviembre de 2012.
4. Mark Otto (17 de enero de 2012). «Bootstrap in A List Apart #342» (http://www.markdotto.com/2012/01/17/bootstr
ap-in-a-list-apart-342). Consultado el 5 de marzo de 2012.
5. Mark Otto (19 de agosto de 2011). «Bootstrap from Twitter» (https://web.archive.org/web/20120512185704/http
s://dev.twitter.com/blog/bootstrap-twitter). Archivado desde el original (https://dev.twitter.com/blog/bootstrap-twitte
r) el 12 de mayo de 2012. Consultado el 27 de abril de 2012.
6. Blog: Using Twitter Bootstrap with Dojo (https://web.archive.org/web/20140105045302/http://kevinandre.com/dev/
using-twitter-bootstrap-with-dojo/). Retrieved on 2012-09-18
7. Dojo Toolkit implementation of Twitter Bootstrap (http://dojobootstrap.com/). Retrieved on 2012-09-18
8. AMD for asynchronous loading of modules and its dependencies (https://github.com/amdjs/amdjs-api/wiki/AMD).
Retrieved on 2012-09-18
Bibliografía
Cochran, David (12 de noviembre de 2012). Twitter Bootstrap Web Development (http://www.packtpub.com/twitte
r-bootstrap-web-development/book) (1st edición). Packt Publishing. p. 100. ISBN 978-1849518826.
Enlaces externos
Ejemplo de bootstrap con php (http://programacionconphp.com/aplicar-estilos-a-un-menu-dinamico-en-php-con-
bootstrap/)
Bootstrap (https://getbootstrap.com/) - Sitio web oficial
Create Clean Webpages with Twitter Bootstrap (http://www.codeproject.com/Articles/506653/Create-Clean-Webp
ages-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 (http://www.boottheme.com/) - Online
tool to design web pages and generate themes
Bootstrap en Español (https://web.archive.org/web/20131107124343/http://www.oneskyapp.com/docs/bootstrap/
es) - la traducción ha sido avalada por el Sitio Oficial de Bootstrap y
Bootstrap 3, el manual oficial en Castellano. Traductor: Javier Eguiluz (http://librosweb.es/bootstrap_3)
Obtenido de «https://es.wikipedia.org/w/index.php?title=Bootstrap_(framework)&oldid=115144313»
Esta página se editó por última vez el 9 abr 2019 a las 12:29.
El texto está disponible bajo la Licencia Creative Commons Atribución Compartir Igual 3.0; pueden aplicarse
cláusulas adicionales. Al usar este sitio, usted acepta nuestros términos de uso y nuestra política de privacidad.
Wikipedia® es una marca registrada de la Fundación Wikimedia, Inc., una organización sin ánimo de lucro.