1 00:00:00,240 --> 00:00:04,170 Bienvenue dans cette leçon, nous allons continuer à travailler sur votre camp. 2 00:00:04,170 --> 00:00:06,070 Nous avons déjà fait la mise en place initiale. 3 00:00:06,180 --> 00:00:13,990 Nous avons fait quelques layouts de base ajouté l'en-tête et le pied de page Parshall's nous avons ajouté bootstrap et nous avons ajouté la fonctionnalité de la création de nouveaux terrains de camping. 4 00:00:14,010 --> 00:00:17,550 Maintenant, nous allons aller dans le style de la page camping en utilisant bootstrap. 5 00:00:17,550 --> 00:00:18,600 Alors, commençons. 6 00:00:18,600 --> 00:00:21,230 La première chose que je vais faire est de s'assurer que mes serveurs sont en cours d'exécution. 7 00:00:22,000 --> 00:00:25,260 Et jetez un oeil à ce que nous avons maintenant. 8 00:00:25,350 --> 00:00:26,740 Certainement un peu décevant. 9 00:00:26,850 --> 00:00:28,110 J'ai donc deux objectifs principaux. 10 00:00:28,170 --> 00:00:34,150 Le premier est que nous voulons un meilleur en-tête dans le titre ici, donc cela devrait paraître plus agréable. 11 00:00:34,170 --> 00:00:43,000 Nous allons utiliser ce qui est appelé un jumbotron dans Bootstrap et puis aussi les terrains de camping la liste des terrains de camping ne devrait pas simplement afficher verticalement comme ça. 12 00:00:43,020 --> 00:00:48,200 Au lieu de cela, nous voulons une grille de plus petites images traverser et que la grille doit être sensible. 13 00:00:48,480 --> 00:00:52,850 Commençons par le premier qui fait que ce texte de titre paraisse un peu plus agréable. 14 00:00:53,100 --> 00:00:58,440 Donc, je vais ouvrir des terrains de camping qui oui je vais juste travailler ici. 15 00:00:58,590 --> 00:01:06,390 Je vais donc redimensionner un petit peu parce que nous allons écrire un peu de courrier HD et nous ne ferons rien avec un terminal du tout. 16 00:01:06,440 --> 00:01:12,510 Donc, pour travailler sur l'en-tête, nous allons utiliser une balise d'en-tête que nous n'avons pas vu auparavant. 17 00:01:12,510 --> 00:01:15,740 Fonctionnellement il fonctionne exactement de la même manière que quelque chose comme un div. 18 00:01:15,780 --> 00:01:20,080 La seule différence est que cela a un peu de sens sémantique. 19 00:01:20,400 --> 00:01:25,850 En utilisant l'en-tête plutôt que juste un div arbitraire, mais il n'a pas vraiment d'importance, il est juste un conteneur. 20 00:01:26,010 --> 00:01:42,540 Et nous allons lui donner une classe de jumbotron et puis à l'intérieur de celui-ci, nous allons ajouter dans bien juste copier ce H-1 en fait et nous allons juste laisser à cela et économiser Frigo et rafraîchir notre page. 21 00:01:42,570 --> 00:01:44,890 Nous avons maintenant ce qu'on appelle le Jumbotron. 22 00:01:45,130 --> 00:01:46,280 Ce n'est toujours pas super. 23 00:01:46,290 --> 00:01:50,720 La prochaine chose que nous devrions faire est de faire tout à l'intérieur d'un conteneur bootstrap. 24 00:01:51,030 --> 00:02:01,260 Donc, tout ce que nous voyons ici tout cela, je vais indenter et je vais ajouter un div avec classe égale conteneur juste comme ça. 25 00:02:01,460 --> 00:02:07,670 Et puis nous allons coller tout à l'intérieur de cela et cela va ajouter quelques speccing pour nous sur les côtés. 26 00:02:07,830 --> 00:02:08,710 Rafraîchir. 27 00:02:08,880 --> 00:02:13,800 Vous pouvez voir que nous n'avons plus les choses contre le côté gauche ici. 28 00:02:13,830 --> 00:02:20,330 Nous avons un peu d'espace et notre JumboTron est un peu plus proche et finira par avoir une barre naff apparaissent. 29 00:02:20,520 --> 00:02:22,890 Donc, ce sera un peu plus agréable aussi. 30 00:02:22,890 --> 00:02:25,530 Pour l'instant nous avons juste le Jumbotron. 31 00:02:25,590 --> 00:02:27,570 Maintenant, changeons le texte lui-même. 32 00:02:27,600 --> 00:02:34,530 Donc plutôt que ce n'est la page des terrains de camping, mettons un message de bienvenue Bienvenue au camp. 33 00:02:34,710 --> 00:02:56,550 N'hésitez pas à mettre le contenu que vous voulez et je vais également ajouter dans un paragraphe dans le paragraphe, je vais ajouter un peu de sorte de slogan et je vais juste dire de voir notre main et ramasser des terrains de camping de partout dans le monde. 34 00:02:56,670 --> 00:02:58,940 Quelque chose comme ça n'a pas d'importance. 35 00:02:58,950 --> 00:03:00,850 Nous allons enregistrer rafraîchir. 36 00:03:01,170 --> 00:03:06,650 OK alors maintenant nous avons un petit tag line et la dernière chose que nous voulons faire est de prendre soin de ce lien. 37 00:03:06,690 --> 00:03:08,280 Le lien ajouter un nouveau terrain de camping. 38 00:03:08,580 --> 00:03:12,640 Donc, je vais copier cela et aussi le mettre dans le Jumbotron. 39 00:03:12,650 --> 00:03:15,070 Cependant je vais le faire en un bouton. 40 00:03:15,150 --> 00:03:24,780 Un des boutons d'amorçage afin de faire cela ou d'ajouter un paragraphe d'abord, puis mettre l'étiquette d'ancrage à l'intérieur de celui. 41 00:03:24,780 --> 00:03:26,680 Et je fais ça juste pour l'espacement. 42 00:03:26,730 --> 00:03:43,320 Vous voulez que ce soit sur sa propre ligne et puis je vais donner le bouton classe plusieurs classes de PTEN ETN primaire pour la couleur et entre tiret grand comme ça et sauver. 43 00:03:43,330 --> 00:03:45,420 Maintenant, nous avons eu un nouveau bouton de camping. 44 00:03:45,510 --> 00:03:49,930 Nous cliquons sur elle et elle nous amène à la forme qui est complètement stylé. 45 00:03:50,220 --> 00:03:54,050 Une chose mineure est que si je redimensionner cette fenêtre ici. 46 00:03:55,320 --> 00:04:01,740 Remarquez comment notre texte va droit contre le bord du Jumbotron qui n'est pas grand. 47 00:04:01,860 --> 00:04:24,330 Nous avons un certain espace ici et ils veulent garder cet espacement ce que nous aurons besoin de faire est juste ajouter un autre conteneur à l'intérieur du Jumbotron donc div classe égale conteneur et puis ici à l'intérieur du Jumbotron avant la fin à la fermeture div et puis juste un retrait tout. 48 00:04:24,420 --> 00:04:26,040 Et maintenant si nous rafraîchissons. 49 00:04:26,210 --> 00:04:30,860 Elle avait l'air la même, mais quand on la rétrécit, nous avons maintenant un peu d'espace là-bas. 50 00:04:31,230 --> 00:04:33,790 OK, c'est la partie en-tête. 51 00:04:33,840 --> 00:04:37,680 Maintenant, nous voulons travailler sur cette grille d'images et je serai à l'avant avec vous. 52 00:04:37,680 --> 00:04:39,770 C'est certainement un peu plus de travail. 53 00:04:40,020 --> 00:04:53,520 OK nous allons commencer sur cette grille et nous allons commencer par créer une ligne de sorte que la classe div égale ligne juste comme ça et je vais commencer avec juste un petit message ici. 54 00:04:53,580 --> 00:05:15,790 Donc, nous allons ajouter une classe div égale et je vais faire en sorte que cela prenne toute la largeur et nous allons simplement avoir un message ici et H-3 qui dit que nos sites les plus populaires sont les terrains de camping que vous connaissez Ne ressemblera pas beaucoup. 55 00:05:15,790 --> 00:05:25,470 Pour l'instant, revenons en arrière et commençons par ajouter en ligne de classe div que nous avons besoin de tout dans notre école primaire dans une rangée. 56 00:05:25,560 --> 00:05:28,820 C'est une classe div égale ligne juste comme ça. 57 00:05:28,970 --> 00:05:43,380 Et maintenant, nous devons en parler pour chaque boucle, car ce que nous voulons faire, c'est que, au lieu de notre grille à l'intérieur de la ligne pour chaque terrain de camping, nous voulons faire un div qui a une colonne et une colonne avec la grille d'amorçage. 58 00:05:43,420 --> 00:05:53,580 Donc, je vais le faire maintenant où je vais mettre tout ce code pour chaque boucle va à indentation juste comme ça. 59 00:05:53,830 --> 00:05:57,180 Et puis nous avons besoin de notre tag div de fermeture ici. 60 00:05:57,490 --> 00:06:01,500 Donc c'est pour la rangée classique et c'est pour le conteneur. 61 00:06:02,020 --> 00:06:02,470 D'ACCORD. 62 00:06:02,730 --> 00:06:28,270 Donc ative classe de rang et plutôt que de laisser ce contenu comme div et ici avec un H pour une image, nous aurons encore une image, mais nous allons changer cette div de sorte qu'il a une classe de colonne moyenne trois dans la colonne petite 6 et c'est juste pour le rendre sensible afin que nous obtenions des images plus grandes lorsque la taille de l'écran est plus grande. 63 00:06:28,300 --> 00:06:36,400 Et puis, quand on le rétrécit, il descendra à seulement deux images par rangée et il se rétrécira encore plus bas à une seule image par rangée. 64 00:06:36,610 --> 00:06:56,560 Donc à l'intérieur de ce que nous allons réellement ajouter dans un autre div et ce div va avoir une classe de vignette qui est une classe d'amorçage qui nous aidera à faire une petite carte, il fera un petit élément de grille à l'intérieur de cette vignette ajoutera le Image pour commencer juste comme ça. 65 00:06:56,680 --> 00:07:02,210 Nous avons des services d'image égale au terrain de camping que vous RL Et nous allons juste laisser à cela. 66 00:07:02,230 --> 00:07:08,580 Et nous allons nous débarrasser de cela pour le moment et juste économiser et nous allons voir ce que nous obtenons si nous sommes frais. 67 00:07:09,280 --> 00:07:09,820 D'accord. 68 00:07:09,910 --> 00:07:11,850 Nous avons donc une grille d'images maintenant. 69 00:07:11,890 --> 00:07:14,860 Il n'y en a que trois mais nous obtenons cette grille. 70 00:07:15,220 --> 00:07:18,580 Et je vais vous montrer ce que je voulais dire en le rendant réceptif. 71 00:07:18,580 --> 00:07:25,270 Ainsi, comme un rétrécir ces Remarquez comment il se transforme en deux carrés ou deux éléments à travers l'écran. 72 00:07:25,280 --> 00:07:26,910 Rappelez-vous qu'il y a 12 unités. 73 00:07:27,040 --> 00:07:44,190 Donc ce que nous avions d'abord, nous le divisons en quatre morceaux où chacun a pris trois unités et puis quand la grille devient plus petite ici, ils prennent chacun six unités et même plus petit, il va automatiquement à un. 74 00:07:44,350 --> 00:07:49,130 Et nous n'avons pas eu à écrire que parce que le petit défaut supplémentaire est d'utiliser 12 unités. 75 00:07:49,180 --> 00:07:52,050 Nous n'avons donc pas eu à préciser cela. 76 00:07:52,090 --> 00:08:07,550 Maintenant, nous allons récupérer le titre dans ce nom de terrain de camping et plutôt que juste un âge pour que l'on fasse une autre classe d'amorçage. Une classe div équivaut à la légende juste comme ça. 77 00:08:07,780 --> 00:08:13,080 Et puis à l'intérieur il y aura un H pour le nom du terrain de camping. 78 00:08:14,070 --> 00:08:18,670 OK, nous allons enregistrer, nous allons voir à quoi il ressemble. 79 00:08:18,670 --> 00:08:19,270 Voilà. 80 00:08:19,300 --> 00:08:21,030 Nous recevons ces jolies petites cartes. 81 00:08:21,040 --> 00:08:23,700 C'est la classe de miniatures qui fait cela pour nous. 82 00:08:23,840 --> 00:08:25,030 Nous avons nos images. 83 00:08:25,210 --> 00:08:30,480 Et voyons à quoi ça ressemble si nous avons un tas d'images dans un tas d'articles. 84 00:08:30,760 --> 00:08:34,160 Donc, vous n'avez pas à le faire, mais je vais coller ici. 85 00:08:34,600 --> 00:08:36,860 Donnez-nous quelques données supplémentaires. 86 00:08:36,880 --> 00:08:38,800 Ce sera des données en double, mais c'est très bien. 87 00:08:38,940 --> 00:08:46,250 Et puis nous devons nous assurer que nous ajoutons les virgules correctes et donc virgule là et à venir là. 88 00:08:46,300 --> 00:08:49,840 Maintenant, si nous rafraîchissons Oh, nous devons redémarrer le serveur. 89 00:08:50,170 --> 00:08:52,060 Et chaque fois que nous gâchons avec l'application. 90 00:08:52,120 --> 00:08:53,330 Oui. 91 00:08:53,590 --> 00:08:58,070 Et maintenant, si nous nous rafraîchissons, il verra que nous avons un petit problème. 92 00:08:58,120 --> 00:09:00,040 Notre grille est un peu gâchée. 93 00:09:00,170 --> 00:09:03,810 Et ce qui se passe, c'est que nous avons des images qui sont de hauteurs différentes. 94 00:09:04,090 --> 00:09:07,940 Donc ce Creek Salmon est différent de ceux-ci. 95 00:09:08,410 --> 00:09:10,710 Même si la largeur est la même dans ce cas. 96 00:09:10,930 --> 00:09:16,210 Et c'est de jeter hors de la grille et il ya un moyen facile de le réparer, même si c'est un peu wonky. 97 00:09:16,270 --> 00:09:19,130 Et je vais vous montrer comment nous faisons cela au lieu de notre terrain de camping. 98 00:09:19,270 --> 00:09:19,960 Oui. 99 00:09:20,320 --> 00:09:26,980 Le jour de la rangée de la classe, je vais ajouter un attribut de style et je vais juste le faire temporairement. 100 00:09:27,010 --> 00:09:32,530 Nous allons passer à une feuille de style externe, mais je vais juste le faire en ligne pour le rendre plus facile pour vous de voir. 101 00:09:32,530 --> 00:09:37,360 Donc, nous avons mis le style d'être affichage flex et flex wrap à envelopper. 102 00:09:37,480 --> 00:09:39,900 Et ce sont deux propriétés qui vont aider notre grille. 103 00:09:39,910 --> 00:09:44,810 Donc, si j'étais frais Maintenant, nous nous retrouvons avec la grille où il est plus flexible. 104 00:09:44,860 --> 00:09:53,400 Peu importe que nous ayons des hauteurs différentes parce que maintenant la grille s'adapte Donc il ya plus d'espace entre ces deux et là c'est ici. 105 00:09:53,470 --> 00:10:02,750 Fondamentalement, il détermine le minimum d'espace nécessaire où nous pouvons avoir tout être sur sa propre ligne ensemble où nous pouvons avoir tout être aligné parfaitement. 106 00:10:02,800 --> 00:10:13,370 Et il ya un autre changement que nous pouvons faire qui est de revenir en arrière et d'ajouter dans le centre de texte qui est un bootstrap pour nous qui fera notre texte centré là. 107 00:10:13,540 --> 00:10:15,410 Et je pense que cela ressemble un peu mieux. 108 00:10:15,490 --> 00:10:20,500 Aussi une question de préférence personnelle et maintenant nous avons terminé avec la page de camping pour le moment. 109 00:10:20,620 --> 00:10:27,550 Espérons que cela vous montre comment bootstrap peut vraiment nous aider peut rendre les choses assez facile en particulier par rapport à ce faire à partir de zéro. 110 00:10:27,550 --> 00:10:31,900 Et laissez-moi juste vous montrer notre grille réactive sympathique que nous avons. 111 00:10:31,900 --> 00:10:33,260 Donc, c'est sur mobile. 112 00:10:33,310 --> 00:10:38,890 Nous obtenons cette belle mise en page jusqu'à quatre images. 113 00:10:39,160 --> 00:10:41,140 OK, donc je suis assez satisfait de la façon dont cela ressemble.