Bienvenue dans cette leçon, nous allons continuer à travailler avec la grille d'amorçage en particulier il ya deux caractéristiques principales que je veux mettre en évidence.
La première est que je veux aborder les quatre tailles différentes que j'ai brièvement mentionné.
Nous avons travaillé avec la colonne Elgie n'ont pas parlé de ce que cela signifie et il ya trois autres tailles cela fonctionnera avec.
Ils veulent également vous montrer comment nous pouvons jeter des grilles à l'intérieur d'autres grilles pour diviser encore plus ces 12 unités en petits morceaux.
Mais commencez tout en parlant des quatre tailles que je vais commencer en revenant au navigateur et en jetant un coup d'oeil à la démo que nous avons construite dans la dernière leçon.
Donc, nous avons deux lignes qui a 12 colonnes un qui a trois en travers et regarder ce qui se passe comme je redimensionner les choses fenêtre de l'échelle très bien et puis nous avons frappé un point de rupture ici où tout change dans chaque colonne.
Maintenant prend jusqu'à un plein de 12 unités traversant et ils empilent les uns sur les autres et comme ils continuent de redimensionner, vous ne remarquerez pas de changements vraiment.
Ils continuent à prendre 12 unités et empiler les uns sur les autres.
Mais il existe en fait quatre tailles différentes que nous pouvons spécifier afin que nous puissions avoir quatre différentes mises en page.
À l'heure actuelle, il s'agit d'une disposition mobile qui est un accès supplémentaire.
Ensuite, nous obtenons trop petit qui est comme une tablette disposer et puis moyen qui est juste ici.
Ce serait sur un ordinateur portable ou une fenêtre de navigateur plus petite et puis grande que nous avons ici.
Donc, il ne semble pas qu'il ya beaucoup de différence, sauf ici même quand nous allons entre être même grand.
Mais il ya quatre tailles et nous pouvons spécifier ratios et proportions pour chacune de ces tailles.
Donc, sur les quais bootstrap sous les options de grille ici le système de grille vous pouvez voir il ya une table et il nous montre les quatre tailles différentes.
Il y a donc des périphériques supplémentaires comme les téléphones que les petits périphériques qui sont des périphériques de taille moyenne ou des ordinateurs de bureau de plus de douze cents pixels de large et ils ont chacun un préfixe que nous pouvons utiliser pour que l'accès aux colonnes soit petit.
S.M. Est petite M.D. est moyenne et LG est grand, c'est ce que nous avons été en utilisant.
Alors disons que je veux que ma mise en page reste la même au grand point d'arrêt.
Et puis, lorsque nous passons à moyenne droite ici, je veux que ces 12 colonnes qui prennent chacun une seule unité.
Je veux qu'ils prennent chacun deux unités à la place.
Nous allons donc terminer par six en passant.
Ensuite, un autre 6 ci-dessous.
Concentrons-nous donc sur cela et simplifions les choses.
Je vais effectivement me débarrasser de notre deuxième rangée pour l'instant.
Donc tout ce que nous avons est ici.
Donc, quand nous atteignons ce point d'arrêt moyen juste là, je ne veux pas que cela arrive.
Au lieu de cela, je veux six colonnes qui vont à travers pour faire cela.
Je viens d'ajouter dans une autre classe.
Donc, je vais le faire à chacun et il va être moyen de colonne.
Donc, lorsque cette grille est définie à la taille moyenne, nous voulons qu'ils prennent chacun deux unités et nous allons économiser.
Maintenant, allons nous rafraîchir.
Faites-le en taille réelle.
Rien ne change parce que nous sommes à la grande taille.
Mais maintenant, quand je passe à moyenne droite ici.
Notez qu'ils prennent chacun deux unités maintenant et nous obtenons six en passant.
Et si je continue à le réduire, nous atteignons le petit point d'arrêt et c'est là qu'il change où chaque colonne va maintenant tout le chemin à travers les 12 unités pleines et ils empilent les uns sur les autres.
Revenons donc à notre sublime et relancez notre vieille grille.
Donc, nous allons nous débarrasser de celui-ci parce que ce n'est pas si commun que d'avoir en fait 12 composants différents.
Habituellement, vous travaillez avec trois ou quatre parfois six, mais 12 colonnes individuelles est assez rare.
Alors revenons à celui-ci et ce que nous allons faire, c'est essayer de recréer ce jeu de grille hors du calendrier de tournée de l'Olafur Arnold ici.
Donc, il commence à quatre en passant.
Puis nous nous rétrécissons.
Il ya un point de rupture moyen et nous sommes toujours à quatre et puis nous arrivons à la petite pause et nous allons à deux à travers.
Et puis mobile x ou petit est un.
Donc, c'est ce que nous allons essayer de recréer pas le contenu de la structure.
Nous reviendrons donc ici.
Et nous voulons commencer par quatre passer à travers.
Ce qui signifie que chacun prend trois unités et ensuite nous pouvons changer le texte ici.
Et disons simplement à ou date.
Donc, si nous étions frais Nous devrions avoir quatre colonnes à travers lequel nous faisons ce qui est exactement ce que cela commence comme quatre traverser.
Et la seule différence est vraiment le contenu réel.
Ainsi, au lieu de chaque colonne, nous ajoutons simplement un H trois un paragraphe un bouton et tout autre contenu dont nous avons besoin d'un petit H.R., il ressemble et nous avons toujours obtenir le même espacement.
D'accord.
Donc, le point de rupture suivant est quand nous arrivons à moyen.
Il reste à quatre.
Donc, ce que vous pourriez penser que nous devons faire est de spécifier le point de rupture moyenne, donc quand nous frappons cela, ils doivent toujours prendre jusqu'à trois unités.
Nous pouvons revenir à sublime et ajouter que et de nouveau les appeler moyennes trois et sauver et ils commencent chacun à trois unités nous frappé moyen et ils restent à trois unités et puis nous dirigeons petits et maintenant ils sont 12 unités encore.
Et ce que nous voulons pour suivre cela, c'est que lorsque nous frappons à la petite taille, ils prennent maintenant chacun six unités afin que nous puissions aller ici et ajouter dans la colonne petite 6.
Ainsi, la grande taille de chacun de ces prend jusqu'à 25 pour cent trois unités sur 12 à la taille moyenne.
Même chose.
Ils prennent jusqu'à 25 pour cent, puis à la petite taille qui est pour les comprimés qu'ils prennent chacun chacun 50 pour cent.
Donc, nous allons rafraîchir chaque prendre trois minutes, puis trois unités, puis nous avons frappé petit.
Et maintenant, ils prennent chacun six unités et ensuite nous avons eu des petits plus.
Ensuite, ils prennent automatiquement les 12 unités, c'est ce que nous voulons.
Vous pouvez voir quand nous frappons petit nous voulons qu'ils prennent une unité traversant.
D'accord.
Nous avons donc là-bas un petit changement que nous pouvons faire si nous revenons au sublime.
Vous verrez que nous spécifions ces trois unités deux fois pour le grand et le moyen.
Nous pouvons effectivement se débarrasser de la colonne trois grands et juste mis milieu là-dedans et bootstrap saura que parce que nous mettons le médium à trois et nous ne sommes pas explicitement fixant le grand il prendra juste ce que nous avons fixé pour le milieu et appliquer Il à grande.
Donc, il fonctionne de la même manière.
Rien n'a changé.
J'ai déjà rafraîchi semble identique notre point d'arrêt moyen est toujours là et nos petits travaux.
Donc nous n'avons pas à le spécifier à deux reprises.
Donc laissez-moi venir N.Z. Nous nous sommes débarrassés de cela et cela fonctionne exactement de la même manière.
Et en fait si nous jetons un coup d'oeil nous allons au site Web.
Je parie que si nous inspectons chacun de ceux-ci vous verrez là que nous allons.
Colonne petit six colonne moyenne trois.
Exactement ce que nous avions maintenant que nous avons couvert ces quatre tailles différentes.
Espérons que vous pouvez voir comment polyvalent et utile le système de grille peut être.
Retournons.
Et maintenant, je vais aborder les réseaux de nidification.
Supposons que, au lieu de cette première colonne ici, je veux la diviser en deux et avoir quelque chose sur le côté gauche de cela et quelque chose sur le côté droit.
Je peux réellement aller et ajouter dans une autre rangée à l'intérieur de là.
Donc la classe est égale à la rangée.
Et puis à l'intérieur de cette rangée, je peux ajouter dans un div avec une classe égale à la colonne et tout trop grand pour l'instant colonne grand six et une autre grande colonne 6 et je vais juste écrire un texte ici à mi-chemin et l'autre moitié.
Changeons la première moitié et l'autre moitié et nous allons sauver et nous allons leur donner un rose classique.
Donc, ce que nous avons fait maintenant, c'est que nous allons faire trois ou quatre traverser.
Un deux trois quatre et dans le premier nous avons divisé en 12 unités supplémentaires en ajoutant une autre rangée et nous utilisons les six premiers pour dire quelque chose et nous utilisons le sixième six pour dire quelque chose d'autre sauver ou rafraîchir .
Là vous allez et le rendre encore plus évident.
Laissez-moi leur donner une autre classe.
Appelons cela orange.
N'existe pas encore.
Et défini ceci apparaît orange et il aura l'orange d'arrière-plan et nous ajouterons dans l'ordre un rouge plein de pixel et puis faisons réellement dasht OK.
Refresh vous pouvez voir maintenant nous avons toujours ces quatre choses traverser.
Chacun prend trois unités, mais nous avons divisé le premier en six unités et six unités en ajoutant cette ligne dans et vous devez ajouter la ligne.
Vous ne pouvez pas commencer à faire cela où vous avez une colonne au lieu d'une colonne.
Il doit y avoir une rangée.
Et faisons un de plus.
Mettons ce dernier ici en six petits morceaux à l'intérieur.
Donc, nous devons ajouter une ligne à l'intérieur de cette classe div égale ligne au lieu de là.
Nous avons besoin d'un autre div et nous aurons six de ces derniers où nous avons la colonne deux grands chacun prenant deux sur 12 unités.
Et nous voulons six, puis nous allons sur chacun d'eux et ajoutons dans cette classe orange juste pour que nous puissions les voir.
D'ACCORD.
Donc, nous avons quatre grandes colonnes à travers le premier nous avons divisé en deux.
Le dernier, nous avons divisé en six morceaux et vous ne pouvez pas vraiment voir quoi que ce soit, donc nous n'avons pas mis de texte là-dedans.
Alors allons faire ça.
Ou plutôt c'est en fait juste donner un avec ou une hauteur à la classe orange.
Faisons-les chaque 50 pixels.
Et si je rafraîchir vous voyez que maintenant tout ce qui a orange que la classe orange prend 50 pixels de hauteur.
Nous avons donc nos deux colonnes divisées uniformément et ensuite nos six colonnes divisées uniformément à l'intérieur de ces quatre colonnes de premier niveau uniformément divisées.
Ce sont donc tous les éléments importants du système de grille.
En bref, nous avons 12 unités par rangée.
Vous les divisez comme vous voulez.
Il ya quatre tailles grande moyenne petite plus petite et vous pouvez réaffecter ces 12 unités à l'un de ces quatre points de rupture ces quatre tailles différentes.
Et c'est comme cela que vous vous retrouvez avec ces mises en page adaptables gentil et généralement le modèle que vous voyez est que sur les sites mobiles.
Donc, sur la petite taille supplémentaire de la plupart des sites auront leur contenu juste empiler les uns sur les autres comme nous le ferions ici si je réduire ce bas.
Il s'agit de la disposition commune sur mobile où vous n'avez pas plusieurs morceaux de contenu dans la même rangée.
D'ACCORD.
Revenons au sublime.
Assurez-vous que j'ai parlé des trois objectifs principaux.
Nous avons donc parlé du but du système de grille pour nous aider à établir les choses.
C'est génial.
Comprendre les quatre tailles différentes.
Ceux-ci sont grand moyen petit plus petit et puis les grilles imbriquées droite.
Et c'est ce que nous faisons ici où nous ajoutons une ligne au lieu d'une colonne et ensuite nous pouvons remplir cette ligne avec d'autres sous-colonnes dans la prochaine vidéo.