Documentos de Académico
Documentos de Profesional
Documentos de Cultura
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/
Para empezar a trabajar con este framework primero debemos descargar los archivos
necesarios, esto lo haremos desde la pagina oficial: http://getbootstrap.com/
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:
<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
<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:
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>