Bootstrap - Sistema de cuadrícula
En este capítulo discutiremos el sistema Bootstrap Grid.
¿Qué es una cuadrícula?
Según lo expresado por wikepedia:
En diseño gráfico, una cuadrícula es una estructura (generalmente bidimensional) formada por una serie de líneas rectas (verticales, horizontales) que se cruzan y que se utilizan para estructurar el contenido. Se utiliza ampliamente para diseñar el diseño y la estructura del contenido en el diseño de impresión. En diseño web, es un método muy eficaz para crear un diseño coherente de forma rápida y eficaz utilizando HTML y CSS.
En pocas palabras, las cuadrículas en el diseño web organizan y estructuran el contenido, hacen que los sitios web sean fáciles de escanear y reducen la carga cognitiva de los usuarios.
¿Qué es Bootstrap Grid System?
Como lo indica la documentación oficial de Bootstrap para el sistema de cuadrícula:
Bootstrap incluye un primer sistema de cuadrícula de fluidos móvil y receptivo que escala adecuadamente hasta 12 columnas a medida que aumenta el tamaño del dispositivo o la ventana gráfica. Incluye clases predefinidas para opciones de diseño fáciles, así como potentes mixins para generar diseños más semánticos.
Entendamos la declaración anterior. Bootstrap 3 es móvil primero en el sentido de que el código para Bootstrap ahora comienza apuntando a pantallas más pequeñas como dispositivos móviles, tabletas y luego "expande" componentes y cuadrículas para pantallas más grandes como computadoras portátiles, computadoras de escritorio.
Estrategia móvil primero
Content
- Determina qué es lo más importante.
Layout
- Diseñe primero con anchos más pequeños.
- El dispositivo móvil de dirección CSS base primero; Dirección de consultas de medios para tabletas, computadoras de escritorio.
Progressive Enhancement
- Agregue elementos a medida que aumenta el tamaño de la pantalla.
Funcionamiento del sistema Bootstrap Grid
Los sistemas de cuadrícula se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan su contenido. Así es como funciona el sistema de cuadrícula Bootstrap:
Las filas deben colocarse dentro de un .container class para una alineación y un relleno adecuados.
Utilice filas para crear grupos horizontales de columnas.
El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.
Clases de cuadrícula predefinidas como .row and .col-xs-4están disponibles para realizar rápidamente diseños de cuadrícula. LESS mixins también se pueden utilizar para diseños más semánticos.
Las columnas crean medianiles (espacios entre el contenido de la columna) mediante el relleno. Ese relleno se compensa en filas para la primera y la última columna mediante un margen negativo en.rows.
Las columnas de la cuadrícula se crean especificando el número de doce columnas disponibles que desea abarcar. Por ejemplo, tres columnas iguales usarían tres.col-xs-4.
Preguntas de los medios
La consulta de medios es un término muy elegante para "regla CSS condicional". Simplemente aplica algo de CSS, basado en ciertas condiciones establecidas. Si se cumplen esas condiciones, se aplica el estilo.
Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido según el tamaño de la ventana gráfica. Las siguientes consultas de medios se utilizan en archivos LESS para crear los puntos de interrupción clave en el sistema de cuadrícula Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }Ocasionalmente, estos se amplían para incluir un max-width para limitar CSS a un conjunto más reducido de dispositivos.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }Las consultas de medios tienen dos partes, una especificación de dispositivo y luego una regla de tamaño. En el caso anterior, se establece la siguiente regla:
Consideremos esta línea:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }Para todos los dispositivos, sin importar el tipo con ancho mínimo: @ screen-sm-min si el ancho de la pantalla es menor que @ screen-sm-max , entonces haga algo .
Opciones de cuadrícula
La siguiente tabla resume aspectos de cómo funciona el sistema de cuadrícula Bootstrap en múltiples dispositivos:
| Dispositivos extra pequeños Teléfonos (<768px) | Pequeños dispositivos Tablets (≥768px) | Dispositivos medianos Computadoras de escritorio (≥992px) | Dispositivos grandes Computadoras de escritorio (≥1200px) | |
|---|---|---|---|---|
| Comportamiento de la cuadrícula | Horizontal en todo momento | Contraído al inicio, horizontal sobre los puntos de interrupción | Contraído al inicio, horizontal sobre los puntos de interrupción | Contraído al inicio, horizontal sobre los puntos de interrupción |
| Ancho máximo del contenedor | Ninguno (automático) | 750px | 970 px | 1170 px |
| Prefijo de clase | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # de columnas | 12 | 12 | 12 | 12 |
| Ancho máximo de columna | Auto | 60px | 78px | 95px |
| Ancho de canal | 30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
30px (15px a cada lado de una columna) |
| Encajable | si | si | si | si |
| Compensaciones | si | si | si | si |
| Orden de columnas | si | si | si | si |
Estructura de cuadrícula básica
A continuación se muestra la estructura básica de la cuadrícula Bootstrap:
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>Veamos algunos ejemplos de cuadrículas simples:
Se restablece la columna receptiva
Con los cuatro niveles de cuadrículas disponibles, es probable que se encuentre con problemas en los que, en ciertos puntos de interrupción, las columnas no se borran del todo bien ya que una es más alta que la otra. Para arreglar eso, use una combinación de una clase.clearfixy las clases de utilidad receptivas como se muestra en el siguiente ejemplo:
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>Esto producirá el siguiente resultado:
Cambie el tamaño de su ventana gráfica o compruébelo en su teléfono para obtener el resultado deseado de este ejemplo.
Columnas compensadas
Las compensaciones son una característica útil para diseños más especializados. Se pueden usar para empujar las columnas para obtener más espacio (por ejemplo). los.col-xs = * las clases no admiten compensaciones, pero se replican fácilmente utilizando una celda vacía.
Para usar compensaciones en pantallas grandes, use el .col-md-offset-*clases. Estas clases aumentan el margen izquierdo de una columna en* columnas donde * intervalo de 1 a 11.
En el siguiente ejemplo, tenemos <div class = "col-md-6"> .. </div>, centraremos esto usando class .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>Esto producirá el siguiente resultado:
Columnas anidadas
Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .row y conjunto de .col-md-* columnas dentro de un existente .col-md-*columna. Las filas anidadas deben incluir un conjunto de columnas que sumen 12.
En el siguiente ejemplo, el diseño tiene dos columnas, y la segunda se divide en cuatro cuadros en dos filas.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>Esto producirá el siguiente resultado:
Orden de columnas
Otra buena característica del sistema de cuadrícula Bootstrap es que puede escribir fácilmente las columnas en un orden y mostrarlas en otro. Puede cambiar fácilmente el orden de las columnas de la cuadrícula incorporadas con.col-md-push-* y .col-md-pull-* clases modificadoras donde * intervalo de 1 a 11.
En el siguiente ejemplo, tenemos un diseño de dos columnas, siendo la columna de la izquierda la más estrecha y actuando como barra lateral. Intercambiaremos el orden de estas columnas usando.col-md-push-* y .col-md-pull-* clases.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>Esto producirá el siguiente resultado: