Sistema de Cuadrícula


Bootstrap incluye un primer sistema de respuesta , móviles fluido rejilla que se ajusta adecuadamente hasta 12 columnas como el dispositivo o aumenta el tamaño de ventana gráfica . Incluye clases predefinidas de opciones de diseño fáciles , así como mixins poderosas para generar diseños más semánticas.

introducción

Sistemas de coordenadas se utilizan para crear diseños de página a través de una serie de filas y columnas que albergan el contenido. Así es como funciona el sistema de cuadrícula Bootstrap :

Filas deben ser colocados dentro de un . Recipiente para la correcta alineación y el relleno .
Utilice filas para crear grupos horizontales de las columnas.
El contenido debe ser colocado dentro de las columnas , y sólo las columnas puede ser hijos inmediatos de filas.
Clases de cuadrícula predefinidos similares. Reman y . Col -xs – 4 están disponibles para hacer rápidamente los diseños de cuadrícula. MENOS mixins también se pueden utilizar para diseños más semánticas .
Columnas crear canaletas (gaps entre el contenido de la columna ) a través de relleno. Eso relleno se compensa en filas para la primera y última columna a través de margen negativo en . Filas .
Columnas en 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 .
Mira a los ejemplos de la aplicación de estos principios a su código.

Este es el segundo video tutorial de el curso Bootstrap 3 en el vamos hablar de el systema de Cuadriculas de Bootstrap o el Grid system

 

opciones de cuadrícula


 


Vea como los aspectos de la labor del sistema de rejilla Bootstrap a través de múltiples dispositivos con una mesa muy bien.

curso bootstrap

Clases de cuadrícula se aplican a dispositivos con anchos de pantalla superiores o iguales a los tamaños de punto de interrupción, y las clases de rejilla de anulación dirigidos a dispositivos más pequeños. Por lo tanto, la aplicación de cualquiera. Clase col-md a un elemento no sólo afectará su estilo en dispositivos medianas, sino también en dispositivos de gran tamaño si a.-Clase-col lg no está presente.

 

Ejemplo:-apilada a horizontal

 


El uso de un único conjunto de *. Col-md-clases de cuadrícula, se puede crear un sistema básico de cuadrícula que comienza apilada en los dispositivos móviles y los dispositivos de tableta (extra pequeña a pequeña escala) antes de convertirse en horizontal en los dispositivos (medio) de escritorio. Coloque columnas de la cuadrícula en cualquier fila..

horizontal

Ejemplo: de escritorio y móvil

No quieren que sus columnas simplemente se apilan en dispositivos más pequeños? Utilice las clases extras de cuadrícula dispositivo de pequeñas y medianas empresas mediante la adición. Col-xs-*. Col-md-* a sus columnas. Consulte el ejemplo siguiente para una mejor idea de cómo funciona todo.

mobile y desktop Bootstrap 3

Ejemplo: móvil, tableta, ordenadores de sobremesa

Basarse en el ejemplo anterior creando aún más diseños dinámicos y de gran alcance con la tableta. Col-sm-* clases.

mobile tableta y desktop Bootstrap 3

Mas Videos