¿Qué significa el sistema de grilla bootstrap?
¿Qué es el sistema de cuadrícula?
El sistema de cuadrícula se refiere a dividir el diseño de la página en columnas de igual ancho y luego modularizar el diseño de la página definiendo el número de columnas. El sistema de cuadrícula de Bootstrap utiliza un patrón de 1 a 12 columnas y utiliza cálculos proporcionales para establecer los anchos de columna que usted define. Por ejemplo, si desea utilizar un modo de diseño de dos columnas para esta fila, el ancho de cada columna será 50 del contenedor exterior, sin importar qué dispositivo utilice para navegar, se mostrará en esta proporción. Sin embargo, si el ancho del dispositivo es menor que el ancho mínimo que usted estableció, las dos columnas se convertirán en una columna una al lado de la otra.
Sistema grid de Bootstrap
Usar el sistema grid en Bootstrap es muy sencillo y cómodo. Sólo necesitas introducir sus clases ya definidas en tus divs.
Primero echemos un vistazo a varias clases de cuadrícula que se pueden usar en Bootstrap:
1.col-xs-* Esta es una clase de pantalla ultrapequeña (lt; 768px). ), similar a un teléfono móvil y otros equipos.
2.col-sm-* Esta es una clase de dispositivo de pantalla pequeña (≥768px y <992px), similar a los dispositivos de tableta.
3.col-md-* Esta es una clase de dispositivo de tamaño mediano (≥992px y <1200px).
4.col-lg-* Esta es una clase de dispositivo grande (≥1200px).
Cómo utilizar el sistema de cuadrícula Bootstrap
Puedes determinar el estilo de diseño que aplicas en diferentes dispositivos utilizando las clases de cuadrícula correspondientes a estos dispositivos. Por ejemplo: lt;div class="col-xs-6 col-md-12"gt;lt;/divgt;lt;div class="col-xs-6 col-md-12"gt;lt;/divgt ; El resultado de esta codificación es que los dos divs aparecen como dos filas en la PC (cada fila ocupa 12 columnas de la cuadrícula), pero en el navegador móvil aparecen como una fila y dos columnas (cada columna ocupa 6 columnas de la cuadrícula); red) . De esta forma, puede utilizar fácilmente el sistema de cuadrícula para personalizar el diseño de su propia aplicación.
Otra información
Además de los métodos de uso anteriores, también puede utilizar la "clase de desplazamiento de columna" para posicionar rápidamente su propia cuadrícula. El método de uso es similar a lt; class =".col-md-8 .col-md-offset-3"gt;lt;/divgt;Según este método de escritura, este div se desplazará hacia la derecha en 3 columnas en el lado de la PC.
Para obtener más artículos técnicos relacionados con Bootstrap, visite la columna del tutorial de Bootstrap para aprender.