1
00:00:00,390 --> 00:00:07,550
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.

2
00:00:07,590 --> 00:00:12,070
La première est que je veux aborder les quatre tailles différentes que j'ai brièvement mentionné.

3
00:00:12,150 --> 00:00:18,530
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.

4
00:00:18,600 --> 00:00:25,820
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.

5
00:00:26,250 --> 00:00:34,100
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.

6
00:00:34,290 --> 00:00:50,810
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.

7
00:00:50,850 --> 00:00:59,400
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.

8
00:00:59,460 --> 00:01:03,140
Ils continuent à prendre 12 unités et empiler les uns sur les autres.

9
00:01:03,330 --> 00:01:08,980
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.

10
00:01:09,030 --> 00:01:13,850
À l'heure actuelle, il s'agit d'une disposition mobile qui est un accès supplémentaire.

11
00:01:14,040 --> 00:01:20,730
Ensuite, nous obtenons trop petit qui est comme une tablette disposer et puis moyen qui est juste ici.

12
00:01:20,730 --> 00:01:26,590
Ce serait sur un ordinateur portable ou une fenêtre de navigateur plus petite et puis grande que nous avons ici.

13
00:01:26,940 --> 00:01:31,870
Donc, il ne semble pas qu'il ya beaucoup de différence, sauf ici même quand nous allons entre être même grand.

14
00:01:31,980 --> 00:01:38,330
Mais il ya quatre tailles et nous pouvons spécifier ratios et proportions pour chacune de ces tailles.

15
00:01:38,460 --> 00:01:46,900
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.

16
00:01:47,130 --> 00:02:02,940
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.

17
00:02:03,000 --> 00:02:08,630
S.M. Est petite M.D. est moyenne et LG est grand, c'est ce que nous avons été en utilisant.

18
00:02:09,030 --> 00:02:14,170
Alors disons que je veux que ma mise en page reste la même au grand point d'arrêt.

19
00:02:14,340 --> 00:02:22,410
Et puis, lorsque nous passons à moyenne droite ici, je veux que ces 12 colonnes qui prennent chacun une seule unité.

20
00:02:22,800 --> 00:02:25,320
Je veux qu'ils prennent chacun deux unités à la place.

21
00:02:25,320 --> 00:02:27,670
Nous allons donc terminer par six en passant.

22
00:02:27,690 --> 00:02:29,510
Ensuite, un autre 6 ci-dessous.

23
00:02:29,820 --> 00:02:32,880
Concentrons-nous donc sur cela et simplifions les choses.

24
00:02:33,100 --> 00:02:36,360
Je vais effectivement me débarrasser de notre deuxième rangée pour l'instant.

25
00:02:36,600 --> 00:02:39,170
Donc tout ce que nous avons est ici.

26
00:02:39,210 --> 00:02:43,730
Donc, quand nous atteignons ce point d'arrêt moyen juste là, je ne veux pas que cela arrive.

27
00:02:43,740 --> 00:02:48,510
Au lieu de cela, je veux six colonnes qui vont à travers pour faire cela.

28
00:02:48,510 --> 00:02:50,740
Je viens d'ajouter dans une autre classe.

29
00:02:50,940 --> 00:02:58,120
Donc, je vais le faire à chacun et il va être moyen de colonne.

30
00:02:58,200 --> 00:03:05,600
Donc, lorsque cette grille est définie à la taille moyenne, nous voulons qu'ils prennent chacun deux unités et nous allons économiser.

31
00:03:05,640 --> 00:03:07,200
Maintenant, allons nous rafraîchir.

32
00:03:07,380 --> 00:03:09,120
Faites-le en taille réelle.

33
00:03:09,120 --> 00:03:12,380
Rien ne change parce que nous sommes à la grande taille.

34
00:03:12,570 --> 00:03:16,190
Mais maintenant, quand je passe à moyenne droite ici.

35
00:03:16,200 --> 00:03:21,380
Notez qu'ils prennent chacun deux unités maintenant et nous obtenons six en passant.

36
00:03:21,630 --> 00:03:33,480
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.

37
00:03:33,900 --> 00:03:41,040
Revenons donc à notre sublime et relancez notre vieille grille.

38
00:03:41,130 --> 00:03:47,160
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.

39
00:03:47,160 --> 00:03:53,300
Habituellement, vous travaillez avec trois ou quatre parfois six, mais 12 colonnes individuelles est assez rare.

40
00:03:53,400 --> 00:04:01,250
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.

41
00:04:01,590 --> 00:04:04,200
Donc, il commence à quatre en passant.

