INTRODUCCIN

CONCEPTO
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 JavaScriptopcionales adicionales.
Historia
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como
un producto de cdigo abierto en agosto de 2011 en GitHub.
Segn el desarrollador de Twitter Mark Otto.
"...un pequeo grupo de desarrolladores y yo nos reunimos a disear y construir
una nueva herramienta interna y vimos una oportunidad de hacer ms. A travs
de ese proceso, nos vimos construir algo mucho ms sustancial que otra
herramienta interna ms. 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 Otto
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.
LESS es un lenguaje dinmico de hoja de estilos diseado por Alexis Sellier,
proporcionando los siguientes mecanismos: variables anidamientos, operadores, mixins
y funciones.

Estructura

Sistema de cuadrilla y diseo sensible

Entendiendo la hoja de estilo CSS

Componentes re-usables

Plug-ins de JavaScript

Funciones

Bootstrap viene con una disposicin de cuadrilla estndar de 940 pxeles

de ancho.
Bootstrap proporciona un conjunto de hojas de estilo que proveen
definiciones bsicas de estilo para todos los componentes de HTML.
Bootstrap contiene otra interfaz de elementos comnmente usados.

CONTENIDOS DE LA VERSIN COMPILADA DE BOOTSTRAP

Estos archivos son la forma ms sencilla de utilizar Bootstrap en
cualquier proyecto web.

CONTENIDOS DE LA VERSIN ORIGINAL DE BOOTSTRAP

Incluye, adems de las versiones compiladas de los archivos CSS y

JavaScript, las versiones originales de esos mismos archivos y toda la
documentacin. Tras descomprimir el archivo que te has descargado
con la versin original de Bootstrap, vers la siguiente estructura de
archivos y directorios:

Ventajas de Bootstrap:

Fcil de usar: Cualquier persona con conocimientos simplemente bsicos de

HTML y CSS puede comenzar a usar Bootstrap

Caractersticas de respuesta: CSS sensible de Bootstrap ajusta a los telfonos,

tabletas y ordenadores de sobremesa

Mobile-primer acercamiento: En Bootstrap 3, estilos mviles primer forman

parte del marco bsico

Compatibilidad del navegador: Bootstrap es compatible con todos los

navegadores modernos (Chrome, Firefox, Internet Explorer, Safari y Opera)

Ser usado de forma muy flexible para desarrollo web con unos excelentes
resultados.

Se ha aadido un sistema GRID que permite disear usando un GRID de 12

columnas donde se debe plasmar el contenido, con esto podemos desarrollar
responsive de forma mucho ms fcil e intuitiva.

Bootstrap establece Media Queries

para 4 tamaos de dispositivos

diferentes variando dependiendo del tamao de su pantalla, estas Media Queries

permiten desarrollar para dispositivos mviles y tabletas de forma mucho ms
fcil.

Bootstrap tambin permite insertar imgenes responsive, es decir, con solo

insertar la imagen con la clase img-responsive las imgenes se adaptarn al
tamao.

ELEMENTOS PRINCIPALES

Elemento CSS
En este captulo se explican los estilos que define Bootstrap 3 para las tablas y las
imgenes, incluyendo todas sus variantes. Tambin se explican las classes CSS

genricas y utilidades que simplifican el diseo de los sitios web y que se pueden
aplicar a cualquier elemento.
Tablas

Tablas bsicas

Tablas cebreadas

Tablas con bordes

Tablas dinmicas

Tablas condensadas

Tablas semnticas

Tablas responsivas

Imgenes

.img-rounded, aade unas pequeas esquinas redondeadas en todos los

lados de la imagen aplicando el estilo border-radius: 6px.
.img-thumbnail, muestra la imagen con un relleno blanco y un borde

fino.
.img-circle, convierte la imagen en un crculo aplicando el estilo borderradius: 50%

Listas de elementos

Las listas de los elementos de Bootstrap son componentes bastante flexibles y

poderosos, ya que permiten mostrar listados que estn formados por elementos
complejos.
Listas de elementos con badges

Al aadir un componente de tipo badge a cualquier elemento de una lista

de objetos, el badge se alinear a la derecha automticamente.
Listas de elementos con enlaces
Para crear una lista de elementos pinchables, reemplaza los
elementos <li> por elementos <a> y encirralos dentro de un
elemento <div> en vez de un elemento <ul>.
Listas de elementos con enlaces
Para crear una lista de elementos pinchables, reemplaza
los elementos <li> por elementos <a> y encirralos dentro
de un elemento <div> en vez de un elemento <ul>.
Listas de elementos complejos
El componente de las listas de elementos es tan flexible que puedes
incluir prcticamente cualquier cdigo HTML, incluso cuando todos los
elementos de la lista son enlaces. ej.

Bibliografa
Bootstrap

http://getbootstrap.com/

LibrosWeb: Bootstrap 3, el manual oficial

http://librosweb.es/bootstrap_3/

http://www.w3schools.com/bootstrap/
https://es.wikipedia.org/wiki/Twitter_Bootstrap
https://es.wikipedia.org/wiki/LESS_(lenguaje_de_hojas_de_estilo)
https://raiolanetworks.es/blog/que-es-bootstrap/