Bootstrap
ISIS2603 Desarrollo de Software en Equipos. Uniandes. 2019
Consulte la documentación en el sitio oficial de Bootstrap.
Bootstrap es un framework de código abierto para construir sitios web y aplicaciones web adaptativas (responsives) a partir de HTML, CSS y Javascript. Adaptativas significa que los elementos que se despliegan en la página se ajustarán a distintos tamaños de dispositivos. El objetivo es que las aplicaciones se vean bien en cualquier dispositivo, en especial en los teléfonos. Bootstrap contiene una serie de estilos predefinidos para ser utilizados con los elementos básicos de HTML como los botones, tablas, formularios, barras de navegación y también componentes de interfaz más avanzados como calendarios, galerías, mapas, entre otros.
Este framework de código abierto fue desarrollado por un pequeño equipo en twitter. Más sobre la historia de Boostrap en este enlace.
El sistema de grilla de Bootstrap permite organizar las zonas de la pantalla y ubicar los elementos en ellas. La grilla se compone de contenedores, filas y columnas. Todos los elementos tienen definidos estilos que hacen la grilla completamente adaptativa. La grilla Bootstrap ha sido implementada utilizando [flexbox]([https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox].
Los contenedores (containers) son los elementos básicos de Bootstrap para organizar el diseño/maqueta (layout) de la página. Como su nombre lo indica, el contenedor contiene otros elementos. A todos estos elementos se les puede definir propiedades y estilos comunes, como por ejemplo, el que se ajusten al tamaño de la pantalla donde se está mostrando la página.
Para definir un contenedor, podemos crear un elemento div, que en sí mismo no tiene un efecto visual, pero al que le definimos un estilo .container o .container-fluid:
<div class="container-fluid">
...
</div>
Los containers son obligatorios en Bootstrap cuando se usa el sistema de grilla. Una grilla en bootstrap se puede pensar como una cuadrícula de máximo 12 columnas y tantas filas como uno quiera. En la siguiente figura vemos distintas configuraciones de filas utilizando las 12 columnas:
 |
|---|
| Figura 1: Ejemplos de Grilla Bootstrap con columnas de igual tamaño |
El código de la primera fila es el siguiente: primero define el "container-fluid", luego la fila "row" y luego las 12 columnas "col". Note que tanto "container-fluid" como "row" o "col", no son marcas del html sino valores de estilos CSS definidos en Bootstrap. Estamos utilizando el color del background solo para que sea claro el efecto de la grilla.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col" style="background-color:lightblue;">1</div>
<div class="col" style="background-color:orange;">2</div>
<div class="col" style="background-color:lightblue;">3</div>
<div class="col" style="background-color:orange;">4</div>
<div class="col" style="background-color:lightblue;">5</div>
<div class="col" style="background-color:orange;">6</div>
<div class="col" style="background-color:lightblue;">7</div>
<div class="col" style="background-color:orange;">8</div>
<div class="col" style="background-color:lightblue;">9</div>
<div class="col" style="background-color:orange;">10</div>
<div class="col" style="background-color:lightblue;">11</div>
<div class="col" style="background-color:orange;">12</div>
</div>
<br>
...
</div>
</body>
</html>
 Ejercicio: |
Practicar la grilla. |
|---|---|
| Copie el código anterior en VS observe el comportamiento de la grilla |
Si queremos que las columnas sean del mismo tamaño, es suficiente definir el estilo class="col".
El alto de la fila se ajustará a lo que definamos dentro. En el siguiente ejemplo solo definimos dos columnas, en la que cada una contiene la misma imagen. Note que el estilo de la imagen es class="img-fluid". El estilo img-fluid que hace parte de Bootstrap, hará que la imagen se adapte al tamaño de la pantalla donde se está haciendo el despliegue.
<div class="container-fluid">
<div class="row">
<div class="col" ><img src="https://www.dzoom.org.es/wp-content/uploads/2017/07/seebensee-2384369-810x540.jpg" class="img-fluid" alt="Responsive image"></div>
<div class="col" ><img src="https://www.dzoom.org.es/wp-content/uploads/2017/07/seebensee-2384369-810x540.jpg" class="img-fluid" alt="Responsive image"></div>
</div>
...
</div>
 |
|---|
| Figura 2: Una grilla de dos columnas iguales con la misma imagen |
Note que si agranda o disminuye el tamaño de esta página, las imágenes se modifican de acuerdo con el nuevo tamaño.
Si queremos utilizar columnas de distintos tamaños debemos indicarlo en el estilo de la columna. Teniendo que sean máximo 12 columnas, se indica el tamaño variable contando el número de espacios (de los 12) que se quiere que ocupe cada columna. Por ejemplo:
 |
|---|
| Figura 3: Grilla con columnas de distinto tamaño |
La segunda fila de la figura 3 tiene tres columnas de tamaños distintos. La columna de la mitad ocupa 10 espacios de los 12 máximos. El código, para la segunda fila, es el siguiente:
<div class="row">
<div class="col" style="background-color:yellow;">1 </div>
<div class="col-10" style="background-color:lightgreen;">2</div>
<div class="col" style="background-color:yellow;">3</div>
</div>
En el siguiente ejemplo tenemos una página html sin ninguna definición de estilos.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<h2>Shopping Cart Example</h2>
<table class="table">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr >
<td>
<input type="text " class="input-small">
</td>
<td>
<input type="number " class="input-mini">
</td>
<td>
<input type="number " class="input-mini">
</td>
<td></td>
<td><button onclick=" ">delete</button></td>
</tr>
<tr>
<td>
<button onclick=" ">add item</button>
</td>
<td></td>
<td>Total:</td>
<td></td>
</tr>
<tbody>
</table>
</div>
</body>
</html>|
Ejercicio: |
Más estilos Bootstrap |
|---|---|
| Copie el código para ver el despliegue del shopping cart. |
En el código anterior podemos notar que hacemos uso de los estilos class="table", class="input-small", class="input-mini". Sin embargo, estos no tienen ningún efecto porque no están definidos. La página que obtenemos luce de la siguiente forma:
Ahora, modificamos el tag head para agregar los estilos definidos en bootstrap, por:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
La página cambia porque los estilos "table", input-mini", y demás, están en la librería de Bootstrap que agregamos y ahora luce de la siguiente forma:
Finalmente, agregamos más estilos de Bootstrap a los botones de agregar y eliminar ítem, así:
Para agregar estilo de botón success y danger:
<tr>
<td>
<button class="btn btn-danger"onclick=" ">delete</button>
</td>
</tr>
<tr>
<td>
<button class="btn btn-success" onclick=" ">add item</button>
</td>
</tr>Para adicionar un estilo oscuro al encabezado de la tabla
<table class="table">
<thead class="thead-dark">
...
</thead>
...
</table>Ahora la página luce así:
Este libro fue creado para el curso ISIS2603 Desarrollo de Software en Equipos en la Universidad de los Andes. © Desarrollado por Rubby Casallas con la colaboración de César Forero, Kelly Garcés, Jaime Chavarriaga y José Bocanegra. Universidad de los Andes, Bogotá, Colombia. 2021.