BootstrapEs un framework Responsive Design desarrollado por Mark Otto y Jacbod Thornton deTwitter y esta diseado para ayudar a diseadores y desarrolladores en el proceso decreacin de sitios web y aplicaciones de una manera rpida y fcil controlando la partefront de los sitios.

Nota: La palabra inglesa "framework" (marco de trabajo) define, en trminos generales, unconjunto estandarizado de conceptos, prcticas y criterios para enfocar un tipo deproblemtica particular que sirve como referencia, para enfrentar y resolver nuevosproblemas de ndole similar. En el desarrollo de software, un framework o infraestructuradigital, es una estructura conceptual y tecnolgica de soporte definido, normalmente conartefactos o mdulos de software concretos, que puede servir de base para la organizaciny desarrollo de software. Tpicamente, puede incluir soporte de programas,bibliotecas, yun lenguaje interpretado, entre otras herramientas, para as ayudar a desarrollar y unirlos diferentes componentes de un proyecto.

Bootstrap es uno de los proyectos de cdigo abierto que ha causado gran impacto en losdiseadores web del mundo en los ltimos aos y muestra de eso lo podemos ver enGitHub, donde aun sustenta el primer lugar como el proyecto mas popular de esterepositorio donde los mas grande del mundo del diseo y desarrollo web implementan susgrandes y novedosos proyectos.Bootstrap 3 se construyo basado y pensado para la web mvil mobile-first approach oenfoque mvil de primera, donde se prioriza la web moderna, la web que se puede vercorrectamente en cualquier dispositivo, desde pantallas pequeas con poca resolucinhasta dispositivos con resoluciones grandes y pantallas de gran tamao.

Ventajas De Twitter Bootstrap. Por Qu Usarlo?Bueno la mayor ventaja de utilizar Twitter Bootstrap consiste en el conjunto deherramientas y componentes de interfaz que trae este sistema para crear diseosresponsives, flexibles o fijas sin tener que hacer muchos Esfuerzos.

Porque podemos crear componentes de interfaz avanzados como Scrollspy yTypeaheads sin tener que escribir una sola lnea de cdigo JavaScript.

Porque sin duda ahorraremos mucho tiempo y esfuerzo al momento del diseoweb con Bootstrap, ya que podemos utilizar un montn de cosas ya predefinidasen este sistema, y cosas que son tiles en cualquier proyecto web.

Por sus caractersticas responsive El uso de Bootstrap nos garantiza el podercrear diseos responsives o sensibles fcilmente. Este framework poseecaractersticas de respuestas que hacen que sus diseos aparezcan de la forma masapropiada en los diferentes dispositivos y resoluciones de pantallas que estn en elmercado.

Porque con Bootstrap podremos crear diseos coherentes ya que todos loscomponentes comparten las mismas base y los mismos estilos de diseo a travs deuna librera central, por lo que los diseos son consistentes a lo largo del desarrollo.

Por su fcil uso Boostrap es muy fcil de usar, cualquier persona con unconocimiento bsico de HTML y CSS se puede iniciar en el desarrollo con TwitterBootstrap y obtener grandes y buenos resultados.

Por la compatibilidad con los diferentes navegadores Twitter Bootstrap se crea enbase a los diferentes navegadores modernos como Firefox, Chrome, Safari, Opera yInternet Explorer y con cierto soporte a los no tan modernos (IE 8+).

Porque es totalmente gratuito este gran framework es open source as quepodemos descargarlo y usarlo libremente.

En esta direccin oficial de Bootstrap podemos ver algunos proyectos creados bajobootstrap y subidos para su exposicin. http://expo.getbootstrap.com/

Como Ocupar Twitter Bootstrap.Para empezar a trabajar con este framework primero debemos descargar los archivosnecesarios, esto lo haremos desde la pagina oficial: http://getbootstrap.com/

Daremos clic en el botn que dice Download Bootstrap:

Ahora tenemos a nuestra disposicin varios botones para descargar Bootstrap dediferentes formas pero nosotros vamos a hacerlo de la manera ms sencilla por elmomento y ms adelante ya veremos las otras opciones. Pulsamos sobre el primer botn:Download Bootstrap. Esto descargara un archivo con un nombre similar a: bootstrap-3.3.4-dist.zip, este archivo debemos descomprimirlo, al hacerlo nos encontraremos conuna carpeta con el siguiente contenido:

Veremos en efecto 3 carpetas, una con las fuentes que utiliza el framework, otra con losarchivos de estilo CSS y otra con archivos javascript.Si buscamos dentro de las carpetas veremos un contenido similar a la siguienteestructura:bootstrap/ css/

bootstrap.css

bootstrap.css.map

bootstrap.min.css

bootstrap-theme.css

bootstrap-theme.css.map

bootstrap-theme.min.css

js/

bootstrap.js

bootstrap.min.js

fonts/

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

