Bienvenue à revenir dans cette leçon, nous allons nous concentrer sur le style de la page de spectacle.
Donc maintenant notre page de spectacle ressemble à ceci.
Nous avons une petite barre de naff ici avec les boutons qui ne font rien.
Nous avons un H-1 avec le nom du terrain de camping.
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.
Chacun un petit paragraphe.
Donc, notre objectif ici est de le faire ressembler un peu plus comme ceci.
J'ai donc une barre latérale ici.
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.
Certains texte le titre que nous n'allons pas faire les évaluations encore, mais nous aurons également une liste d'examens qui ressemblera à cela.
Leur propre petit conteneur là-bas, je vais avoir un petit bouton pour lever un peu.
En général, il est un peu plus de style.
Nous pouvons ajouter ceci et cela indique combien d'examens ont été laissés.
C'est ce que nous visons.
Et pour commencer, nous allons nous concentrer uniquement sur la grille d'amorçage.
N'oubliez pas que la grille d'amorçage est de 12 unités.
Nous allons désigner trois de ces 12 pour cette petite barre latérale et nous allons ajouter neuf pour le contenu principal.
Avant de commencer à changer quoi que ce soit, je tiens à souligner que je travaille dans v 5 maintenant.
Donc, si vous voulez suivre tous ces changements seront dans V 5.
Et la raison pour laquelle je fais cela, c'est que nous allons devoir faire une feuille de style personnalisée.
Nous allons devoir servir l'annuaire public et quelques autres choses qui sont des changements substantiels.
Je voulais donc en faire une version distincte.
Mais avant de le faire, la première chose que nous allons faire est d'ajouter un conteneur autour de tout ce conteneur bootstrap.
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.
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.
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.
Et puis à l'intérieur d'ici, nous allons ajouter un paragraphe et nous allons obtenir ce texte qui dit Joachim.
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.
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.
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.
Et puis voyons ce que cela ressemble pour l'instant.
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.
Et tout ce que nous avons à faire est d'ajouter un droit actif là-bas.
Si nous sommes frais Nous voyons maintenant que l'un d'eux est actif.
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.
Et juste pour le signaler la carte ira juste ici à l'intérieur de ce milieu trois colonne éventuellement mais pas tout de suite.
OK, c'est une barre latérale.
Maintenant, nous allons ajouter dans le contenu principal.
Donc nous avons besoin d'une autre colonne et celle-ci est le support de colonne de classe 9.
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.
Chacune d'elles est une vignette.
Nous allons faire la même chose autour de l'image entière dans le titre et les commentaires et tout cela.
Donc, nous allons ajouter un div et que div aura classe égale thumbnail.
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à.
Ce sera donc notre image de terrain de camping.
Et puis nous voulons aussi ajouter une classe à ce que bootstrapped nous donne qui est l'image Dasch réactive.
Voilà.
Sauf que.
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.
Nous avons un problème là où cela ne se pose pas, mais avec ce que nous voulons.
Je veux que cela passe tout le chemin à travers et nous allons devoir manipuler cela avec quelques cs personnalisés à la fin.
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.
Alors nous allons juste hardcoded.
Alors, faisons-le maintenant.
Et c'est un autre div et celui-ci a une classe de tiret plein de légende.
Et puis à l'intérieur de là, nous allons ajouter un H pour.
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.
Et je vais juste commencer avec 9 $ la nuit encore ce sera à venir de la base de données éventuellement.
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.
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.
Et l'idée derrière cela est que finalement je reviens.
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.
Pour l'instant, c'est juste le lien vers nulle part.
D'ACCORD.
Donc nous avons cela en.
Nous avons un prix.
Maintenant, nous allons ajouter la description dans.
Donc, ce sera juste une étiquette de paragraphe et ensuite nous allons ajouter dans notre description qui est la description du camping là-bas.
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.
Et puis au lieu du fichier de notre graine et je vais changer la description sur les trois d'entre eux.
Il suffit de faire la même chose plutôt que bla bla bla.
Nous avons maintenant un morceau plus long de Lorem Ipsum et nous allons économiser.
Et puis pour que cela devienne effectif nous devons redémarrer le serveur car cela va recevoir la base de données.
Et puis revenons à la page des terrains de camping.
Nous avons trois terrains de camping.
Cependant, ils ont maintenant une description plus légitime du texte.
D'accord! Super.
Examinons maintenant ce dont nous avons besoin pour travailler.
Il y a quelques petites choses.
Nous allons laisser les étoiles dans le compte d'examen seul pour l'instant et nous passerons aux commentaires.
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.
Prenons la même quantité d'espace.
Donc, pour ce faire, allez juste ici après la vignette afin que ce et la légende ici, c'est la vignette.
Donc, ils vont ajouter la classe div.
Egalement bien.
Et puis à l'intérieur de cela va ouvrir et c'est là où il fera la boucle à travers pour ajouter les commentaires.
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.
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.
Il suffit de mettre cela ici.
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.
Mais la référence est une partie vraiment longue.
Il va campgrounds slash le terrain de camping ID slash commentaires slash nouveau mais sauver et rafraîchir.
D'ACCORD.
Ainsi vous pouvez voir que nous avons maintenant le puits qui nous donne le fond gris agréable dans la frontière.
C'est là que nous allons ajouter dans les commentaires.
Donc, nous devons faire ensuite est en boucle à travers les commentaires et nous avons déjà fait.
Mais plutôt que de simplement faire un paragraphe pour chacun, nous allons en fait faire une ligne séparée.
Donc, je vais vous montrer ce que cela ressemble quand il copier ce ou couper.
Et nous pouvons supprimer ce paragraphe supplémentaire et nous allons le mettre juste après le texte.
Et faisons ceci correctement.
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.
Et puis à l'intérieur de chaque Nous allons ajouter une autre classe div égale colonne moyenne 12 et enregistrer cela.
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.
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.
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.
Alors essayons ça et entrons ici.
Nous avons notre colonne moyenne 12.
Et à l'intérieur de celui que nous allons commencer avec juste ajouter l'auteur de commentaire.
Alors allons juste ajouter que là.
Et puis, en dessous de ce que nous allons ajouter dans un laps de temps et ce sera sur la droite.
Donc nous allons ajouter classique tirez à droite.
Et puis ici, nous allons juste ajouter il ya dix jours pour l'instant.
Eh bien juste le code dur que dans.
Et puis la dernière chose qu'ils veulent faire est effectivement montrer le texte de commentaire.
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 .
Nous voulons qu'ils soient dans la même colonne ensemble et maintenant mais sauver et revenir en arrière.
Voyez ce que nous obtenons.
D'accord.
Nous avons donc un commentaire à faire.
C'est tout.
Mais vous pouvez voir que nous avons un bouton ajouter un nouveau commentaire.
Assurez-vous qu'il fonctionne.
Et les commentaires sont affichés ici.
Nous manquons la cote.
Donc, il semble un peu bizarre, mais c'est très bien pour l'instant.
Ce que nous pourrions vouloir faire est d'aller ajouter un ou deux autres commentaires.
Alors revenez ici et utilisons un peu plus de lorem ipsum.
Je vais donc copier des parties de ce document et les ajouter en tant que commentaires.
Il suffit d'utiliser un peu de cela et l'auteur ici sera camping.
Grand-père.
Soumettre.
D'ACCORD.
Nous recevons donc nos commentaires ici très bien.
Ça marche.
J'ai un peu d'espace que nous voulons ajouter.
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.
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.
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à.
Vous avez un bouton et nous avons tous nos commentaires à afficher à court terme.
Pourquoi ne pas construire le nom d'utilisateur.
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.
Voilà.
Suite Cet avis vous a-t-il été utile?
C'est donc tout le bootstrap que nous devons faire pour l'instant.
Mais nous ne sommes toujours pas terminés.
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.
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.
Le problème vient à notre style.
Et ce que nous voulons faire, c'est aller et dire à cette image de prendre jusqu'à 100 pour cent avec le conteneur.
Donc, je vais vous montrer que nous pouvons simplement l'inspecter et c'est une excellente utilité pour l'inspecteur ici.
Nous pouvons le sélectionner ici et puis ici nous pouvons ajouter dans un style avec 100 pour cent.
Et voilà.
C'est donc une chose que nous voulons faire.
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.
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.
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.
Nous allons ajouter un certain espace ici aussi.
Vous pouvez voir qu'il ya un certain espacement fait ici et nous pouvons réparer cela dès maintenant.
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.
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.
Et le Padam que nous voulons est à gauche à droite en haut et en bas et il va être neuf ou 10 pixels.
Donc, nous ferons juste remplissage neuf x.
Et voilà.
Nous nous retrouvons avec un bon espacement.