Bootstrap proporciona un sistema de rejilla de transmisión de primer móvil y sensible. A medida que aumenta la pantalla o el tamaño de la visión, el sistema se dividirá automáticamente en hasta 12 columnas.
El sistema de cuadrícula es similar a una tabla con filas y columnas. Debe colocarse en un contenedor con el tipo establecido en contenedor. Puede ser un DIV y el contenido se coloca en la columna. La cuadrícula en el diseño web se utiliza para diseñar el contenido, lo que hace que el sitio web sea fácil de navegar. El siguiente es un ejemplo del uso de diseño de cuadrícula de bote de arranque.
<Div> <Viv> Col2 </div> <div> col10 </div> </div>
El efecto de visualización es el siguiente:
El estilo de clase = "fila" se agrega para representar la fila, y se agrega el estilo de class = "col-sm-2" para representar la columna. El sistema divide toda la pantalla en 12 partes, Col-SM-2 significa que la columna abarca 2 partes y la relación COL-SM-10 significa que la columna abarca 10 partes. El efecto mostrado se muestra como se muestra en la figura anterior, lo que indica que hay dos columnas en una fila, la primera columna representa 2 partes y la segunda columna representa 10 partes.
Bootstrap es un marco front-end sensible, que se refleja en el sistema de cuadrícula, que es un dispositivo correspondiente a diferentes tamaños de visualización, y puede presentar diferentes efectos de visualización. Como se muestra a continuación:
<Div> <VIV> .COL-XS-12 .COL-MD-8 </div> <div> .Col-XS-6 .Col-MD-E4 </div> </div>
Col-MD-8 significa que esta lista representa 8 piezas en pantallas medianas, como escritorios y computadoras portátiles ordinarios. Col-XS-12 significa que esta columna representa 12 copias en pantallas pequeñas, como tabletas. El código anterior muestra que hay dos columnas en la fila y la siguiente fila de escritorio y computadoras portátiles ordinarias. La primera columna representa 8 partes, la segunda columna representa 4 partes y la siguiente fila y la siguiente columna representa 2 columnas, la primera columna representa 12 partes y la segunda columna representa 6 partes. De esta manera, se logran diferentes efectos en diferentes dispositivos de visualización. Puede simular estas dos situaciones al cambiar el tamaño del navegador.
La siguiente figura muestra cómo funciona el sistema de cuadrícula de Bootstrap en múltiples dispositivos de pantalla
Lo anterior es la descripción completa de los terceros conceptos básicos de la cuadrícula de bootstrap introducidos por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!