Este artículo introducirá principalmente el sistema de cuadrícula de Bootstrap.
La implementación del sistema de cuadrícula es definir el tamaño del contenedor, dividir 12 partes (o 24 partes o 32 partes, pero 12 partes son las más comunes), luego ajustar los márgenes internos y externos, y finalmente combinar consultas de medios para crear un poderoso sistema de cuadrícula receptivo.
El sistema de cuadrícula en Bootstrap es dividir el contenedor en 12 partes.
El sistema de cuadrícula de Bootstrap se usa para el diseño, que en realidad es una combinación de columnas. Hay cuatro usos básicos:
1. Combinación de columna
Cambie el número para fusionar columnas (Principio: la suma de las columnas no puede exceder las 12), por ejemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Uso básico de la combinación de columna </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstap/3.1.1/css/bootstrap.min.css". estilo-> <style> [class *= col-] {background-color: #eee; borde: 1px sólido #ccc; } </style> </head> <body> <br> <div> <div> <!-El sistema de cuadrícula en bootstrap divide el contenedor en 12 piezas-> <!-Esta línea se divide uniformemente por 1: 1: 1-> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> <Viv> .Col-MD-4 </div> </div> <div> <!-Esta línea se divide uniformemente por 1: 2: 1-> <div> .col-md-3 </div> <div> .col-md-6 </div> <div> .col-md-3 </div> </div> </div> </div> </body> </html>Las representaciones son las siguientes:
2. Compensación de columna
Agregue el nombre de clase "col-md-offset-*" en el elemento de la columna (donde el asterisco representa el número de combinaciones de columna a compensar), y la columna con el nombre de esta clase se compensará a la derecha.
<Viv> <!-El espaciado de cuatro columnas se mueve a la derecha-> <div> <div> .Col-md-4 </div> <div> El espaciado de cuatro columnas que se mueven hacia la derecha </div> <div> .col-md-3 </div> </div> <!-El espacio de cuatro columnas que se mueven a la derecha </div> <iv> ocurrió-> <div> <div> <div> .col-md-4 </div> <div> el espaciado de cuatro columnas que se mueven a la derecha </div> <div> .col-md-3 </div> </div> <div> <div> .col-md-3 </div> <div> <div> .col-md-3 </div> <iv> <div> <div> col-md-4 </div> </div> </div>
Las representaciones son las siguientes:
3. Clasificación de columna
La clasificación de la columna es cambiar la dirección de la columna, cambiar la flotación hacia la izquierda y la derecha y establecer la distancia flotante. Bootstrap se logra agregando los nombres de clase "Col-MD-Push-" y "Col-MD-Pull-" (donde el asterisco representa el número de combinaciones de columnas móviles).
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> uso básico </title> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <! [class *= col-] {background-color: #eee; borde: 1px sólido #ccc; } </style> </head> <body> <div> <div> <div> .col-md-3 </div> <div> .col-md-6 </div> </div> </div> </body> </html>4. Anidación de columnas
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> uso básico </title> <link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <! [class *= col-] {background-color: #eee; borde: 1px sólido #ccc; } [class *= col-] [class *= col-] {background-color: #f36; borde: 1px discontinuo #ffff; Color: #ffff; } </style> </head> <body> <div> <div> <div> <div> Tengo una cuadrícula anidada en él <div> <div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> </div> </iv> </div> </body </html>Las representaciones son las siguientes:
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Serie de artículos:
La primera vez que entré en contacto con el diseño básico mágico de Bootstrap //www.vevb.com/article/89278.htm
La primera vez que entré en contacto con la forma mágica de bootstrap //www.vevb.com/article/89330.htm
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.