42
00:04:04,200 --> 00:04:05,400
Puis nous nous rétrécissons.

43
00:04:05,550 --> 00:04:13,100
Il ya un point de rupture moyen et nous sommes toujours à quatre et puis nous arrivons à la petite pause et nous allons à deux à travers.

44
00:04:13,140 --> 00:04:15,580
Et puis mobile x ou petit est un.

45
00:04:15,990 --> 00:04:20,530
Donc, c'est ce que nous allons essayer de recréer pas le contenu de la structure.

46
00:04:20,790 --> 00:04:22,080
Nous reviendrons donc ici.

47
00:04:22,650 --> 00:04:25,740
Et nous voulons commencer par quatre passer à travers.

48
00:04:25,740 --> 00:04:31,860
Ce qui signifie que chacun prend trois unités et ensuite nous pouvons changer le texte ici.

49
00:04:31,860 --> 00:04:35,510
Et disons simplement à ou date.

50
00:04:35,610 --> 00:04:46,320
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.

51
00:04:46,320 --> 00:04:48,720
Et la seule différence est vraiment le contenu réel.

52
00:04:48,720 --> 00:05:00,190
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.

53
00:05:00,600 --> 00:05:01,200
D'accord.

54
00:05:01,200 --> 00:05:03,790
Donc, le point de rupture suivant est quand nous arrivons à moyen.

55
00:05:03,960 --> 00:05:05,840
Il reste à quatre.

56
00:05:06,300 --> 00:05:15,440
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.

57
00:05:15,600 --> 00:05:34,190
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.

58
00:05:34,310 --> 00:05:49,140
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.

59
00:05:49,400 --> 00:05:57,070
Ainsi, la grande taille de chacun de ces prend jusqu'à 25 pour cent trois unités sur 12 à la taille moyenne.

60
00:05:57,120 --> 00:05:57,920
Même chose.

61
00:05:58,010 --> 00:06:05,480
Ils prennent jusqu'à 25 pour cent, puis à la petite taille qui est pour les comprimés qu'ils prennent chacun chacun 50 pour cent.

62
00:06:05,480 --> 00:06:12,980
Donc, nous allons rafraîchir chaque prendre trois minutes, puis trois unités, puis nous avons frappé petit.

63
00:06:13,040 --> 00:06:17,880
Et maintenant, ils prennent chacun six unités et ensuite nous avons eu des petits plus.

64
00:06:17,940 --> 00:06:21,620
Ensuite, ils prennent automatiquement les 12 unités, c'est ce que nous voulons.

65
00:06:21,810 --> 00:06:27,350
Vous pouvez voir quand nous frappons petit nous voulons qu'ils prennent une unité traversant.

66
00:06:27,380 --> 00:06:28,010
D'accord.

67
00:06:28,010 --> 00:06:33,240
Nous avons donc là-bas un petit changement que nous pouvons faire si nous revenons au sublime.

68
00:06:33,770 --> 00:06:39,560
Vous verrez que nous spécifions ces trois unités deux fois pour le grand et le moyen.

69
00:06:39,560 --> 00:06:54,320
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.

70
00:06:54,440 --> 00:06:55,880
Donc, il fonctionne de la même manière.

71
00:06:55,880 --> 00:06:56,650
Rien n'a changé.

72
00:06:56,660 --> 00:07:02,420
J'ai déjà rafraîchi semble identique notre point d'arrêt moyen est toujours là et nos petits travaux.

73
00:07:02,420 --> 00:07:04,800
Donc nous n'avons pas à le spécifier à deux reprises.

74
00:07:05,300 --> 00:07:10,460
Donc laissez-moi venir N.Z. Nous nous sommes débarrassés de cela et cela fonctionne exactement de la même manière.

75
00:07:10,520 --> 00:07:14,990
Et en fait si nous jetons un coup d'oeil nous allons au site Web.

76
00:07:15,000 --> 00:07:19,770
Je parie que si nous inspectons chacun de ceux-ci vous verrez là que nous allons.

77
00:07:19,780 --> 00:07:22,590
Colonne petit six colonne moyenne trois.

78
00:07:22,790 --> 00:07:26,990
Exactement ce que nous avions maintenant que nous avons couvert ces quatre tailles différentes.

79
00:07:27,070 --> 00:07:30,710
Espérons que vous pouvez voir comment polyvalent et utile le système de grille peut être.

80
00:07:30,750 --> 00:07:31,520
Retournons.

