-
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