1. Archivo del código fuente
_grid.scss: archivo de clase de sistema de cuadrícula
Mixins/_Grid.SCSS: compatible con las colecciones de mezcla implementadas por Systems Grid
Mixins/_grid-framework.scss: la mezcla central implementada por el sistema de cuadrícula
2. Funciones compatibles
1. Date cuenta del diseño por porcentaje
2. Date cuenta del posicionamiento de la cuadrícula
3. Implementar anidación de cuadrículas
4. Si solo usa el sistema de cuadrícula, solo puede codificar el archivo bootstrap-grid.scss
Principio de implementación
1. Diseño por porcentaje , el principal problema es cómo distribuir uniformemente el ancho en diferentes dispositivos. Bootstrap solo usa un porcentaje simple, y el mismo porcentaje se usa en cualquier dispositivo de tamaño.
2. Posicionamiento de cuadrículas: resuelve la capacidad de las cuadrículas para moverse a la izquierda, a la derecha y cambiar varias celdas hacia la derecha con cuadrículas
3. Anidación de cuadrículas: implementa el sistema de diseño de la cuadrícula después del contenido de la cuadrícula de anidación.
4. Análisis del código fuente
1. _Grid.SCSS: la clase principal generada por el sistema de cuadrícula, que se refiere a variables y métodos relacionados en MIXINS/_GRID.SCSS, Mixins/_Grid-FrameWork.SCSS, VariAbles.SCSS.
Primero: Defina dos clases de contenedores
a) Contenedor: un contenedor de cuadrícula, que define diferentes anchos según diferentes dispositivos y no llenará la pantalla completa;
b) Continuaer-fluido: contenedor de celosía, pantalla completa con cualquier soporte
Tanto el contenedor como el contenedor-fluido usan make-contener (mixins/_grid.scss). El contenedor solo implementa controles como centrado, márgenes izquierdo y derecho, limpieza de flotadores, etc.; El contenedor define el ancho del contenedor según diferentes dispositivos.
Entonces: Definir fila (fila):
Make-Row (mixins/_grids.scss) se llama para lograr la definición de limpieza flotante y márgenes izquierdo y derecho. En 4.0, si el diseño de soporte para Flex está habilitado, la visualización del contenedor está configurada para Flex y Flex-Wrap como envoltura, y limpia flotando.
Siguiente: llame directamente a Make-Grid-Grid-Columns (Mixins/_Grid-Framework.SCSS) para lograr el establecimiento celular
a) Make-Grid-Columns: el método de entrada para la generación de celdas, pasando el número total de cuadrículas, ancho de margen y varios tamaños admitidos
b) Make-Grid-Columns hace referencia a muchos métodos en mixins/_grid.scss:
a) Use la función de tecla de mapa para atravesar una colección de teclas de mapa;
La función @extend se usa, se usa para la herencia, implementando la izquierda flotante de todos los cols y posicionamiento relativo de todos los cols.
@For $ i de 1 a $ columnas {.col-#{$ breakpoint}-#{$ i} {@extend %grid-column; // extender es herencia, fusione esto en una colección de estilo //. Col-xs-1, col-xs-2 {posicionA: relativo; ....}}}a) Función de fabricación-col-especial para implementar el cálculo del ancho de col.
b) Llame al método Make-Col-Modifier en Mixins/_Grid.SCSS para realizar la generación de estilos de empuje, pull y desplazamiento:
i. Push: empuje algunas cuadrículas hacia la derecha, usando a la izquierda
II. Pull: empuje algunas cuadrículas hacia la izquierda, usando a la derecha
iii. Offset: utiliza la implementación de margen-izquierda, empujándola hacia la derecha a un porcentaje.
@mixin make-colksetSet ($ size, $ columnas: $ grid-columna) {margin-left: porcentaje ($ size / $ columns);}@mixin maken-col-push ($ size, $ columnas: $ grid-columna) {izquierda: if ($ size> 0, porcentaje ($ size / $ columnas), auto);}@mixin make-colluL Derecho: if ($ size> 0, porcentaje ($ size / $ columnas), auto);} @mixin make-col-pull ($ size, $ columnas: $ grid-columna) {correcto: if ($ size> 0, porcentaje ($ size / $ columns), auto);} @mixin make-col-modifier ($ type, $ size, $ columnas) {// trabajo en torno a la falta de dinámica de la falta de dinámica @iNCLUDE == push {@include make-col-push ($ size, $ columnas); } @else if $ type == Pull {@include make-col-pull ($ size, $ columnas); } @else if $ type == offset {@include make-colfset ($ size, $ columnas); }}Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.