Tutorial básico Bootstrap 4 - keblato/TutorialesTalleres-Angular GitHub Wiki

Bootstrap 4

Bootstrap 4 es un framework de código abierto que es desarrollado por un equipo de desarrolladores de Twitter. Sirve para construir componentes de interfaz usuario a partir de HTML, CSS y Javascript. Está pensado para que las aplicaciones sean responsives y para que 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, etc.

También define una cuadrícula o grilla (grid) para facilitar la ubicación de los elementos en una página. Veremos entonces:

El Sistema de Grilla de Bootstrap
Uso de los Estilos Bootstrap

El Sistema de Grilla de Bootstrap

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:

Grid Bootstrap

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".

<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>

El alto de la fila se ajustará a lo que definamos dentro. EN ele siguiente ejemplo, solo definimos dos columnas cada una contiene la misma imagen. Note que el estilo de la imagen es class="img-fluid" lo que 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>

Si quieres profundizar respecto a maquetación css

Uso de los Estilos Bootstrap

En el siguiente ejemplo tenemos una página html sin ninguna definición de estilos. Por favor copie el código en stackblitz para ver la página:

<!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>

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:

Sin estilos Ahora, reemplazamos el tag head para agregar los estilos definidos en bootstrap, por:

<head>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
</head>

La página cambia porque los estilos de "table, input-mini", etc. están en la librería de bootstrap que agregamos y ahora luce de la siguiente forma:

Con estilos Bootstrap

Finalmente, agregamos más estilos de Bootstrap a la tabla, 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: