Sistema de cuadricula.

En Bootstrap, el sistema de cuadrícula es útil para crear diseños rápidos de páginas web que respondan a los diferentes dispositivos según el tamaño de las pantallas.

El sistema de cuadrícula de arranque utilizará una serie de contenedores , filas y columnas para definir el diseño y alinear el contenido de forma adecuada según el dispositivo. En el sistema de cuadrícula, puede agregar hasta 12 columnas y tantas filas como desee, y las columnas se reorganizarán automáticamente según el tamaño de la pantalla del dispositivo.

Usando un sistema de cuadrícula bootstrap, podemos crear un diseño de página web responsivo definiendo las 12 columnas individualmente o agrupando las columnas para crear columnas más anchas.

Clases de Cuadricula de Bootstrap

Bootstrap ha incluido cinco clases de cuadrícula predefinidas para escalar el contenido según el dispositivo o el tamaño de la ventana gráfica.

.col-*
.col-sm-*
.col-md-*
.col-lg-*
.col-xl-*

Clase	Tipo de dispositivo	Ancho
.columna-*	Extra Pequeño	<576 píxeles
.col-sm-*	Pequeño	≥576 píxeles
.col-md-*	Medio	≥768 píxeles
.col-lg-*	Grande	≥992 píxeles
.col-xl-*	Extra grande	≥1200 píxeles

Para crear diseños de páginas web responsivas utilizando un sistema de cuadrícula bootstrap, necesitamos usar filas y columnas dentro del contenedor o contenedor-fluido como se muestra a continuación.



<div class="contenedor">
    <div class="fila">
      <div class="col-*-*"></div>
      <div class="col- * - * "></div>
      <div class=" col - * - * "> </div>
    </div>
  </div>

Si observa el código anterior, creamos un diseño de cuadrícula especificando las filas y columnas dentro de .container. Aquí, la primera estrella ( *) indicará la capacidad de respuesta, y debe ser sm, md, lg o xl. La segunda estrella ( *) indicará un número, y debe ser de 1 a 12 para cada fila.
Cada vez que creamos un diseño de cuadrícula, necesitamos colocar el contenido dentro de las columnas ( .colo .col--) y esas columnas deben ser hijas de filas ( .row) y esas filas deben colocarse dentro de un contenedor ( .containero .container-fluid).
En el sistema de cuadrícula de Bootstrap, podemos agregar hasta 12 columnas dentro de una fila. Si agregamos más de 12 columnas dentro de una fila, esas columnas adicionales se colocarán en una nueva línea.

Diseño de cuadrícula Bootstrap con tres columnas adaptables

A continuación se muestra un ejemplo de creación de un diseño adaptable con tres columnas para admitir los dispositivos cuyo ancho de pantalla es superior a 576 px en bootstrap.



<div clase ="contenedor">
    <div clase ="fila">
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
    </div>
    <div clase ="fila" >
       <div clase ="col-sm-2"> col-sm-2 </div>
       <div clase ="col-sm-4"> col-sm-4 </div>
       <div clase ="col-sm-6"> col-sm-6 </div>
    </div>

    <div clase ="fila" >
       <div clase ="col-sm-2"> col-sm-2 </div>
       <div clase ="col-sm-5"> col-sm-5 </div>
       <div clase ="col-sm-5"> col-sm-5 </div> 
    </div>
 </div>

El ejemplo de Bootstrap anterior creará un diseño con tres columnas para admitir los dispositivos cuyo ancho de pantalla sea superior a 576 px en Bootstrap. Las tres columnas definidas se ajustarán automáticamente una sobre otra en dispositivos móviles o pantallas que tengan un ancho inferior a 576 px .

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Diseño de cuadrícula de Bootstrap con columnas automáticas.

En bootstrap, podemos crear columnas de ancho igual o automático para todos los dispositivos, como extra pequeño, pequeño, mediano, grande y extra grande, especificando solo .colla clase sin ningún número de columna.

El sistema de cuadrícula de arranque ajustará automáticamente las columnas definidas con .colla clase en función del ancho de la pantalla del dispositivo.

El siguiente ejemplo mostrará cómo crear columnas de igual ancho para admitir todos los dispositivos en bootstrap.



  <div class ="contenedor">
    <div class ="fila">
       <div class ="col"> columna 1 </div>
       <div class ="col"> columna 2 </div>
       <div class ="col"> columna 3 </div>
    </div>
    <div class ="fila">
       <div class ="col"> columna 1 </div>
       <div class ="col"> columna 2 </div>
    </div>
    <div class ="fila">
       <div class ="col"> columna 1 </div>
    </div>
</div>

Si observa el ejemplo anterior, creamos columnas solo con la clase .col. Por lo tanto, el sistema de cuadrícula de Bootstrap ajustará el tamaño de las columnas de manera uniforme según el tamaño de la pantalla del dispositivo.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Diseño de cuadrícula de Bootstrap con columnas de ancho variable

En Bootstrap, al usar col-{breakpoint}-auto clases, podemos crear columnas de ancho variable para redimensionarlas según el ancho de su contenido.

A continuación se muestra un ejemplo de creación de columnas de ancho variable para redimensionarlas según el ancho del contenido en bootstrap.



<div class ="container">
   <div class ="row" >
      <div class ="col-sm-5" > col 1 </div >
      <div class ="col-md-auto" > Contenido de columna de ancho variable </div >
      <div class ="col-sm-3" > col 2 </div >
   </div >
   <div class ="row" >
      <div class ="col" > col 1 </div >
      <div class ="col" > col 2 </div >
      <div class ="col-md-auto"> Contenido de columna de ancho variable </div >
   </div>
</div>

Si observa el ejemplo anterior, creamos columnas de ancho variable especificando col-md-autola clase y esas columnas se ajustarán automáticamente en función del ancho del contenido.

Cuando ejecutamos el ejemplo de arranque anterior, devolverá el resultado que se muestra a continuación.

Si observa el resultado anterior, la parte de color gris está vacía debido al ancho de las columnas ajustado según el contenido y el tamaño definido.

Diseño de cuadrícula de Bootstrap con diferentes tamaños de columnas

Creamos un diseño de cuadrícula específico para los dispositivos en particular, es decir, extra pequeño, pequeño, grande o extra grande. En Bootstrap, podemos crear diseños más flexibles combinando los distintos tamaños de columna para cambiar la orientación de las columnas en función del tamaño del dispositivo.

Por ejemplo, las pantallas pequeñas necesitan tener una columna en cada fila, mientras que las pantallas más grandes pueden contener más de una columna en cada fila, de modo que se puede establecer un tamaño de columna más pequeño, pero múltiples columnas en cada fila. Para entender a qué me refiero, veremos un ejemplo.

A continuación se muestra un ejemplo de creación del diseño de cuadrícula de arranque mezclando diferentes tamaños de columna para los tamaños de dispositivo.



<div class ="contenedor">
   <div class ="fila ">
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 1 </div>
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 2 </div>
      <div class ="col-lg-4 col-md-4 col-sm-6 col-xs-12"> Área de contenido 3 </div>
   </div>
</div>

El ejemplo anterior mostrará una fila con 3 columnas en pantallas grandes y medianas. En pantallas pequeñas, mostrará una fila con 2 columnas y otra fila más con otra columna en la mitad de la pantalla. En pantallas extra pequeñas, como las de los teléfonos inteligentes, veremos 3 filas y cada una tendrá una columna a pantalla completa.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Así es como podemos crear diseños de cuadrícula más flexibles combinando múltiples tamaños de columnas para cambiar la orientación de las columnas en función del tamaño del dispositivo en Bootstrap.

Desplazamiento de columnas en el diseño de cuadrícula de Bootstrap

En el diseño de cuadrícula de Bootstrap, podemos mover columnas hacia la derecha mediante el uso de .offset-*clases de cuadrícula. Para desplazar una columna, debe agregar offset-*un sufijo a su clase de columna existente. Por ejemplo, si su clase de columna es , .col-md-4puede desplazar la columna con la clase .offset-md-4. El número después del desplazamiento simboliza cuántas columnas se agregarán como margen.

A continuación se muestra un ejemplo de cómo compensar las columnas de la cuadrícula utilizando .offset-*clases en bootstrap.




  <div clase="contenedor">
    <div clase="fila">
      <div clase="col-md-4"> .col-md-4 < /div>
          <div clase="col-md-4 offset-md-4"> .col-md-4 .offset-md-4 </div>
      </div>
      <div clase="fila">
        <div clase="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
        <div clase="col-md-3 offset-md-3"> .col-md-3 .offset-md-3 </div>
      </div>
      <div clase="fila">
        <div clase="col-md-6 offset-md-3"> .col-md-6 .offset-md-3 </div>
      </div>
    </div>

Si observa el ejemplo anterior, estamos aumentando el margen izquierdo de una columna en 4 y 3 columnas mediante el uso de las clases offset-md-4y offset-md-3.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Reordenamiento de columnas en el diseño de cuadrícula de Bootstrap

En el sistema de cuadrícula de bootstrap, podemos reordenar la apariencia de las columnas de la cuadrícula mediante el uso .order-*de clases sin cambiar su orden real en un diseño de cuadrícula.

En el diseño de cuadrícula, el orden de las columnas de la cuadrícula variará según los números de orden definidos. Por ejemplo, las columnas de la cuadrícula con un orden inferior (por ejemplo, .col, .order-1) o sin clases de orden aparecerán primero, y las columnas con números de orden superior aparecerán después de las columnas con números de orden inferior. El sistema de cuadrícula admitirá el orden de las columnas del 1 al 12 en los cinco niveles de la cuadrícula.

A continuación se muestra un ejemplo de cómo cambiar la apariencia de las columnas de la cuadrícula especificando el número de orden en bootstrap.



<div class ="contenedor" >
   <div class ="fila" >
      <div class ="col order-10" > Primero </div>
      <div class ="col order-4" > Segundo </div>
      <div class ="col" > Tercero </div >
   </div>
</div>

Si observa el ejemplo anterior, estamos cambiando el orden de las columnas especificando los números de orden ( order-10, order-4) y para la tercera columna, no especificamos ninguna clase de orden.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Si observa el resultado anterior, la apariencia de las columnas de la cuadrícula cambió según el número de orden de las columnas. La tercera columna apareció primero porque no especificamos ninguna clase de orden, por lo que se considerará la más baja.

También podemos cambiar el orden de las columnas del diseño de la cuadrícula utilizando las clases .order-firsty .order-lastcomo se muestra a continuación.



<div class ="contenedor" >
   <div class ="fila" >
      <div class ="col order-last" > Primero </div>
      <div class ="col order-first" > Segundo </div>
      <div class ="col" > Tercero </div>
   </div >
</div >

Si observa el ejemplo anterior, estamos intentando cambiar la apariencia de la columna mediante el uso de las clases .order-firsty .order-last.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Si observa el resultado anterior, la segunda columna apareció primero debido a la asignación de la .order-firstclase y la primera columna se movió al último debido a la .order-lastclase.

Columnas anidadas en cuadrícula de Bootstrap

Anidar columnas significa que puedes agregar columnas dentro de otra columna. Puedes insertar hasta 12 columnas dentro de otra columna sin tener que usar necesariamente las 12 columnas. Para ello, debes agregar una nueva fila ( .row) y un conjunto de .col-md-columnas dentro de una columna existente .col-md-.

A continuación se muestra un ejemplo de cómo anidar las columnas de la cuadrícula dentro de otra columna en el diseño de la cuadrícula de bootstrap.



  <div class="container">
    <div class="row">
      <div class="col-sm-9"> Primera columna
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Columna 1 dentro de la primera columna
          </div>
          <div class="col-xs-4 col-sm-6">
            Columna 2 dentro de la primera columna
          </div>
        </div>
      </div>
      <div class="col"> Segunda columna </div>
    </div>
  </div>

Si observa el ejemplo anterior, creamos columnas de cuadrícula anidadas agregando una nueva fila ( .row) y un conjunto de columnas dentro de una .col-sm-9columna existente.

Cuando ejecutamos el ejemplo de arranque anterior, obtendremos el resultado que se muestra a continuación.

Así es como podemos crear columnas anidadas en el diseño de la cuadrícula de Bootstrap según nuestros requisitos.

Ajuste de columnas de la cuadrícula Bootstrap

Bootstrap está diseñado para 12 columnas por fila. Si utiliza más de 12 columnas en una fila, las columnas adicionales se colocarán en una nueva línea como una unidad.

A continuación se muestra un ejemplo de creación de un diseño de cuadrícula de arranque con más de 12 columnas por fila para lograr el ajuste de columnas.



<div class ="container">
    <div class ="row">
        <div class ="col-sm-9" > Primera columna < /div >
        <div class ="col-sm-4" > Segunda columna < /div >
        <div class ="col-sm-8" > Tercera columna < /div >
    </div>
</div>

Si observa el ejemplo anterior, la primera columna tiene un ancho de 9 columnas y la segunda tiene 4 (9 + 4 = 13) , por lo que las columnas no pueden estar en una fila y las columnas adicionales se ajustarán en una nueva línea.

Cuando ejecutamos el ejemplo anterior, obtendremos el resultado que se muestra a continuación.