1. Fichier de code source
_grid.scss: fichier de classe système de grille
Mixins / _grid.scs: support les collections de mixons implémentées par les systèmes de grille
Mixins / _Grid-Framework.SCSS: Le Core Mixin implémenté par Grid System
2. Fonctions prises en charge
1. Réalisez la disposition par pourcentage
2. Réalisez le positionnement de la grille
3. Mettre en œuvre la nidification des grilles
4. Si vous n'utilisez que le système de grille, vous ne pouvez encoder que le fichier bootstrap- grid.scss
Principe de mise en œuvre
1. Disposition par pourcentage , le principal problème est de savoir comment distribuer uniformément la largeur sur différents appareils. Bootstrap utilise juste un pourcentage simple et le même pourcentage est utilisé sous n'importe quel appareil.
2. Positionnement des grilles: résout la capacité des grilles à se déplacer à gauche, à droite et à déplacer plusieurs cellules vers la droite avec des grilles
3. Nesting des grilles: implémentez le système de disposition de la grille après le contenu de la grille de nidification.
4. Analyse du code source
1. _Grid.scss: la classe principale générée par le système de grille, se référant aux variables et aux méthodes connexes dans les mixins / _grid.scss, mixins / _grid-framework.scss, variables.scss.
Premièrement: définir deux classes de conteneurs
a) Récipient: un conteneur de grille, qui définit différentes largeurs en fonction des différents appareils et ne remplira pas le plein écran;
b) Contiaer-Fluid: Récipient en réseau, plein écran avec toute prise en charge
Le conteneur et le conteneur-fluide utilisent des container (mixins / _grid.scs). Making-Container uniquement les contrôles tels que le centrage, les marges gauche et droite, les flotteurs de compensation, etc.; Le conteneur définit la largeur du conteneur en fonction de différents appareils.
Ensuite: définissez la ligne (ligne):
Make-Row (mixins / _grids.scss) est appelé pour atteindre la définition de la compensation flottante et des marges gauche et droite. Dans 4.0, si la prise en charge de la mise en page Flex est activée, l'affichage du conteneur est défini sur Flex et Flex-WAP comme enveloppement et effacez flottant.
Suivant: Appelez directement les colonnes Make-Grid (Mixins / _Grid-Framework.SCSS) pour réaliser l'establishment cellulaire
a) Make-Grid-Colonnes: la méthode d'entrée pour la génération de cellules, le passage du nombre total de grilles, la largeur de marge et plusieurs tailles prises en charge
b) Make-Grid-Cornns fait référence à de nombreuses méthodes dans Mixins / _grid.scss:
a) Utilisez la fonction de clé de carte pour traverser une collection de clés de carte;
La fonction @Extend est utilisée, utilisée pour l'héritage, la mise en œuvre du flottement gauche de tous les cols et le positionnement relatif de tous les COL.
@For $ i de 1 à $ colonnes {.col - # {$ breakpoint} - # {$ i} {@Extend% grid-column; // Extension est l'héritage, fusionnez-le dans une collection de style //. Col-xs-1, col-xs-2 {positiona: relative; ....}}}a) Fonction de make-Col-span pour implémenter le calcul de la largeur de col
b) Appelez la méthode du modificateur de colome dans les mixins / _grid.scss pour réaliser la génération de styles push, pull et offset:
je. Push: poussez quelques grilles vers la droite, en utilisant la gauche
ii Tirer: pousser quelques grilles vers la gauche, en utilisant à droite
iii. Offset: il utilise la mise en œuvre de la marge gauche, la poussant à droite à un pourcentage.
@mixin make-col-offset($size, $columns: $grid-columns) { margin-left: percentage($size / $columns);}@mixin make-col-push($size, $columns: $grid-columns) { left: if($size > 0, percentage($size / $columns), auto);}@mixin make-col-pull($size, $ colonnes: $ grille-colonnes) {à droite: if ($ size> 0, pourcentage ($ size / $ colonnes), auto);} @ mixin make-Col-pull ($ size, $ colonnes: $ grid-columns) {droite: if ($ size> 0, pourcentage ($ size / $ colonnes), Auto);} @ mixin make-colunifier) {// Travaillez le manque de mixin dynamique @include support @if $ type == push {@include make-Col-push ($ size, $ colonnes); } @else if $ type == pull {@include make-Col-pull ($ size, $ colonnes); } @else if $ type == offset {@include make-co-offset ($ size, $ colonnes); }}Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.