Sistema de rejilla Bootstrap

¿Qué es la rejilla (Grid)?

Extraído de Wikipedia:

En el diseño gráfico, la rejilla es una estructura formada por una serie de líneas rectas intersectantes (verticales, horizontales) utilizadas para organizar el contenido (generalmente bidimensional). Se utiliza ampliamente en el diseño de impresión para la disposición y estructura del contenido. En el diseño web, es un método para crear rápidamente una disposición coherente y usar eficientemente HTML y CSS.

En términos simples, la rejilla en el diseño web se utiliza para organizar el contenido, hacer que el sitio sea fácil de navegar y reducir la carga en el usuario.

¿Qué es el sistema de rejilla de Bootstrap (Grid System)?

La descripción del sistema de rejilla en el documento oficial de Bootstrap:

Bootstrap incluye un sistema de rejilla responsivo, de prioridad para dispositivos móviles y flexible, que se expande adecuadamente a 12 columnas. Incluye clases predefinidas para opciones de disposición simples, así como clases mezcladas potentes para generar más disposiciones semánticas.

Vamos a entender la declaración anterior. Bootstrap 3 es de prioridad para dispositivos móviles, en este sentido, el código de Bootstrap comienza con dispositivos de pantalla pequeña (como dispositivos móviles, tabletas) y luego se expande a componentes y rejillas en dispositivos de pantalla grande (como laptops, computadoras de escritorio).

Estrategia de prioridad para dispositivos móviles

• Contenido

• determina lo que es más importante.

• Disposición

• Diseño prioritario de menor ancho.

• El CSS básico es prioridad para dispositivos móviles, las consultas de medios son para tabletas y computadoras de escritorio.

• Mejora progresiva

• al aumentar el tamaño de la pantalla.

El sistema de rejilla responsiva se divide automáticamente en un máximo de12columnas.

El principio de funcionamiento del sistema de rejilla de Bootstrap (Grid System)

El sistema de rejilla crea una disposición de página mediante una serie de filas y columnas que contienen contenido. A continuación, se muestra cómo funciona el sistema de rejilla de Bootstrap:

• Las filas deben colocarse en .container dentro de la clase, para obtener alineación (alineación) y relleno interno (padding) adecuados.

• Usar filas para crear grupos horizontales de columnas.

• El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser elementos hijos directos de una fila.

• Clases de rejilla predefinidas, como .row y .col-xs-4，lo que permite crear rápidamente una disposición en rejilla. Las clases mezcladas de LESS son útiles para más disposiciones semánticas.

• Las columnas crean espacio entre el contenido mediante el relleno (padding) interno. Este relleno es definido por .rows El margen (margen) superior negativo indica el desplazamiento de las filas en la primera y última columna.

• El sistema de rejilla se crea especificando las doce columnas disponibles que desea cruzar. Por ejemplo, para crear tres columnas iguales, se utilizan tres .col-xs-4.

Consultas de medios

Las consultas de medios son un estilo muy elegante de "reglas CSS condicionales". Solo se aplican a ciertas CSS basadas en ciertas condiciones específicas. Si se cumplen esas condiciones, se aplica el estilo correspondiente.

Las consultas de medios en Bootstrap le permiten mover, mostrar y ocultar contenido basándose en el tamaño del viewport. Las siguientes consultas de medios se utilizan en el archivo LESS, para crear los puntos de ruptura críticos del sistema de rejilla de Bootstrap.

