1 00:00:00,310 --> 00:00:04,590 Bienvenue à revenir dans cette leçon, nous allons nous concentrer sur le style de la page de spectacle. 2 00:00:04,620 --> 00:00:07,080 Donc maintenant notre page de spectacle ressemble à ceci. 3 00:00:07,230 --> 00:00:10,710 Nous avons une petite barre de naff ici avec les boutons qui ne font rien. 4 00:00:10,710 --> 00:00:12,910 Nous avons un H-1 avec le nom du terrain de camping. 5 00:00:13,190 --> 00:00:19,290 Et nous avons une image et une description et nous avons un bouton pour ajouter un nouveau commentaire et ensuite tous les commentaires sont affichés. 6 00:00:19,410 --> 00:00:21,900 Chacun un petit paragraphe. 7 00:00:21,900 --> 00:00:25,230 Donc, notre objectif ici est de le faire ressembler un peu plus comme ceci. 8 00:00:25,230 --> 00:00:27,190 J'ai donc une barre latérale ici. 9 00:00:27,270 --> 00:00:34,250 Nous n'allons pas avoir la carte tout de suite, mais nous allons faire place à la carte et nous aurons notre contenu principal avec la description. 10 00:00:34,380 --> 00:00:41,350 Certains texte le titre que nous n'allons pas faire les évaluations encore, mais nous aurons également une liste d'examens qui ressemblera à cela. 11 00:00:41,430 --> 00:00:45,360 Leur propre petit conteneur là-bas, je vais avoir un petit bouton pour lever un peu. 12 00:00:45,360 --> 00:00:47,240 En général, il est un peu plus de style. 13 00:00:47,310 --> 00:00:50,210 Nous pouvons ajouter ceci et cela indique combien d'examens ont été laissés. 14 00:00:50,280 --> 00:00:51,540 C'est ce que nous visons. 15 00:00:51,720 --> 00:00:55,170 Et pour commencer, nous allons nous concentrer uniquement sur la grille d'amorçage. 16 00:00:55,350 --> 00:00:58,500 N'oubliez pas que la grille d'amorçage est de 12 unités. 17 00:00:58,560 --> 00:01:05,500 Nous allons désigner trois de ces 12 pour cette petite barre latérale et nous allons ajouter neuf pour le contenu principal. 18 00:01:05,760 --> 00:01:10,550 Avant de commencer à changer quoi que ce soit, je tiens à souligner que je travaille dans v 5 maintenant. 19 00:01:10,680 --> 00:01:13,710 Donc, si vous voulez suivre tous ces changements seront dans V 5. 20 00:01:13,800 --> 00:01:17,280 Et la raison pour laquelle je fais cela, c'est que nous allons devoir faire une feuille de style personnalisée. 21 00:01:17,340 --> 00:01:21,910 Nous allons devoir servir l'annuaire public et quelques autres choses qui sont des changements substantiels. 22 00:01:22,020 --> 00:01:24,020 Je voulais donc en faire une version distincte. 23 00:01:24,270 --> 00:01:30,020 Mais avant de le faire, la première chose que nous allons faire est d'ajouter un conteneur autour de tout ce conteneur bootstrap. 24 00:01:30,150 --> 00:01:40,290 Donc, montrer que E.J. Va ajouter un div avec la classe le conteneur juste comme cela et nous mettrons tout à l'intérieur de cela. 25 00:01:40,290 --> 00:01:45,270 Et je vais commencer par ajouter la barre latérale dans et nous allons simplement le remplir avec des données factices comme nous l'avons ici. 26 00:01:45,660 --> 00:02:00,920 Donc, DIVX et cela doit être classe égale pro et dans cette rangée, nous allons avoir un autre div où une classe est colonne moyenne trois juste comme ça. 27 00:02:01,080 --> 00:02:07,670 Et puis à l'intérieur d'ici, nous allons ajouter un paragraphe et nous allons obtenir ce texte qui dit Joachim. 28 00:02:08,460 --> 00:02:17,640 Donc, c'est un paragraphe où la classe est dirigée et ensuite nous allons vous mettre au camp pour l'instant, nous allons changer cela éventuellement. 29 00:02:17,640 --> 00:02:34,670 Mais yeah camp et puis pour ajouter ces petits éléments de liste, nous allons faire un div avec la classe est groupe de tiret de liste et puis ici nous allons ajouter un groupe d'alliés dans chaque allié a une classe d'élément de groupe de liste. 30 00:02:35,610 --> 00:02:44,530 Et à l'intérieur nous allons simplement ajouter des données fictives et nous allons simplement appeler info 1 et puis je vais dupliquer cette info à info 3. 31 00:02:44,610 --> 00:02:46,340 Et puis voyons ce que cela ressemble pour l'instant. 32 00:02:46,500 --> 00:02:52,480 Donc, pour rafraîchir la page, nous avons une barre latérale ici et je vais faire un de ces éléments sélectionnés pour démarrer. 33 00:02:52,830 --> 00:02:55,480 Et tout ce que nous avons à faire est d'ajouter un droit actif là-bas. 34 00:02:55,650 --> 00:02:58,900 Si nous sommes frais Nous voyons maintenant que l'un d'eux est actif. 35 00:02:59,460 --> 00:03:07,680 Et c'est vraiment juste un espace réservé pour avoir quelque chose là donc nous n'avons pas beaucoup d'espaces mais nous ajouterons de nouveau des données réelles là et une carte éventuellement. 36 00:03:07,770 --> 00:03:14,590 Et juste pour le signaler la carte ira juste ici à l'intérieur de ce milieu trois colonne éventuellement mais pas tout de suite. 37 00:03:14,940 --> 00:03:16,560 OK, c'est une barre latérale. 38 00:03:16,560 --> 00:03:19,050 Maintenant, nous allons ajouter dans le contenu principal. 39 00:03:19,290 --> 00:03:28,670 Donc nous avons besoin d'une autre colonne et celle-ci est le support de colonne de classe 9. 40 00:03:29,130 --> 00:03:41,820 Et au lieu de là, nous avons besoin d'avoir le H-1, nous avons besoin d'avoir l'image, mais avant tout ce que vous remarquerez, il est réellement tous dans une de ces vignettes, tout comme nous avons sur la page d'accueil. 41 00:03:41,940 --> 00:03:44,150 Chacune d'elles est une vignette. 42 00:03:44,190 --> 00:03:50,160 Nous allons faire la même chose autour de l'image entière dans le titre et les commentaires et tout cela. 43 00:03:50,220 --> 00:03:56,930 Donc, nous allons ajouter un div et que div aura classe égale thumbnail. 44 00:03:58,110 --> 00:04:06,140 Et puis à l'intérieur de ce que nous allons ajouter l'image et je vais encore l'image que nous avons déjà écrit et juste le placer là. 45 00:04:06,180 --> 00:04:08,260 Ce sera donc notre image de terrain de camping. 46 00:04:08,490 --> 00:04:19,500 Et puis nous voulons aussi ajouter une classe à ce que bootstrapped nous donne qui est l'image Dasch réactive. 47 00:04:19,560 --> 00:04:20,420 Voilà. 48 00:04:20,490 --> 00:04:23,270 Sauf que. 49 00:04:23,400 --> 00:04:29,570 Et si nous jetons un coup d'oeil à ce que nous avons maintenant et rafraîchir, nous avons au moins l'image et le contenu au bon endroit. 50 00:04:29,610 --> 00:04:33,280 Nous avons un problème là où cela ne se pose pas, mais avec ce que nous voulons. 51 00:04:33,320 --> 00:04:38,660 Je veux que cela passe tout le chemin à travers et nous allons devoir manipuler cela avec quelques cs personnalisés à la fin. 52 00:04:38,970 --> 00:04:46,360 Et maintenant nous allons revenir en arrière et ajouter ceci ici où nous avons le nom du terrain de camping et puis le prix par nuit que nous n'avons pas réellement dans la base de données. 53 00:04:46,440 --> 00:04:47,830 Alors nous allons juste hardcoded. 54 00:04:48,150 --> 00:04:49,400 Alors, faisons-le maintenant. 55 00:04:49,860 --> 00:04:57,250 Et c'est un autre div et celui-ci a une classe de tiret plein de légende. 56 00:04:57,570 --> 00:05:01,190 Et puis à l'intérieur de là, nous allons ajouter un H pour. 57 00:05:01,620 --> 00:05:09,540 Et nous allons tirer sur ce à droite et nous faisons des égaux de classe tirez tiret droit et puis tout ce que nous mettons ici sera le prix. 58 00:05:09,750 --> 00:05:15,300 Et je vais juste commencer avec 9 $ la nuit encore ce sera à venir de la base de données éventuellement. 59 00:05:15,540 --> 00:05:25,610 Si nous sommes frais Maintenant, nous obtenons 9 $ la nuit sur le côté droit et puis nous voulons obtenir le nom du terrain de camping que je vais simplement copier ici sur le côté gauche. 60 00:05:25,650 --> 00:05:45,460 Donc, nous allons le mettre juste en dessous et si nous n'ajoutons pas la droite de la traction va automatiquement aller à gauche, même si c'est plus grand que ce que j'avais en tête et je vais le transformer en un plus petit H pour et je vais Pour ajouter une balise d'ancrage à l'intérieur de là juste comme ça et mettre le nom du terrain de camping dans la balise d'ancrage. 61 00:05:46,500 --> 00:05:50,370 Et l'idée derrière cela est que finalement je reviens. 62 00:05:50,380 --> 00:05:56,040 Cela devrait être un lien vers le terrain de camping réelle ou la page Service de parc où nous pouvons aller réserver quelque chose. 63 00:05:56,130 --> 00:05:58,050 Pour l'instant, c'est juste le lien vers nulle part. 64 00:05:58,410 --> 00:05:59,020 D'ACCORD. 65 00:05:59,160 --> 00:06:00,350 Donc nous avons cela en. 66 00:06:00,360 --> 00:06:01,370 Nous avons un prix. 67 00:06:01,470 --> 00:06:03,660 Maintenant, nous allons ajouter la description dans. 68 00:06:04,230 --> 00:06:14,060 Donc, ce sera juste une étiquette de paragraphe et ensuite nous allons ajouter dans notre description qui est la description du camping là-bas. 69 00:06:14,640 --> 00:06:29,750 Et il va être un peu underwhelming parce que nous n'avons pas un grand abonnement dès maintenant, donc nous pouvons vouloir faire est aller voir la base de données avec certains Lorem Ipsum et je vais juste de voler cela et je vais copier Et revenir au fichier de graines. 70 00:06:29,940 --> 00:06:34,700 Et puis au lieu du fichier de notre graine et je vais changer la description sur les trois d'entre eux. 71 00:06:34,720 --> 00:06:37,990 Il suffit de faire la même chose plutôt que bla bla bla. 72 00:06:38,130 --> 00:06:42,380 Nous avons maintenant un morceau plus long de Lorem Ipsum et nous allons économiser. 73 00:06:42,660 --> 00:06:48,430 Et puis pour que cela devienne effectif nous devons redémarrer le serveur car cela va recevoir la base de données. 74 00:06:48,720 --> 00:06:52,340 Et puis revenons à la page des terrains de camping. 75 00:06:52,440 --> 00:06:54,090 Nous avons trois terrains de camping. 76 00:06:54,090 --> 00:06:58,330 Cependant, ils ont maintenant une description plus légitime du texte. 77 00:06:58,680 --> 00:07:00,050 D'accord! Super. 78 00:07:00,060 --> 00:07:02,240 Examinons maintenant ce dont nous avons besoin pour travailler. 79 00:07:02,250 --> 00:07:03,730 Il y a quelques petites choses. 80 00:07:03,880 --> 00:07:08,580 Nous allons laisser les étoiles dans le compte d'examen seul pour l'instant et nous passerons aux commentaires. 81 00:07:08,970 --> 00:07:22,630 Revenons au spectacle que E.J. Oui, nous pouvons fermer des graines pour l'instant ce que nous allons faire est d'ajouter dans un puits donner classe bien à l'intérieur de la colonne moyenne neuf parce que nous voulons qu'il soit dans la même colonne ici. 82 00:07:22,680 --> 00:07:24,350 Prenons la même quantité d'espace. 83 00:07:24,750 --> 00:07:31,800 Donc, pour ce faire, allez juste ici après la vignette afin que ce et la légende ici, c'est la vignette. 84 00:07:31,880 --> 00:07:34,770 Donc, ils vont ajouter la classe div. 85 00:07:34,870 --> 00:07:37,060 Egalement bien. 86 00:07:37,410 --> 00:07:43,560 Et puis à l'intérieur de cela va ouvrir et c'est là où il fera la boucle à travers pour ajouter les commentaires. 87 00:07:43,680 --> 00:07:55,150 Mais je vais commencer par ajouter dans le bouton le levier de votre bouton et nous allons juste faire un div simple et ce div aura une classe de texte droit tiret. 88 00:07:55,320 --> 00:08:02,940 Et puis à l'intérieur de là, nous allons ajouter notre marque d'ancrage ici que nous avons déjà à créer un nouveau commentaire. 89 00:08:03,300 --> 00:08:05,090 Il suffit de mettre cela ici. 90 00:08:05,820 --> 00:08:12,350 C'est un long, mais rappelez-vous, c'est une balise d'ancrage qui a une classe de bouton bouton de succès qui le rend vert. 91 00:08:12,490 --> 00:08:14,620 Mais la référence est une partie vraiment longue. 92 00:08:14,790 --> 00:08:22,290 Il va campgrounds slash le terrain de camping ID slash commentaires slash nouveau mais sauver et rafraîchir. 93 00:08:22,680 --> 00:08:23,030 D'ACCORD. 94 00:08:23,040 --> 00:08:27,750 Ainsi vous pouvez voir que nous avons maintenant le puits qui nous donne le fond gris agréable dans la frontière. 95 00:08:27,750 --> 00:08:29,960 C'est là que nous allons ajouter dans les commentaires. 96 00:08:30,120 --> 00:08:34,170 Donc, nous devons faire ensuite est en boucle à travers les commentaires et nous avons déjà fait. 97 00:08:34,170 --> 00:08:38,500 Mais plutôt que de simplement faire un paragraphe pour chacun, nous allons en fait faire une ligne séparée. 98 00:08:38,760 --> 00:08:42,880 Donc, je vais vous montrer ce que cela ressemble quand il copier ce ou couper. 99 00:08:43,020 --> 00:08:49,140 Et nous pouvons supprimer ce paragraphe supplémentaire et nous allons le mettre juste après le texte. 100 00:08:49,440 --> 00:08:51,850 Et faisons ceci correctement. 101 00:08:52,090 --> 00:09:03,830 Donc, nous avons notre boucle et puis nous allons boucler à travers chaque commentaire et nous allons ajouter à l'intérieur d'ici une ligne de classe div pour chaque classe div égale ligne. 102 00:09:04,750 --> 00:09:14,040 Et puis à l'intérieur de chaque Nous allons ajouter une autre classe div égale colonne moyenne 12 et enregistrer cela. 103 00:09:14,110 --> 00:09:21,850 Et si nous jetons un coup d'oeil à ce que nous avons ici nous nous retrouvons avec le nom d'utilisateur e-mail slash nom d'utilisateur que nous appelons l'auteur. 104 00:09:22,090 --> 00:09:30,760 Et puis sur la droite il ya cette fois il ya 10 jours qui sera juste dur code pour l'instant et puis le commentaire réelle vient après. 105 00:09:30,750 --> 00:09:41,350 Donc, pour faire ce travail, nous avons besoin de faire du texte et ensuite faire quelque chose sur la droite tirez droit texte droit et puis nous avons besoin d'ajouter un paragraphe dans le commentaire réelle elle-même. 106 00:09:41,350 --> 00:09:43,890 Alors essayons ça et entrons ici. 107 00:09:43,950 --> 00:09:45,900 Nous avons notre colonne moyenne 12. 108 00:09:46,290 --> 00:09:49,800 Et à l'intérieur de celui que nous allons commencer avec juste ajouter l'auteur de commentaire. 109 00:09:50,130 --> 00:09:51,770 Alors allons juste ajouter que là. 110 00:09:52,200 --> 00:09:57,520 Et puis, en dessous de ce que nous allons ajouter dans un laps de temps et ce sera sur la droite. 111 00:09:57,580 --> 00:09:59,770 Donc nous allons ajouter classique tirez à droite. 112 00:09:59,970 --> 00:10:03,340 Et puis ici, nous allons juste ajouter il ya dix jours pour l'instant. 113 00:10:03,510 --> 00:10:05,300 Eh bien juste le code dur que dans. 114 00:10:05,400 --> 00:10:09,520 Et puis la dernière chose qu'ils veulent faire est effectivement montrer le texte de commentaire. 115 00:10:09,680 --> 00:10:22,770 Donc, je vais obtenir ce commentaire texte ici et nous allons mettre cela à l'intérieur de son propre paragraphe que nous avons déjà ici juste comme ça, sauf que nous voulons le déplacer dans la colonne ici tout comme nous avons l'auteur et les 10 jours aller . 116 00:10:22,770 --> 00:10:29,680 Nous voulons qu'ils soient dans la même colonne ensemble et maintenant mais sauver et revenir en arrière. 117 00:10:29,700 --> 00:10:31,340 Voyez ce que nous obtenons. 118 00:10:31,360 --> 00:10:31,980 D'accord. 119 00:10:31,980 --> 00:10:33,050 Nous avons donc un commentaire à faire. 120 00:10:33,070 --> 00:10:33,930 C'est tout. 121 00:10:33,930 --> 00:10:36,580 Mais vous pouvez voir que nous avons un bouton ajouter un nouveau commentaire. 122 00:10:36,580 --> 00:10:37,980 Assurez-vous qu'il fonctionne. 123 00:10:38,770 --> 00:10:40,450 Et les commentaires sont affichés ici. 124 00:10:40,470 --> 00:10:41,600 Nous manquons la cote. 125 00:10:41,670 --> 00:10:44,460 Donc, il semble un peu bizarre, mais c'est très bien pour l'instant. 126 00:10:44,700 --> 00:10:48,460 Ce que nous pourrions vouloir faire est d'aller ajouter un ou deux autres commentaires. 127 00:10:48,450 --> 00:10:52,600 Alors revenez ici et utilisons un peu plus de lorem ipsum. 128 00:10:52,600 --> 00:10:57,100 Je vais donc copier des parties de ce document et les ajouter en tant que commentaires. 129 00:10:57,270 --> 00:11:02,440 Il suffit d'utiliser un peu de cela et l'auteur ici sera camping. 130 00:11:02,520 --> 00:11:03,600 Grand-père. 131 00:11:03,820 --> 00:11:05,000 Soumettre. 132 00:11:05,720 --> 00:11:06,090 D'ACCORD. 133 00:11:06,100 --> 00:11:08,420 Nous recevons donc nos commentaires ici très bien. 134 00:11:08,430 --> 00:11:09,550 Ça marche. 135 00:11:09,540 --> 00:11:11,610 J'ai un peu d'espace que nous voulons ajouter. 136 00:11:11,610 --> 00:11:17,520 Si vous jetez un oeil à ce que nous avons ici, il ya une ligne vraiment faible, je ne sais pas si vous allez apparaître sur l'écran cast. 137 00:11:17,520 --> 00:11:23,890 Il ya une ligne très faible qui ajoute un certain espace dans et tout ce que nous avons besoin de faire pour que le travail est d'ajouter un h r. 138 00:11:24,370 --> 00:11:33,210 Donc juste après ce droit de texte qui est le bouton que nous ajoutons juste dans une règle horizontale et si nous rafraîchissons nous avons maintenant un certain espace là. 139 00:11:33,260 --> 00:11:38,680 Vous avez un bouton et nous avons tous nos commentaires à afficher à court terme. 140 00:11:38,730 --> 00:11:40,310 Pourquoi ne pas construire le nom d'utilisateur. 141 00:11:40,620 --> 00:11:52,950 Donc nous reviendrons ici et nous avons déjà eu ceci et ils se sont débarrassés de lui mais nous y retournerons et ajouté encore une étiquette forte avec l'auteur et ils le rendront un peu plus facile à voir. 142 00:11:52,950 --> 00:11:53,770 Voilà. 143 00:11:53,830 --> 00:11:57,470 Suite Cet avis vous a-t-il été utile? 144 00:11:57,540 --> 00:12:00,060 C'est donc tout le bootstrap que nous devons faire pour l'instant. 145 00:12:00,240 --> 00:12:01,390 Mais nous ne sommes toujours pas terminés. 146 00:12:01,470 --> 00:12:09,900 Si nous revenons en arrière et jeter un oeil à la version ish fini, vous verrez que l'image prend toute la vignette et ne font tout simplement pas cela. 147 00:12:10,050 --> 00:12:15,000 Même si j'ai fait un point d'utiliser la même image exacte, il n'est pas sur l'image réelle elle-même. 148 00:12:15,120 --> 00:12:16,820 Le problème vient à notre style. 149 00:12:17,080 --> 00:12:22,890 Et ce que nous voulons faire, c'est aller et dire à cette image de prendre jusqu'à 100 pour cent avec le conteneur. 150 00:12:23,160 --> 00:12:29,150 Donc, je vais vous montrer que nous pouvons simplement l'inspecter et c'est une excellente utilité pour l'inspecteur ici. 151 00:12:29,350 --> 00:12:36,260 Nous pouvons le sélectionner ici et puis ici nous pouvons ajouter dans un style avec 100 pour cent. 152 00:12:36,270 --> 00:12:37,060 Et voilà. 153 00:12:37,120 --> 00:12:39,540 C'est donc une chose que nous voulons faire. 154 00:12:39,610 --> 00:12:45,320 Il ya encore une très légère différence, c'est qu'il ya un peu d'espace là-bas que nous n'avons pas sur celui-ci. 155 00:12:45,470 --> 00:12:56,670 Et pour se débarrasser de tout ce que nous voulons faire est d'aller dans la vignette réelle et sélectionnez la vignette qui est ici et nous allons donner ce rembourrage zéro. 156 00:12:57,580 --> 00:13:02,700 Et maintenant si nous jetons un coup d'oeil il regarde la manière que nous voulons qu'il regarde ou regarde presque comme cela quand regarder. 157 00:13:02,730 --> 00:13:05,350 Nous allons ajouter un certain espace ici aussi. 158 00:13:05,350 --> 00:13:09,740 Vous pouvez voir qu'il ya un certain espacement fait ici et nous pouvons réparer cela dès maintenant. 159 00:13:09,820 --> 00:13:19,560 De plus, en l'inspectant et en nous rappelant que nous ne sommes pas en train de le corriger, nous ne faisons que le tester dans le navigateur, puis nous allons revenir en arrière et effectivement faire ces changements dans notre propre feuille de style. 160 00:13:19,570 --> 00:13:24,760 Donc ce que nous voulons faire est d'ajouter un peu de rembourrage sur le pot de légende qui est cette boîte ici. 161 00:13:24,990 --> 00:13:31,220 Et le Padam que nous voulons est à gauche à droite en haut et en bas et il va être neuf ou 10 pixels. 162 00:13:31,230 --> 00:13:35,370 Donc, nous ferons juste remplissage neuf x. 163 00:13:35,760 --> 00:13:36,510 Et voilà. 164 00:13:36,540 --> 00:13:38,240 Nous nous retrouvons avec un bon espacement.