1 00:00:00,410 --> 00:00:11,310 Nous reviendrons dans cette leçon et démontrerons le système de grille d'amorçage et le système de grille est probablement la raison numéro un que les gens utilisent bootstrap les nap heures formes. 2 00:00:11,310 --> 00:00:19,290 Les boutons sont de beaux changements de style que nous pouvons faire avec bootstrap, mais le système de grille d'amorçage agira comme le squelette de notre application entière. 3 00:00:19,440 --> 00:00:23,980 C'est un moyen très simple pour nous d'ajouter de la structure et de mettre en place à notre application. 4 00:00:24,000 --> 00:00:27,480 Permettez-moi de vous montrer quelques exemples de ce que vous pouvez faire avec le système de grille. 5 00:00:27,480 --> 00:00:36,140 J'ai quelques sites ouverts de Bootstrap ex-beau le premier ici est une page de produit pour un pichet d'eau et défilement vers le bas. 6 00:00:36,240 --> 00:00:37,530 Remarquez la mise en page ici. 7 00:00:37,560 --> 00:00:50,310 Nous avons trois éléments côte à côte et puis aussi remarquer comme ils changent de taille ici, ils réduisent l'échelle et puis quand j'ai touché la taille de comprimé qu'ils empilent les uns sur les autres. 8 00:00:51,090 --> 00:00:57,270 C'est donc le système de grille d'amorçage au travail, comme c'est le cas ici où nous avons un autre effet similaire. 9 00:00:57,270 --> 00:01:02,100 Ils s'échelonnent et puis ils s'empilent sur la tablette et la taille mobile. 10 00:01:02,880 --> 00:01:04,110 Voici un autre exemple. 11 00:01:04,140 --> 00:01:10,440 C'est le musicien islandais et Olafur Arnolds et ceci est scroll down sur ce site. 12 00:01:10,560 --> 00:01:23,150 Nous avons un certain contenu qui est construit avec le système de grille ici que vous pouvez voir la disposition semblable mais ce n'est pas juste que ceci est construit avec un système de grille aussi bien. 13 00:01:23,160 --> 00:01:25,210 Ceci ici ce contenu. 14 00:01:26,100 --> 00:01:28,350 Ces dates de tournée ici. 15 00:01:28,350 --> 00:01:49,220 Fondamentalement en utilisant le système de grille, nous pouvons dire que nous voulons un certain contenu pour prendre jusqu'à 100 pour cent de l'écran, nous pouvons également l'utiliser pour dire que nous voulons chacun de ceux-ci de prendre jusqu'à 25 pour cent de la largeur de l'écran jusqu'à ce que nous touchons Le côté mobile ou la taille de la tablette pour chaque prise de 50 maintenant et puis quand nous avons touché Mobile ils prennent chacun 100 pour cent. 16 00:01:49,860 --> 00:01:50,850 Même chose ici. 17 00:01:50,850 --> 00:01:56,660 Il nous permet de diviser cela avec l'écran en morceaux et de choisir combien de morceaux nous voulons. 18 00:01:56,790 --> 00:02:00,660 Chacun de nos éléments à prendre et voici le dernier que nous avons déjà vu. 19 00:02:00,660 --> 00:02:05,670 Il est appelé créatif Tim désert défiler ici contenu similaire. 20 00:02:05,680 --> 00:02:09,530 Voici le système de grille et ici aussi. 21 00:02:09,570 --> 00:02:11,430 Donc, tout cela est fait avec le système de grille. 22 00:02:11,430 --> 00:02:15,590 Tout cela est vraiment très important. 23 00:02:15,760 --> 00:02:20,640 Il nous aide à poser les choses si facilement par rapport à ce que nous aurions à faire sans bootstrap. 24 00:02:20,670 --> 00:02:25,660 Nous allons donc utiliser le système de grille bootstraps et à peu près toutes les applications que nous faisons en utilisant bootstrap. 25 00:02:25,890 --> 00:02:27,500 Et laissez-moi vous montrer l'un d'eux. 26 00:02:27,540 --> 00:02:33,940 Il s'agit de notre application yo camp et avis que nous avons une grille de terrains de camping à travers. 27 00:02:33,960 --> 00:02:40,050 Et comme je redimensionne l'écran avis qu'ils échelle et puis nous allons à deux à travers et puis vers le bas à Mobile. 28 00:02:40,050 --> 00:02:44,480 Nous allons à un à travers et c'est un très agréable facile à utiliser la disposition mobile. 29 00:02:44,760 --> 00:02:47,840 Ce n'est donc qu'un endroit où nous utiliserons un système de grille. 30 00:02:47,850 --> 00:02:57,800 Maintenant, commençons à écrire un code en utilisant le système de grille pour plein écran cette fenêtre et revenir en arrière pour obtenir dotcom bootstrap sous l'onglet évalué. 31 00:02:58,050 --> 00:03:00,850 Vous pouvez cliquer sur le système de grille. 32 00:03:00,850 --> 00:03:07,300 Il y a un peu du système de grille, mais je vais commencer par signaler un seul chiffre ici 12. 33 00:03:07,470 --> 00:03:09,890 C'est vraiment important pour la façon dont fonctionne le système de grille. 34 00:03:09,900 --> 00:03:21,150 Donc, chaque conteneur et bootstrap peut être divisé en 12 colonnes différentes et ensuite en utilisant le système de grille, nous pouvons choisir combien de ces 12 unités de chaque élément devrait prendre. 35 00:03:21,150 --> 00:03:27,050 Donc, dans ce cas, il semble qu'ils ont quelque chose de prendre environ 10 sur 12 unités. 36 00:03:27,060 --> 00:03:40,320 Et puis ici, deux des 12 unités ou peut-être neuf et 3, mais ils ont un ratio où ils ont plus de ces 12 sur le côté gauche et puis une petite fraction sur les 12 sur le côté droit. 37 00:03:40,770 --> 00:03:46,510 Donc, si nous retournons au camp ici, c'est notre conteneur ici. 38 00:03:46,890 --> 00:03:51,670 Et chacun de ces sur 12 unités chacune prend trois unités. 39 00:03:51,810 --> 00:03:56,850 Donc nous finissons avec quatre colonnes égales et puis nous le rétrécit ici. 40 00:03:56,880 --> 00:04:00,040 Maintenant, ils prennent chacun six unités sur 12. 41 00:04:00,240 --> 00:04:02,840 Encore une fois, le chiffre 12 est très important. 42 00:04:02,850 --> 00:04:03,660 Maintenant, allons à droite. 43 00:04:03,660 --> 00:04:05,130 Notre première grille. 44 00:04:05,250 --> 00:04:14,640 Donc, j'ai un fichier fait grille h t m l il est vide à l'exception des bootstraps le fichier SS et pour commencer, nous devons définir un conteneur. 45 00:04:14,860 --> 00:04:18,180 Chaque fois que nous utilisons une grille Boucek, il doit être à l'intérieur d'un conteneur. 46 00:04:18,210 --> 00:04:22,230 Donc la classe égale le conteneur. 47 00:04:22,290 --> 00:04:29,190 Et la première chose que nous devons faire est de trouver un autre div avec la classe égale à la ligne au lieu de chaque ligne. 48 00:04:29,220 --> 00:04:31,100 Nous avons 12 unités à choisir. 49 00:04:31,350 --> 00:04:40,730 Donc, ce que nous allons commencer par faire est juste faire une division de 50 50 nous aurons 1 div qui prend 6 sur 12 et puis un autre div qui occupe 6 sur 12. 50 00:04:41,070 --> 00:04:42,050 Alors, faisons-le maintenant. 51 00:04:42,120 --> 00:04:48,330 Nous allons ajouter un div et puis je vais également ajouter ma deuxième division et en ce moment, il est juste deux appareils sont vides. 52 00:04:48,330 --> 00:04:49,430 Vous n'allez pas travailler. 53 00:04:49,650 --> 00:05:00,300 Mais ce que je vais faire est d'ajouter une classe à la première et cela va regarder une colonne peu étrange Un grand six et nous ferons la même chose ici. 54 00:05:00,300 --> 00:05:03,520 La classe est égale à la colonne six. 55 00:05:03,630 --> 00:05:05,200 Ensuite, nous ajouterons du contenu ici. 56 00:05:05,210 --> 00:05:10,880 Ils diront seulement six grands colonnes. 57 00:05:10,950 --> 00:05:12,140 Même chose ici. 58 00:05:12,210 --> 00:05:18,950 Et comme je fais que nous allons sauver et nous ne verrons pas vraiment beaucoup, nous ne voyons pas la grille elle-même. 59 00:05:19,020 --> 00:05:24,300 Donc, pour rendre plus clair, je vais définir une classe ici au lieu d'une balise de style. 60 00:05:24,300 --> 00:05:26,670 Ce que je vais faire, c'est définir une classe. 61 00:05:26,730 --> 00:05:31,350 Je vais juste appeler rose et je vais appliquer cette classe ou deux divs afin que nous puissions les voir. 62 00:05:31,490 --> 00:05:32,820 Donc en ce moment ils sont juste blancs. 63 00:05:32,820 --> 00:05:33,660 Pas de frontière. 64 00:05:33,750 --> 00:05:34,840 Juste un peu de texte. 65 00:05:35,010 --> 00:05:36,050 Mais si nous ajoutons cela. 66 00:05:36,180 --> 00:05:37,010 Si rose. 67 00:05:37,140 --> 00:05:49,950 Et puis nous voulons que l'arrière-plan soit rose et nous ferons une bordure pourpre un pixel pourpre solide et ensuite nous appliquerons la classe rose à ces deux divs. 68 00:05:49,950 --> 00:05:52,660 Chacun prend six unités. 69 00:05:52,680 --> 00:05:54,570 Maintenant nous revenons et nous rafraîchissons. 70 00:05:54,900 --> 00:05:55,580 Voilà. 71 00:05:55,800 --> 00:05:59,640 Vous pouvez voir que nous avons deux divs qui occupent exactement la moitié du conteneur. 72 00:05:59,670 --> 00:06:01,930 Le conteneur commence ici et ici. 73 00:06:02,460 --> 00:06:04,530 Et nous avons divisé en deux. 74 00:06:04,620 --> 00:06:10,110 Alors maintenant, nous pouvons revenir en arrière et jouer un peu plus et essayons d'ajouter dans une troisième colonne. 75 00:06:10,410 --> 00:06:16,150 Et cette fois fera la colonne du milieu huit unités, puis la gauche et la droite sera de deux. 76 00:06:16,170 --> 00:06:21,270 Alors finissez et je vais changer ces chiffres ici. 77 00:06:21,280 --> 00:06:22,200 Voilà. 78 00:06:22,200 --> 00:06:30,900 Nous allons finir avec une belle colonne centrée au milieu, puis deux petites colonnes à gauche et à droite que nous pourrions utiliser pour une barre latérale ou quelque chose. 79 00:06:30,900 --> 00:06:34,860 C'est donc un concept très fondamental qui sous-tend tout le système de grille d'amorçage. 80 00:06:34,920 --> 00:06:42,210 Nous avons 12 unités qui traversent n'importe quel conteneur dans lequel nous travaillons et nous pouvons désigner ces 12 unités de la façon que nous voulons. 81 00:06:42,240 --> 00:06:52,170 Donc, nous pouvions faire 12 colonnes individuelles de chaque colonne, une grande et nous pourrions faire 12 fois comme ça. 82 00:06:52,290 --> 00:06:53,600 Assurez-vous que je ne perds pas de compte. 83 00:06:54,090 --> 00:06:54,670 Voilà. 84 00:06:54,690 --> 00:06:56,620 Et puis nous allons nous débarrasser de ces deux pour l'instant. 85 00:06:56,820 --> 00:07:01,630 Et si j'étais frais, vous verrez dans une rangée que nous avons 12 colonnes de même taille. 86 00:07:01,650 --> 00:07:07,570 Chacun prend une unité et ensuite je vais vous montrer que nous pouvons ajouter d'autres lignes. 87 00:07:07,740 --> 00:07:14,390 Donc, faisons que maintenant div classe égale ligne et il va juste au-dessous de cette première ligne que nous avons. 88 00:07:14,730 --> 00:07:18,870 Donc à l'intérieur de celui-ci nous allons faire div. 89 00:07:19,020 --> 00:07:23,350 La classe égale la colonne Dasch grande et faisons quatre. 90 00:07:23,370 --> 00:07:27,280 Nous allons donc le diviser en trois unités de même taille. 91 00:07:27,360 --> 00:07:36,260 Alors la colonne arge pour son aller juste comme ça. 92 00:07:36,420 --> 00:07:49,260 Et allons jeter un coup d'oeil maintenant et vous pouvez voir que nous n'avons pas appliqué la classe rose, mais nous avons trois colonnes de même taille qui tombent en dessous des 12 colonnes de taille égale ont été créés. 93 00:07:49,470 --> 00:07:53,240 Donc nous pourrions ajouter dans la classe rose juste pour le rendre plus facile de voir ce qui se passe. 94 00:07:53,940 --> 00:07:54,800 Et voilà. 95 00:07:55,140 --> 00:07:57,350 Donc ce n'est qu'un exemple simple. 96 00:07:57,420 --> 00:08:01,470 Vous n'auriez pas ces boîtes roses très probablement sur notre site. 97 00:08:01,710 --> 00:08:08,760 Mais comme vous pouvez le voir ici, nous avons une grille où nous avons des lignes et chaque ligne a quatre colonnes à travers. 98 00:08:08,760 --> 00:08:15,830 Chacun est de trois unités de large ou ici sur ce site créatif Tim. 99 00:08:15,900 --> 00:08:19,830 Nous avons trois colonnes qui traversent chacune est de quatre unités de large. 100 00:08:20,070 --> 00:08:20,900 Même chose ici. 101 00:08:20,900 --> 00:08:23,860 Trois colonnes traversent ici. 102 00:08:23,910 --> 00:08:24,960 Nous avons quatre colonnes. 103 00:08:24,960 --> 00:08:26,840 Chacun a trois unités de large. 104 00:08:27,390 --> 00:08:30,650 Donc, c'est très très fondamental de la grille dans la prochaine vidéo. 105 00:08:30,660 --> 00:08:35,850 Nous allons parler de la façon de rendre la grille réactive et ont des mises en page différentes à différentes tailles. 106 00:08:35,850 --> 00:08:38,230 En ce moment nous avons travaillé avec la colonne grand. 107 00:08:38,250 --> 00:08:52,290 J'ai expliqué avec un grand moyen et il ya trois autres tailles et nous allons voir ceux de la prochaine vidéo et nous allons aussi voir comment nous pouvons écrire des grilles imbriquées où nous pouvons ajouter une autre ligne à l'intérieur de l'une de ces colonnes et diviser En 12 morceaux supplémentaires.