glyphicons-halflings-regular.woff2

Ahora copieramos las 3 carpetas dentro de una nueva carpeta, haz una carpeta llamadaejemplo bootstrap y pega ahi las 3 carpetas, ahora haz un nuevo archivo llamadoindex.html, dentro de este archivo pegaremos la siguiente plantilla de codigo:

Bootstrap101Template

>

HeaderNavBar

.colmd1.colmd7

.colmd3

.colmd1footerVeamos como queda el ejemplo:

Vemos que de momento no se ve tan bonito como debera, comenzaremos editando laseccin referente al navbar.Para poner una barra de navegacion utilizaremos la siguiente etiqueta:

Ahora dentro de esta etiqueta pondremos 2 secciones, una para cuando se vea en unapantalla pequea (como la de un celular) y otra que sera la vista ampliada:

TogglenavigationBrand

Link(current)Link DropdownActionAnotheractionSomethingelsehereSeparatedlinkOnemoreseparatedlink Submit

La parte en color azul es un ejemplo de como poner un enlace que agrupe otros enlaces, la

parte en color rojo-rosa es un ejemplo de elementos de formularios dentro de nuestrabarra de navegacin.Veamos como se visualizara en el navegador:

TABLAS CON BOOTSTRAPEstas se crean de igual manera como si no estuviramos usando bootstrap, aunque siqueremos que adopten otro estilo debemos modificar el atribulo class de la etiqueta quedefine la tabla (etiqueta table), para esto utilizaremos la clase table, en el siguienteejemplo veremos una tabla pequea con el estilo de bootstrap:

Clase table Materia Alumno Apellido Nota SIG135 Mnica Mariela Daz Ruiz 8.7

PAM135 Claudia Angelica Jordan Vasquez 7.8 FIR235 Maynor Gabriel Lpez Jimnez 9.3 Este cdigo nos mostrara una tabla en el navegador as:

Ahora veamos que variaciones podemos ingresar a nuestras tablas.

table-stripedEsta clase es utilizada cuando queremos aadirle un efecto a rayas a nuestra tabla, estohar que algunas filas de la tabla tengan un color mas oscuro en comparacin a lasdems, de hecho irn intercaladas, una clara, una oscura, clara, oscura, clara, oscura, y ashasta terminar las filas de la tabla, esta clase debe ser aadida en el atributo class de ladefinicin de la tabla:

Clase table-striped Materia Alumno Apellido Nota SIG135 Mnica Mariela Daz Ruiz 8.7

PAM135 Claudia Angelica Jordan Vasquez 7.8 FIR235 Maynor Gabriel Lpez Jimnez 9.3

table-borderedComo su nombre en ingles nos indica esta clase permitira hacer visibles todos los bordesde nuestra tabla, si nos hemos fijado las otras clases solo muestran divisioneshorizontales, con esta clase podremos ver tambien las verticales. Ejemplo:Clase table-bordered Materia Alumno Apellido Nota SIG135 Mnica Mariela Daz Ruiz 8.7 PAM135 Claudia Angelica Jordan Vasquez 7.8 FIR235

Maynor Gabriel Lpez Jimnez 9.3

table-hoverLa palabra en esta clase talvez nos haga recordar cuando modificamos este atributo de losenlaces, cuando usemos esta clase las filas de nuestra tabla se mostraran con un colormas oscuro, pero solo mientras el puntero este sobre ellas. Veamos como se usa:Clase table-hover Materia Alumno Apellido Nota SIG135 Mnica Mariela Daz Ruiz 8.7 PAM135 Claudia Angelica Jordan Vasquez 7.8 FIR235 Maynor Gabriel Lpez Jimnez 9.3

table-condensedMuestra una tabla condensada, es decir reduce a la mitad el espacio entre una fila y otra,es como modificar el interlineado en el texto. Veamos como se utiliza:Clase table-condensed Materia Alumno Apellido Nota SIG135 Mnica Mariela Daz Ruiz 8.7 PAM135 Claudia Angelica Jordan Vasquez 7.8 FIR235 Maynor Gabriel Lpez Jimnez 9.3

Existen tambin modificadores dentro de las filas, que nos permiten darle cierto color alas filas en base a un evento contextual. Las clases que podemos utilizar son la siguientes:

active success info warning danger

Para utilizarlas solo debemos modificar el atributo class de las filas de la siguientemanera:

Hasta el momento solo hemos utilizado ejemplos con un solo estilo de tabla, ahora loscombinaremos:Clase table-hover + table-bordered + table-responsive Clase Descripcion active Aplica el color de -hover- a una fila o celda sucess Indica la realizacion exitosa o positiva de una accion info Indica un informe neutral de cambio o accion warning Indica una advertencia que podria requerir de atencion

danger Indica una accion peligrosa o potencialmente negativa

Ventajas De Twitter Bootstrap. Por Qu Usarlo?table-stripedtable-hover