1. Arquivo de código -fonte
_Grid.Scss: Arquivo da classe do sistema de grade
Mixins/_Grid.Scss: Suporte Mixin Collections implementados pela Grid Systems
Mixins/_Grid-framework.scss: The Core Mixin implementado pelo sistema de grade
2. Funções suportadas
1. Perceba o layout por porcentagem
2. Perceba o posicionamento da grade
3. Implementar o ninho de grades
4. Se você usar apenas o sistema de grade, poderá codificar apenas o arquivo bootstrap-grid.scss
Princípio da implementação
1. Layout por porcentagem , o principal problema é como distribuir uniformemente a largura em diferentes dispositivos. O Bootstrap usa apenas uma porcentagem simples e a mesma porcentagem é usada em qualquer dispositivo de tamanho.
2.
3. Ninho das grades: Implemente o sistema de layout da grade após o teor de nidificação da grade.
4. Análise do código -fonte
1. _Grid.Scss: A classe principal gerada pelo sistema de grade, referindo-se a variáveis e métodos relacionados nas mixins/_grid.scss, mixins/_grid-framework.scss, variables.scss.
Primeiro: defina duas classes de contêineres
a) Contêiner: um recipiente de grade, que define diferentes larguras de acordo com diferentes dispositivos e não preencherá a tela inteira;
b) Contra-Fluid: contêiner de treliça, tela cheia com qualquer suporte
Use o contêiner e o fluido de contêiner-fluid-container (mixins/_grid.scss). O Make-Container implementa apenas controles como centros, margens à esquerda e direita, carros alegóricos com limpeza, etc.; O contêiner define a largura do contêiner de acordo com diferentes dispositivos.
Então: Definir linha (linha):
Make-rrow (mixins/_grids.scss) é chamado para alcançar a definição de limpeza de margens flutuantes e esquerda e direita. Em 4.0, se o suporte para o layout flexível estiver ativado, a exibição do contêiner será configurada para flexionar e flexionar como embrulho e flutuação clara.
Próximo: Ligue diretamente a colunas de Make-Grid (Mixins/_Grid-Framework.SCSS) para alcançar o estabelecimento de células
a) colunas de make-grid: o método de entrada para geração de células, passando o número total de grades, largura da margem e vários tamanhos suportados
b) Make-Grid Columns Reference muitos métodos em mixins/_grid.scss:
a) Use a função de tecla mapa para atravessar uma coleção de chaves de mapa;
A função @extend é usada, usada para herança, implementando a flutuação à esquerda de todos os Cols e o posicionamento relativo de todos os Cols.
@For $ i de 1 a $ colunas {.col-#{$ breakpoint}-#{$ i} {@extend %grid-column; // Extend é herança, mescla-a em uma coleção de estilo //. col-xs-1, col-xs-2 {positiona: relativo; ....}}}a) Função de make-cor-span para implementar o cálculo da largura do COL
b) Chame o método Make-Modifier em Mixins/_Grid.Scss para realizar a geração de estilos de push, puxar e deslocamento:
eu. Empurre: empurre algumas grades para a direita, usando a esquerda
ii. Puxar: empurre algumas grades para a esquerda, usando a direita
iii. Offset: ele usa a implementação da margem-esquerda, empurrando-a para a direita para uma porcentagem.
@Mixin Make-Col-offset ($ tamanho, $ colunas: $ grid colunas) {margem-esquerda: porcentagem ($ size / $ colunas);}@mixin make-push (size $ size, $ colunns: $ grid columns) {esquerda: if ($ size> 0, (size $ 0, ($ columns: $ colunns); $ grid columns) {direita: if ($ tamanho> 0, porcentagem ($ size / $ colunas), auto);}@mixin make-coll-pull ($ tamanho, $ colunas: $ grid-colunns) {direita: if ($ size> 0, porcentagem ($ size / $ colunas), autocompere);@@mixin make-mawrem> mixin @include dinâmico suporte @if $ type == push {@include make-col-push ($ size, $ colunas); } @else se $ type == pule {@include Make-Col-Pull ($ size, $ colunas); } @else se $ type == deslocamento {@include Make-Col-offset ($ size, $ colunas); }}O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.