/*　Dispositivo ultrapequeño (teléfono, menor que　768(px)　*/
/*　Bootstrap no tiene consultas de medios por defecto　*/
/*　Dispositivo pequeño (tableta,768px a partir de)　*/
@media (min-width: @screen-sm-@media (min
/*　Dispositivo mediano (computadora de escritorio,992px a partir de)　*/
@media (min-width: @screen-md-@media (min
/*　Dispositivo grande (grande computadora de escritorio,1200px a partir de)　*/
@media (min-width: @screen-lg-@media (min

A veces también incluimos max-widthlimitando el impacto de CSS a un rango más pequeño de tamaños de pantalla.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) y (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) y (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-@media (min

Las consultas de medios tienen dos partes, primero una especificación de dispositivo, y luego una regla de tamaño. En el caso anterior, se establecieron las siguientes reglas:

Vamos a ver la siguiente línea de código:

@media (min-width: @screen-sm-min) y (max-width: @screen-sm-max) { ... }

Para todos los que tienen min-width: @screen-sm-min del dispositivo, si el ancho de la pantalla es menor que @screen-sm-maxse llevarán a cabo algunos procesos.

Opciones de rejilla

A continuación se resume cómo funciona el sistema de rejilla de Bootstrap a través de varios dispositivos:

Estructura básica de la rejilla

A continuación se muestra la estructura básica de la rejilla de Bootstrap:

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>.../div>
</div>
<div>....

Vamos a ver algunos ejemplos simples de rejilla:

• Ejemplo: horizontal apilado

• Ejemplo: dispositivos medianos y grandes

• Ejemplo: teléfono móvil, tableta, computadora de escritorio

restablecimiento de columnas responsivas

A continuación se incluyen algunos ejemplos:4una rejilla, pero cuando navegamos en dispositivos pequeños no podemos determinar la posición de visualización de la rejilla.

Para resolver este problema, se puede usar .clearfix clases y herramientas útiles responsivaspara resolver, como se muestra en el siguiente ejemplo:

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Ejemplo Bootstrap　-　ajustes de columna responsiva</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="contenedor">
　　　<div class="row">
　　　　　　<div class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　caja-sombra: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<p>Siéntemonos aquí, bendiciendo a nuestros seres queridos.</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;caja-sombra:　
　　　　　　　　　inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<p>Te rezaré, que seas siempre feliz. Mi trabajo y mi trabajo son accidentales. Tengo muy poco valor, voy a hacer una pasantía en el laboratorio, es un后果.
　　　　　　　　　</p>
　　　　　　　　　<p>Siéntemonos aquí, bendiciendo a nuestros amigos, bendiciéndolos.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　caja-sombra:inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<p>Con un poco de tiempo, se puede completar una pasantía.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;caja-sombra:　
　　　　　　　　　inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<p>Trabajo y dolor, lleno de vitalidad, por lo que, algunos modelos de gran longevidad. A lo largo de estos años.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

ajusta el tamaño de la ventana del navegador para ver los cambios, o ve la efectividad en tu teléfono.

desplazamiento de columna

El desplazamiento es una función útil para un diseño más profesional. Se puede usar para dar más espacio a las columnas. Por ejemplo,.col-xs-* clases no soportan el desplazamiento, pero pueden lograr este efecto simplemente usando una celda vacía.

Para usar el desplazamiento en pantallas de gran tamaño, usa .col-md-desplazamiento-* clases. Estas clases aumentarán el margen izquierdo externo (margen) de una columna * columnas, donde * El rango es desde 1 a 11.

En el siguiente ejemplo, tenemos <div>..</div>Usaremos .col-md-desplazamiento-3 class para centrar este div.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Ejemplo Bootstrap　-　desplazamiento de columna</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="contenedor">
　　　<h1>¡Hola, mundo!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6　col-md-desplazamiento-3"　
　　　　　　　　　style="background-color: #dedef8;caja-sombra:　
　　　　　　　　　inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Los resultados se muestran a continuación:

columnas anidadas

para anidar la cuadrícula predeterminada, añade una nueva .row, y en una .col-md-* columnas. Añade un grupo .col-md-* columnas. Las filas anidadas deben contener un grupo de columnas, el número de las cuales no debe superar12(de hecho, no se requiere que ocupes12columnas).

En el siguiente ejemplo, el diseño tiene dos columnas, la segunda columna se divide en dos filas y cuatro cajas.

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Ejemplo Bootstrap　-　columnas anidadas</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="contenedor">
　　　<h1>¡Hola, mundo!</h1>
　　　<div class="fila">
　　　　　　<div class="col-md-3" style="fondo-color: #dedef8;caja-sombra:　
　　　　　　　　　inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<h4>primera columna</h4>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div class="col-md-9" style="fondo-color: #dedef8;caja-sombra:　
　　　　　　　　　inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　<h4>segunda columna　-　separadas en cuatro cajas</h4>
　　　　　　　　　<div class="fila">
　　　　　　　　　　　　<div class="col-md-6" style="fondo-color: #B18904;
　　　　　　　　　　　　　　　caja-sombra: 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="fondo-color: #B18904;
　　　　　　　　　　　　　　　caja-sombra: 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="fila">
　　　　　　　　　　　　<div class="col-md-6" style="fondo-color: #B18904;
　　　　　　　　　　　　　　　caja-sombra: 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="fondo-color: #B18904;
　　　　　　　　　　　　　　　caja-sombra: 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>
</body>
</html>

Los resultados se muestran a continuación:

Ordenar columnas

Otra excelente característica del sistema de cuadrícula de Bootstrap es que puede escribir columnas en un orden y mostrarlas en otro.

Puede cambiar fácilmente las columnas con .col-md-empujar-* y .col-md-tirar-* La secuencia de las columnas de la cuadrícula integrada de la clase, donde * El rango es desde 1 a 11.

En el siguiente ejemplo, tenemos un diseño de dos columnas, la izquierda muy estrecha, como una barra lateral. Vamos a usar .col-md-empujar-* y .col-md-tirar-* Para intercambiar el orden de estas dos columnas, utilice las

Ejemplo en línea

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Ejemplo Bootstrap　-　Ordenar columnas</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="contenedor">
　　　<h1>¡Hola, mundo!</h1>
　　　<div class="fila">
　　　　　　<p>Antes de ordenar</p>
　　　　　　<div class="col-md-4" style="fondo-color: #dedef8;
　　　　　　　　　caja-sombra: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　Estoy a la izquierda
　　　　　　</div>
　　　　　　<div class="col-md-8" style="fondo-color: #dedef8;
　　　　　　　　　caja-sombra: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>
　　　　　　　　　Estoy a la derecha
　　　　　　</div>
　　　</div><br>
　　　<div class="fila">
　　　　　　<p>Ordenado</p>
　　　　　　<div class="col-md-4　col-md-empujar-8"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　caja-sombra: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444>
　　　　　　　　　Estoy a la izquierda
　　　　　　</div>
　　　　　　<div class="col-md-8　col-md-tirar-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　caja-sombra: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444>
　　　　　　　　　Estoy a la derecha
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Los resultados se muestran a continuación: