Bootstrap - Grilla

1. CONCEPTOS

Containers: Son los componentes más básico que ofrece el Framework, y son requeridos cuando se usa la grilla de bootstrap. El ancho de este contenedor es variable, dependiendo de la resolución del dispositivo. Para dispositivos móviles, el ancho ocupa toda la pantalla, mientras que para dispositivos con pantallas mas grandes, tiene unas margenes laterales.

conteiner-fluid: Ocupa todo el ancho de la pantalla, sin importar la resolución del dispositivo donde lo estemos viendo.

2. GRILLA

row : Son elementos div con la clase .row que se deben incluir en un contendor, cada fila tiene como máximo 12 columnas.

col: Son elementos div con la clase .col que se deben incluir en un elemento .row. Cuando no se especifica el ancho de una columna, estas se distribuyen de manera uniforme el ancho de la ventana del navegador.

Cambiar el tamaño de las columnas:

A la clase col se le agrega un guión medio seguido de un número, el cual va representar el número de columnas a ocupara para establecer su ancho.

Ejemplo:

Se tienen dos columnas, pero se require que el ancho de una ocupe 9 de las 12 columnas que permite la grilla de bootstrap, y la otra solamente 3:

Si las suma del ancho de los elementos que conforman las columnas de la filas, supera el ancho de las 12 columnas, bootstrap crea otra una nueva fila.

También se puede determinar que las columnas ocupen determinado ancho, en función de las resoluciones de las panatallas donde se visualizan.

<divclass="container"><divclass="row"><divclass="col-9"> 1 </div><divclass="col-3"> 2 </div></div></div>

<br>

**Ejemplo:** Se tienen dos columnas, se require que el ancho de una, ocupe 3 cuando se visualiza en una pantalla grande, mientras que la segunda ocupe un ancho de 9. Sin emabargo, cuando las pantallas no son grandes, ambas columnas debes ocupar 12 espacios. ```html

enla siguiente tabla se visualiza las clases de las columnas que existe, y se relacionan con las resoluciones a las que actuan: ![Clases de columnas](img/01_Column_size.png "title") ## ENLACES: + [Contenedores deBootstrap](https://getbootstrap.com/docs/4.3/layout/overview/) # BOOTSTRAP ## 1. CONCEPTOS 1. **Containers:** Son los componentes más básico que ofrece el Framework, y son requeridos cuando se usa la grilla debootstrap. El ancho de este contenedor es variable, dependiendo dela resolución del dispositivo. Para dispositivos móviles, el ancho ocupa toda la pantalla, mientras que para dispositivos con pantallas mas grandes, tiene unas margenes laterales. 2. **conteiner-fluid:** Ocupa todo el ancho dela pantalla, sin importar la resolución del dispositivo donde lo estemos viendo. ## 2. GRILLA 1. **row :** Son elementos ```div``` con la clase ```.row``` quese deben incluir en un contendor, cada fila tiene como máximo 12 columnas. 2. **col:** Son elementos ```div``` con la clase ```.col``` quese deben incluir en un elemento ```.row```. Cuando nose especifica el ancho de una columna, estas se distribuyen de manera uniforme el ancho dela ventana del navegador. + **Cambiar el tamaño de las columnas:** A la clase ```col``` se le agrega un guión medio seguido de un número, el cual va representar el número de columnas a ocupara para establecer su ancho. **Ejemplo:**Se tienen dos columnas, pero se require que el ancho de una ocupe 9 de las 12 columnas que permite la grilla debootstrap, y la otra solamente 3: Si las suma del ancho de los elementos que conforman las columnas dela filas, supera el ancho de las 12 columnas, bootstrap crea otra una nueva fila. Tambiénse puede determinar que las columnas ocupen determinado ancho, en funciónde las resoluciones de las panatallas donde se visualizan. ```html <div class="container"> <div class="row"> <div class="col-9"> 1 </div> <div class="col-3"> 2 </div> </div> </div> ``` <br> **Ejemplo:**Se tienen dos columnas, se require que el ancho de una, ocupe 3 cuando se visualiza en una pantalla grande, mientras quela segunda ocupe un ancho de 9. Sin emabargo, cuando las pantallas no son grandes, ambas columnas debes ocupar 12 espacios. ```html <div class="container"> <div class="row"> <div class="col-12 col-lg-3"> 1 </div> <div class="col-12 col-lg-9"> 2 </div> </div> </div>

en la siguiente tabla se visualiza las clases de las columnas que existe, y se relacionan con las resoluciones a las que actuan: