Bootstrap

Es un framework Responsive Design desarrollado por Mark Otto y Jacbod Thornton de

Twitter y esta diseado para ayudar a diseadores y desarrolladores en el proceso de
creacin de sitios web y aplicaciones de una manera rpida y fcil controlando la parte
front de los sitios.
Nota: La palabra inglesa "framework" (marco de trabajo) define, en trminos generales, un
conjunto estandarizado de conceptos, prcticas y criterios para enfocar un tipo de
problemtica particular que sirve como referencia, para enfrentar y resolver nuevos
problemas de ndole similar. En el desarrollo de software, un framework o infraestructura
digital, es una estructura conceptual y tecnolgica de soporte definido, normalmente con
artefactos o mdulos de software concretos, que puede servir de base para la organizacin
y desarrollo de software. Tpicamente, puede incluir soporte de programas,bibliotecas, y
un lenguaje interpretado, entre otras herramientas, para as ayudar a desarrollar y unir
los diferentes componentes de un proyecto.
Bootstrap es uno de los proyectos de cdigo abierto que ha causado gran impacto en los
diseadores web del mundo en los ltimos aos y muestra de eso lo podemos ver en
GitHub, donde aun sustenta el primer lugar como el proyecto mas popular de este
repositorio donde los mas grande del mundo del diseo y desarrollo web implementan sus
grandes y novedosos proyectos.
Bootstrap 3 se construyo basado y pensado para la web mvil mobile-first approach o
enfoque mvil de primera, donde se prioriza la web moderna, la web que se puede ver
correctamente en cualquier dispositivo, desde pantallas pequeas con poca resolucin
hasta 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 de
herramientas y componentes de interfaz que trae este sistema para crear diseos
responsives, flexibles o fijas sin tener que hacer muchos Esfuerzos.
Porque podemos crear componentes de interfaz avanzados como Scrollspy y
Typeaheads sin tener que escribir una sola lnea de cdigo JavaScript.
Porque sin duda ahorraremos mucho tiempo y esfuerzo al momento del diseo
web con Bootstrap, ya que podemos utilizar un montn de cosas ya predefinidas
en este sistema, y cosas que son tiles en cualquier proyecto web.
Por sus caractersticas responsive El uso de Bootstrap nos garantiza el poder
crear diseos responsives o sensibles fcilmente. Este framework posee
caractersticas de respuestas que hacen que sus diseos aparezcan de la forma mas
apropiada en los diferentes dispositivos y resoluciones de pantallas que estn en el
mercado.

 Porque con Bootstrap podremos crear diseos coherentes ya que todos los
componentes comparten las mismas base y los mismos estilos de diseo a travs de
una 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 un
conocimiento bsico de HTML y CSS se puede iniciar en el desarrollo con Twitter
Bootstrap y obtener grandes y buenos resultados.
Por la compatibilidad con los diferentes navegadores Twitter Bootstrap se crea en
base a los diferentes navegadores modernos como Firefox, Chrome, Safari, Opera y
Internet Explorer y con cierto soporte a los no tan modernos (IE 8+).
Porque es totalmente gratuito este gran framework es open source as que
podemos descargarlo y usarlo libremente.
En esta direccin oficial de Bootstrap podemos ver algunos proyectos creados bajo
bootstrap y subidos para su exposicin. http://expo.getbootstrap.com/

Como Ocupar Twitter Bootstrap.

Para empezar a trabajar con este framework primero debemos descargar los archivos
necesarios, 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 de

diferentes formas pero nosotros vamos a hacerlo de la manera ms sencilla por el
momento y ms adelante ya veremos las otras opciones. Pulsamos sobre el primer botn:
Download Bootstrap. Esto descargara un archivo con un nombre similar a: bootstrap3.3.4-dist.zip, este archivo debemos descomprimirlo, al hacerlo nos encontraremos con
una carpeta con el siguiente contenido:

Veremos en efecto 3 carpetas, una con las fuentes que utiliza el framework, otra con los
archivos de estilo CSS y otra con archivos javascript.
Si buscamos dentro de las carpetas veremos un contenido similar a la siguiente
estructura:
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 llamada
ejemplo bootstrap y pega ahi las 3 carpetas, ahora haz un nuevo archivo llamado
index.html, dentro de este archivo pegaremos la siguiente plantilla de codigo:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf8">
<metahttpequiv="XUACompatible"content="IE=edge">
<meta name="viewport" content="width=devicewidth,
initialscale=1">
<!Theabove3metatags*must*comefirstinthehead;
anyotherheadcontentmustcome*after*thesetags>
<title>Bootstrap101Template</title>
<!Bootstrap>
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<!HTML5shimandRespond.jsforIE8supportofHTML5
elementsandmediaqueries>
<! WARNING: Respond.js doesn't work if you view the
pageviafile://>
<![ifltIE9]>

<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"

></script>

<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></s
cript>
<![endif]>
</head>
<body>
<!INICIODELCONTENIDODELAPAGINA>

<!FINDELCONTENIDODELAPAGINA>
<! jQuery (necessary for Bootstrap's JavaScript
plugins)>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jque
ry.min.js"></script>
<! Include all compiled plugins (below), or include
individualfilesasneeded>
<scriptsrc="js/bootstrap.min.js"></script>
</body>
</html>
Con esto tendremos una pagina lista para usar el framework bootstrap.
Ahora comenzaremos a modelar contenido dentro de nuestra pagina, la forma de hacerlo
es fcil, deberemos pensar en nuestra pagina como si fuera una tabla, solo que no
utilizaremos tablas, sino que div's a los cuales les asignaremos cierto comportamiento a
travs de clases, de hecho todos los elementos que usaremos son los comunes de html5
pero modificaremos como se comportan y visualizan a travs de las clases que nos brinda
bootstrap.
Verticalmente podemos organizar los elementos a travs de filas y horizontalmente en
columnas (tal como si fuera una tabla no?), pero en cuanto a las columnas podremos
darles un ancho relativo, las columnas tomaran cierto valor numrico entero entre 1 a 12,
la suma total de los anchos de columna no debe superar el numero 12, por ejemplo si
tengo 2 columnas una de 5 y otra de 5, ambas en su ancho suman 10, esto da a lugar a un
espacio relativo de 2 sin utilizar, tambin pudiera tener 2 columnas de 4, 4+4+4=12, en esta
ocasin ocupamos todo el espacio de la cuadricula, y si te lo preguntas tambin pudiera
tener 12 columnas de ancho 1, lo importante es que no supere al valor de 12.
Ahora veamos como ocupar eso, haremos la estructura bsica aadiendo unas cuantas
filas y luego unas columnas:
<divclass="row">
<divclass="colmd12"><h1>Header</h1></div>
</div>
<divclass="row">
<divclass="colmd12">
<h1>NavBar</h1></div>

</div>
<divclass="row">
<divclass="colmd1">.colmd1</div>
<divclass="colmd7">
.colmd7
</div>
<divclass="colmd3">
.colmd3
</div>
<divclass="colmd1">.colmd1</div>
</div>
<divclass="row">
<divclass="colmd12"><h1>footer</h1></div>
</div>
Veamos como queda el ejemplo:

Vemos que de momento no se ve tan bonito como debera, comenzaremos editando la

seccin referente al navbar.
Para poner una barra de navegacion utilizaremos la siguiente etiqueta:
<navclass="navbarnavbarinverse">
<divclass="containerfluid">
</div>
</nav>
Ahora dentro de esta etiqueta pondremos 2 secciones, una para cuando se vea en una
pantalla pequea (como la de un celular) y otra que sera la vista ampliada:
<divclass="navbarheader">

 <buttontype="button"class="navbartogglecollapsed"
datatoggle="collapse"

datatarget="#bsexamplenavbar
collapse1">
<spanclass="sronly">Togglenavigation</span>
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
<spanclass="iconbar"></span>
</button>
<aclass="navbarbrand"href="#">Brand</a>
</div>
<! Collect the nav links, forms, and other content for
toggling>
<div class="collapse navbarcollapse" id="bsexample
navbarcollapse1">
<ulclass="navnavbarnav">
<liclass="active"><ahref="#">Link<spanclass="sr
only">(current)</span></a></li>
<li><ahref="#">Link</a></li>
<liclass="dropdown">
<a href="#" class="dropdowntoggle" data
toggle="dropdown"

role="button"

aria
expanded="false">Dropdown<spanclass="caret"></span></a>
<ulclass="dropdownmenu"role="menu">
<li><ahref="#">Action</a></li>
<li><ahref="#">Anotheraction</a></li>
<li><ahref="#">Somethingelsehere</a></li>
<liclass="divider"></li>
<li><ahref="#">Separatedlink</a></li>
<liclass="divider"></li>
<li><ahref="#">Onemoreseparatedlink</a></li>
</ul>
</li>
</ul>
<formclass="navbarformnavbarright"role="search">
<divclass="formgroup">
<input type="text" class="formcontrol"
placeholder="Search">
</div>
<button type="submit" class="btn btn
default">Submit</button>
</form>
</div>
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 nuestra

barra de navegacin.
Veamos como se visualizara en el navegador:

TABLAS CON BOOTSTRAP

Estas se crean de igual manera como si no estuviramos usando bootstrap, aunque si

queremos que adopten otro estilo debemos modificar el atribulo class de la etiqueta que
define la tabla (etiqueta table), para esto utilizaremos la clase table, en el siguiente
ejemplo veremos una tabla pequea con el estilo de bootstrap:
<h1 class="text-center">Clase table</h1>
<table class="table">
<tr>
<th>Materia</th>
<th>Alumno</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
<tr>
<td>SIG135</td>
<td>Mnica Mariela</td>
<td>Daz Ruiz</td>
<td>8.7</td>
</tr>
<tr>

<td>PAM135</td>
<td>Claudia Angelica</td>
<td>Jordan Vasquez</td>
<td>7.8</td>
</tr>
<tr>
<td>FIR235</td>
<td>Maynor Gabriel</td>
<td>Lpez Jimnez</td>
<td>9.3</td>
</tr>
</table>
Este cdigo nos mostrara una tabla en el navegador as:

Ahora veamos que variaciones podemos ingresar a nuestras tablas.

table-striped
Esta clase es utilizada cuando queremos aadirle un efecto a rayas a nuestra tabla, esto
har que algunas filas de la tabla tengan un color mas oscuro en comparacin a las
dems, de hecho irn intercaladas, una clara, una oscura, clara, oscura, clara, oscura, y as
hasta terminar las filas de la tabla, esta clase debe ser aadida en el atributo class de la
definicin de la tabla:
<h1 class="text-center">Clase table-striped</h1>
<table class="table table-striped">
<tr>
<th>Materia</th>
<th>Alumno</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
<tr>
<td>SIG135</td>
<td>Mnica Mariela</td>
<td>Daz Ruiz</td>
<td>8.7</td>
</tr>
<tr>

<td>PAM135</td>
<td>Claudia Angelica</td>
<td>Jordan Vasquez</td>
<td>7.8</td>
</tr>
<tr>
<td>FIR235</td>
<td>Maynor Gabriel</td>
<td>Lpez Jimnez</td>
<td>9.3</td>
</tr>
</table>

table-bordered
Como su nombre en ingles nos indica esta clase permitira hacer visibles todos los bordes
de nuestra tabla, si nos hemos fijado las otras clases solo muestran divisiones
horizontales, con esta clase podremos ver tambien las verticales. Ejemplo:
<h1 class="text-center">Clase table-bordered</h1>
<table class="table table-bordered">
<tr>
<th>Materia</th>
<th>Alumno</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
<tr>
<td>SIG135</td>
<td>Mnica Mariela</td>
<td>Daz Ruiz</td>
<td>8.7</td>
</tr>
<tr>
<td>PAM135</td>
<td>Claudia Angelica</td>
<td>Jordan Vasquez</td>
<td>7.8</td>
</tr>
<tr>
<td>FIR235</td>

<td>Maynor Gabriel</td>
<td>Lpez Jimnez</td>
<td>9.3</td>
</tr>
</table>

table-hover
La palabra en esta clase talvez nos haga recordar cuando modificamos este atributo de los
enlaces, cuando usemos esta clase las filas de nuestra tabla se mostraran con un color
mas oscuro, pero solo mientras el puntero este sobre ellas. Veamos como se usa:
<h1 class="text-center">Clase table-hover</h1>
<table class="table table-hover">
<tr>
<th>Materia</th>
<th>Alumno</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
<tr>
<td>SIG135</td>
<td>Mnica Mariela</td>
<td>Daz Ruiz</td>
<td>8.7</td>
</tr>
<tr>
<td>PAM135</td>
<td>Claudia Angelica</td>
<td>Jordan Vasquez</td>
<td>7.8</td>
</tr>
<tr>
<td>FIR235</td>
<td>Maynor Gabriel</td>
<td>Lpez Jimnez</td>
<td>9.3</td>
</tr>
</table>

table-condensed
Muestra 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:
<h1 class="text-center">Clase table-condensed</h1>
<table class="table table-condensed">
<!--Es mas pequeo el espaciado vertical entre filas-->
<tr>
<th>Materia</th>
<th>Alumno</th>
<th>Apellido</th>
<th>Nota</th>
</tr>
<tr>
<td>SIG135</td>
<td>Mnica Mariela</td>
<td>Daz Ruiz</td>
<td>8.7</td>
</tr>
<tr>
<td>PAM135</td>
<td>Claudia Angelica</td>
<td>Jordan Vasquez</td>
<td>7.8</td>
</tr>
<tr>
<td>FIR235</td>
<td>Maynor Gabriel</td>
<td>Lpez Jimnez</td>
<td>9.3</td>

</tr>
</table>

Existen tambin modificadores dentro de las filas, que nos permiten darle cierto color a
las 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 siguiente
manera:
<trclass="danger">
Hasta el momento solo hemos utilizado ejemplos con un solo estilo de tabla, ahora los
combinaremos:
<h1 class="text-center">Clase table-hover + table-bordered + tableresponsive</h1>
<table class="table table-hover table-bordered table-responsive">
<tr>
<th>Clase</th>
<th>Descripcion</th>
</tr>
<tr class="active">
<td>active</td>
<td>Aplica el color de -hover- a una fila o celda</td>
</tr>
<tr class="success">
<td>sucess</td>
<td>Indica la realizacion exitosa o positiva de una accion</td>
</tr>
<tr class="info">
<td>info</td>
<td>Indica un informe neutral de cambio o accion</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>Indica una advertencia que podria requerir de atencion</td>

</tr>
<tr class="danger">
<td>danger</td>
<td>Indica una accion peligrosa o potencialmente negativa</td>
</tr>
</table>