81
00:07:31,740 --> 00:07:33,960
Et maintenant, je vais aborder les réseaux de nidification.

82
00:07:34,310 --> 00:07:42,710
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.

83
00:07:42,800 --> 00:07:47,340
Je peux réellement aller et ajouter dans une autre rangée à l'intérieur de là.

84
00:07:47,370 --> 00:07:49,230
Donc la classe est égale à la rangée.

85
00:07:49,740 --> 00:08:09,100
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é.

86
00:08:09,360 --> 00:08:18,170
Changeons la première moitié et l'autre moitié et nous allons sauver et nous allons leur donner un rose classique.

87
00:08:18,200 --> 00:08:24,000
Donc, ce que nous avons fait maintenant, c'est que nous allons faire trois ou quatre traverser.

88
00:08:24,000 --> 00:08:38,530
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 .

89
00:08:38,960 --> 00:08:41,770
Là vous allez et le rendre encore plus évident.

90
00:08:41,780 --> 00:08:43,280
Laissez-moi leur donner une autre classe.

91
00:08:43,400 --> 00:08:45,170
Appelons cela orange.

92
00:08:45,370 --> 00:08:46,940
N'existe pas encore.

93
00:08:46,940 --> 00:09:04,870
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.

94
00:09:05,540 --> 00:09:10,530
Refresh vous pouvez voir maintenant nous avons toujours ces quatre choses traverser.

95
00:09:10,520 --> 00:09:19,160
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.

96
00:09:19,160 --> 00:09:22,520
Vous ne pouvez pas commencer à faire cela où vous avez une colonne au lieu d'une colonne.

97
00:09:22,520 --> 00:09:23,980
Il doit y avoir une rangée.

98
00:09:24,260 --> 00:09:25,520
Et faisons un de plus.

99
00:09:25,910 --> 00:09:31,090
Mettons ce dernier ici en six petits morceaux à l'intérieur.

100
00:09:31,500 --> 00:09:39,770
Donc, nous devons ajouter une ligne à l'intérieur de cette classe div égale ligne au lieu de là.

101
00:09:39,770 --> 00:09:50,310
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.

102
00:09:50,310 --> 00:09:59,370
Et nous voulons six, puis nous allons sur chacun d'eux et ajoutons dans cette classe orange juste pour que nous puissions les voir.

103
00:10:00,440 --> 00:10:01,150
D'ACCORD.

104
00:10:01,640 --> 00:10:06,540
Donc, nous avons quatre grandes colonnes à travers le premier nous avons divisé en deux.

105
00:10:06,650 --> 00:10:12,710
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.

106
00:10:12,920 --> 00:10:14,200
Alors allons faire ça.

107
00:10:14,270 --> 00:10:20,100
Ou plutôt c'est en fait juste donner un avec ou une hauteur à la classe orange.

108
00:10:20,100 --> 00:10:22,950
Faisons-les chaque 50 pixels.

109
00:10:22,940 --> 00:10:29,960
Et si je rafraîchir vous voyez que maintenant tout ce qui a orange que la classe orange prend 50 pixels de hauteur.

110
00:10:30,260 --> 00:10:40,880
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.

111
00:10:40,880 --> 00:10:43,700
Ce sont donc tous les éléments importants du système de grille.

112
00:10:43,860 --> 00:10:46,420
En bref, nous avons 12 unités par rangée.

113
00:10:46,560 --> 00:10:48,300
Vous les divisez comme vous voulez.

114
00:10:48,360 --> 00:10:58,900
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.

115
00:10:59,000 --> 00:11:04,870
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.

116
00:11:04,880 --> 00:11:12,830
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.

117
00:11:12,840 --> 00:11:18,630
Il s'agit de la disposition commune sur mobile où vous n'avez pas plusieurs morceaux de contenu dans la même rangée.

118
00:11:19,080 --> 00:11:19,540
D'ACCORD.

119
00:11:19,700 --> 00:11:20,990
Revenons au sublime.

120
00:11:21,090 --> 00:11:23,290
Assurez-vous que j'ai parlé des trois objectifs principaux.

121
00:11:23,610 --> 00:11:28,160
Nous avons donc parlé du but du système de grille pour nous aider à établir les choses.

122
00:11:28,160 --> 00:11:29,270
C'est génial.

123
00:11:29,660 --> 00:11:31,690
Comprendre les quatre tailles différentes.

124
00:11:31,700 --> 00:11:36,740
Ceux-ci sont grand moyen petit plus petit et puis les grilles imbriquées droite.

125
00:11:37,040 --> 00:11:45,790
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.