El sistema de la cuadrícula en el marco de arranque divide el contenedor en 12 piezas. Al usarlo, puede recompilar el código fuente menos/SASS de acuerdo con la situación real para modificar el valor 12. ¿Cómo funciona el sistema de malla en el marco Bootstrap:
1. Las filas de datos (.rows) deben incluirse en el contenedor para que puedan dar una alineación y acolchado adecuados
<div> <div> </div> </div>
2. Puede agregar columnas (.Column) en filas (.row), pero la suma de las columnas no puede exceder el número total de columnas que se bisecan (como: 12)
<Div> <Viv> <div> </div> <div> </div> </div>
3. El contenido específico debe colocarse en el contenedor de columna (.Column), y solo la columna (.Column) puede usarse como un elemento infantil directo del contenedor de fila (.row).
4. Cree el espacio entre columnas configurando la distancia interna (relleno) y luego compense la influencia del relleno estableciendo valores negativos para la primera columna y la última pila.
Existe un efecto de respuesta en el sistema de cuadrícula Bootstrap, que tiene cuatro tipos de navegadores (pantalla ultra pequeña, pantalla pequeña, pantalla media y pantalla grande), y su punto de interrupción es 768px, 992px, 1220px
Container (.Container), para diferentes resoluciones del navegador, tiene diferentes anchos: automático, 760px, 970px, 1170px;
.Container {Padding-Right: 15px; Padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) {.container {width: 750px;}@media (min-width: 992px) {.container {width: 970px; 1200px) {.Container {ancho: 1170px;}Recipiente de fila (.row), divide las filas del contenedor en 12 partes iguales, es decir, columnas. Cada columna tiene el relleno-izquierda: 15px y el relleno de la derecha: 15px; Esto también hace que el acolchado-izquierda en la primera columna y la derecha del relleno en la última columna se ocupen de 30 px del ancho medio.
.col-xs-1, .col-md-1, .col-lg-1, .col-xs-2, .col-md-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-md-3, .col-md-3, .col-lg-3, .col-xs-4,. .col-md-4, .col-lg-4, .col-xs-5, .col-md-5, .col-md-5, .col-lg-5, .col-xs-6, .col-md-6, .col-lg-6, .col-md-6, .col-lg-6, .col-xs-xs-7, .col-md-7,, 7,. .col-xs-8, .col-md-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-md-9, .col-lg-9, .col-xs-10, .col-md-10, .col-md-10, .col-md-10,,, cold .col-xs-11, .col-md-11, .col-md-11, .col-md-11, .col-lg-11, .col-xs-12, .col-md-12, .col-md-12, .col-lg-12 {posición: relativo; min-pescado: 1px; padding-right: 15px; padding-left;}El contenedor de fila (.row) define los valores de margen-izquierda y margen-derecha de -15px, que se utilizan para compensar la distancia interna izquierda de la primera columna y la distancia interna derecha de la última columna, de modo que no hay espaciado entre la primera columna y la última columna y el contenedor (.Container).
.row {margin -right: -15px; margen -izquierda: -15px;}Uso básico
Dado que el marco Bootstrap utiliza diferentes estilos de cuadrícula para diferentes tamaños de pantalla, tomemos la pantalla media (970px) como ejemplo.
1. Combinación de columna
La combinación de columnas es cambiar el número para fusionar columnas (el número total de columnas no puede exceder 12), que es algo similar al atributo Colspan de una tabla; El método de combinación de columna implica solo dos características: flotando en porcentaje de ancho
<VIV> <VIV> <VIV> COL-MD-4 </div> <div> col-md-8 </div> </div> <div> <div> col-md-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> <d di v> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> <div> col-md-3 </div> <div> col-md-6 </div> <div> col-md-3 </div> </div>
Los efectos son los siguientes:
Asegúrese de que todas las columnas floten
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: izquierda;}Defina el ancho de cada combinación de columna
.Col-MD-12 {ancho: 100%;}. Col-MD-11 {ancho: 91.6666666667%;}. Col-MD-10 {ancho: 83.33333333333%;}. Col-MD-9 {ancho: 75%;}. Col-MD-8 {Width: 66.666666667%;}. Col-md-7 {ancho: 58.333333333333%;}. Col-md-6 {ancho: 50%;}. Col-md-5 {width: 41.66666666667%;}. Col-md-4 {width: 33.3333333333%;}. {ancho: 25%;}. Col-MD-2 {ancho: 16.666666667%;}. Col-MD-1 {ancho: 8.333333333%;}Compensación de columna
A veces, no queremos que dos columnas adyacentes estén juntas, pero no queremos usar margen u otros medios técnicos. Esto se puede lograr usando el desplazamiento de la columna. Usando el desplazamiento de la columna, simplemente agregue el nombre de clase. COL-MD-OFFSET-* En el elemento de columna (el asterisco representa el número de combinaciones de columna a compensar). La columna con este nombre de clase se compensará, como: Agregar .Col-MD-Offset-4 en el elemento de la columna, lo que indica que la columna se desplaza a la derecha por 4 columnas de ancho.
<Div> <VIV> <VIV> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> columna compensación </div> <div> col-md-2 </div> <div> col-md-2 </div> </div> </div> </div> </div> </div> </div> </div>
Los efectos son los siguientes:
Principio de implementación:
Usando el margen de un solo margen-izquierda, tantos margen-izquierda como compensaciones, puede obtener tantos margen-izquierda como lo hay.
.col-md offset-12 {margin-left: 100%;}. col-md ofsets-11 {margin-left: 91.6666666667%;}. col-md-ofset-10 {margin-left: 83.33333333333%;}. col-md-offset-9 {margin-lief: 75%;}. col-md-ocfet-8 66.66666667%;}.col-md-offset-7 {margin-left: 58.33333333%;}.col-md-offset-6 {margin-left: 50%;}.col-md-offset-5 {margin-left: 41.666666667%;}.col-md-offset-4 {margin-left: 33.33333333333%;}. Col-md offset-3 {margin-left: 25%;}. Col-md offset-2 {margin-left: 16.66666667%;}. Col-md offet-1 {margin-left: 8.33333333%;}. Col-md offset-0 {margen-left-left: 0;}Cabe señalar que cuando se usa col-md offset-* para compensar la columna, es necesario asegurarse de que el número total de columnas y columnas de desplazamiento no exceda las 12, de lo contrario hará que la columna se muestre fuera de la fila.
Clasificación de columna
La clasificación de la columna es cambiar la dirección de la columna y establecer la distancia flotante. En el sistema de cuadrícula Bootstrap, es agregando nombres de clase. Col-MD-Push-* y Col-MD-Pull-*
<Div> <VIV> <VIV> COL-MD-4 </div> <div> col-md-8 </div> </div> </div>
Los efectos son los siguientes:
Col-MD-4 está a la izquierda y Col-MD-8 está a la derecha. Si desea intercambiar posiciones, debe mover COL-MD-4 a la derecha por 8 columnas, es decir, agregue el nombre de clase. COL-MD-PUSH-8; Al mismo tiempo, debe mover COL-MD-8 a la izquierda por 4 columnas, es decir, agregue el nombre de clase. COL-MD-PULL-4.
Bootstrap logra los efectos de posicionamiento solo al establecer la izquierda y la derecha.
.col-md-pull-12 {derecha: 100%;}. col-md-pull-11 {derecha: 91.666666667%;}. col-md-pull-10 {derecha: 83.3333333333%;}. col-md-pull-9 {derecha: 75%;}. col-md-pull-8 {derecha: derecha: derecha: derecha: derecha: derecha: derecha: 66.666666667%;}. Col-Md-Pull-7 {Derecho: 58.3333333333%;}. Col-Md-Pull-6 {Right: 50%;}. Col-Md-Pull-5 {Right: 41.6666666667%;}. Col-Md-Pull-4 {Derecho: 33.33333333333%;}. Col-Md-Pull-3 {Right: 25%;}. Col-Md-Pull-2 {Right: 16.6666666667%;}. Col-Md-Pull-1 {Right: 8.33333333333%;}. Col-Md-Pull-0 {Right: 0;}. Col-Md-Phush-12 {Left {Izquierda {Izquierda {Izquierda {Izquierda {Izquierda {Izquierda: Izquierda: Izquierda: Izquierda. 100%;}. Col-md-push-11 {izquierda: 91.6666666667%;}. Col-md-push-10 {izquierda: 83.3333333333%;}. Col-md-push-9 {izquierda: 75%;}. Col-md-push-8 {izquierda: 66.66666667%;}.}. 58.33333333333%;}. Col-md-push-6 {izquierda: 50%;}. Col-md-push-5 {izquierda: 41.666666667%;}. Col-md-push-4 {izquierda: 33.333333333%;}. Col-md-pos-3 {izquierda: 25%;}.}. 16.6666666667%;}. Col-Md-Push-1 {Izquierda: 8.3333333333%;}. Col-Md-Push-0 {izquierda: 0;}Anidación
La anidación de la columna puede agregar uno o hacer un contenedor de fila en una columna, y luego insertar una columna en este contenedor de fila. Cuando el ancho del contenedor de fila (fila) en el contenedor de columna es del 100%, es el ancho de la columna externa actual.
<div> <div> <div>
He anidado una cuadrícula dentro
<VIV> <VIV> COL-MD-6 </div> <div> col-md-6 </div> </div> </div> <div> col-md-4 </div> </div> <div> <div> col-md-4 </div> </div> <div> col-md-4 </div> <div> <div> <div> <div>
He anidado una cuadrícula dentro
<Div> <Viv> Col-MD-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
El contenido anterior es el sistema de cuadrícula Bootstrap introducido por el editor. ¡Espero que sea útil para todos!