Welkom terug te komen in deze les gaan we richten op styling van de show pagina.
Dus nu de show pagina ziet er als volgt uit.
We hebben een beetje saaie bar hier met de toetsen die niets doen.
We hebben een H-1 met de naam van de camping.
En we hebben een beeld en een beschrijving en we hebben een knop om een ​​nieuw commentaar toe te voegen en vervolgens alle opmerkingen worden weergegeven.
Ieder een beetje paragraaf.
Dus ons doel hier is om het er een beetje meer als dit.
Dus ik heb een zijbalk hier.
We gaan niet naar de kaart gewoon nog niet, maar we zullen ruimte voor de kaart te maken en dan zullen we onze tevreden met de beschrijving te hebben.
Wat tekst de titel zijn we niet van plan om nog de ratings doen, maar dan zullen we ook een lijst met beoordelingen die zal er zo uitzien.
Hun eigen kleine container daar zal ik een beetje knop om een ​​paar hefboom hebben.
Over het algemeen is het een beetje meer gestileerd.
We kunnen dit toevoegen en die zegt hoeveel beoordelingen zijn achtergelaten.
Dus dat is wat we streven.
En om te beginnen gaan we gewoon concentreren op de bootstrap net.
Vergeet niet dat de bootstrap rooster is 12 eenheden over.
We gaan wijzen drie van de 12 voor deze kleine side bar en dan gaan we naar toe negen voor de belangrijkste inhoud.
Voordat we op het daadwerkelijk veranderen van om het even wat te beginnen wil ik erop wijzen dat ik werk in v 5 nu.
Dus als je wilt om mee te volgen al deze veranderingen zullen in V 5.
En de reden dat ik dat te doen is dat we gaan te hebben om een ​​aangepaste stylesheet te maken.
We gaan te hebben om de publieke map en een paar andere dingen die aanzienlijke veranderingen dienen.
Dus wilde ik een aparte versie te maken.
Maar voordat we dat doen is het eerste wat we gaan doen is het toevoegen van een container rond dit alles bootstrap container.
Dus laten zien dat E.J. gaat een div de container toe te voegen met klasse, net als dat en we zullen zetten alles binnen van.
En Ik zal beginnen met het toevoegen van de zijbalk en we zullen gewoon vullen met wat dummy data, zoals we hier hebben.
Dus DIVX en dit moet zijn klasse is gelijk aan pro en in die rij gaan we naar een andere div waarin een klasse is kolom medium drie net als dat hebben.
En dan de binnenkant van hier gaan we een paragraaf toe te voegen en we gaan om deze tekst die zegt Joachim krijgen.
Dus dat is een paragraaf waarin de klasse is lood en dan zijn we gewoon gaan om jullie op te zetten kamp voor nu zullen we uiteindelijk veranderen dit.
Maar ja kamp en vervolgens naar die kleine lijst items toe te voegen dat we een div met de klas doen, is de lijst dash groep en vervolgens in hier gaan we een stelletje bondgenoten in elke bondgenoot toe te voegen heeft een klasse van de lijst groepsitem.
En binnen gaan we gewoon nog wat dummy data en we noemen het info 1 en dan ga ik deze info naar info 3 dupliceren.
En dan laten we eens kijken hoe dat eruit ziet voor nu.
Dus voor Vernieuw de pagina hebben we een zijbalk hier en ik zal een van deze items geselecteerd om te beginnen te maken.
En alles wat we moeten doen is het toevoegen van een actieve daar.
Als we verse We zien nu dat een van hen is actief.
En dit is eigenlijk gewoon een placeholder om daar iets hebben, dus we hebben niet veel witruimte, maar gaan, zullen we er het toevoegen van echte gegevens en een kaart uiteindelijk.
En alleen maar om het wijzen op de kaart zal hier gewoon nog niet naar binnen gaan van dit medium drie kolommen uiteindelijk maar niet.
OK dus dat is een zijbalk.
Nu gaan we naar toe in de belangrijkste inhoud.
Dus moeten we een andere kolom en dit is de klasse kolom medium 9.
En in plaats van daar moeten we de H-1 hebben we nodig om het beeld te hebben, maar voor al die je zult merken dat het eigenlijk allemaal in één van deze miniaturen net alsof we op de homepage.
Elk van deze is een miniatuur.
We gaan hetzelfde doen rond het gehele beeld in de titel en de opmerkingen en dat alles.
Dus we gaan een div toe te voegen en dat zal div class hebben gelijk miniatuur.
En dan in dat we gaan naar de afbeelding toe te voegen en ik zal nog steeds het beeld dat we hebben al geschreven en plaatst het goed daar.
Dus dat gaat om het imago van onze camping zijn.
En dan willen we ook een klasse toe te voegen aan dat bootstrap geeft ons die het Dasch responsief.
Daar gaan we.
Behalve dat.
En als we kijken naar wat we nu hebben te nemen en te vernieuwen we op zijn minst het beeld en de inhoud op de juiste plaats.
We hebben een probleem waar dit echter niet opnemen met dat we willen dat het.
Ik wil dat gaan helemaal over en we moeten behandelen die met een aantal aangepaste C Ss aan het eind.
En nu zullen we terug te gaan en voeg deze hier waar we de naam van de camping en dan is de prijs per nacht, wat we niet daadwerkelijk in de database.
Dus we gewoon hardcoded.
Dus laten we dat nu doen.
En dat is een ander div en deze heeft een klasse van bijschrift dash vol.
En dan de binnenkant van daar gaan we een H toe te voegen voor.
En we gaan deze naar rechts te trekken en we doen class is gelijk aan pull dashboard rechts en dan wat we in hier zal de prijs.
En ik zal gewoon beginnen met $ 9 per nacht ook dit zal komen uit de database uiteindelijk.
Als we vers Nu krijgen we $ 9 per nacht op de rechterkant en dan willen we de naam van de camping, die ik zal gewoon hierheen te kopiëren aan de linker kant te krijgen.
Dus we zullen het goed onder te zetten en als we niet pull recht toe te voegen zal deze automatisch gaan over naar links, hoewel dat is groter dan wat ik in gedachten had en ik zal zetten dat in een kleinere H voor en ik ga een anker tag toe te voegen binnenkant van er net als dat en zet de naam camping in de anchor tag.
En de gedachte daarachter is dat ik uiteindelijk terug te gaan.
Dit moet een link naar de werkelijke camping of de Park Service pagina waar we kunnen gaan om iets te boeken zijn.
Voor nu is het gewoon de link naar nergens.
OK.
Dus hebben we dat in.
We hebben een prijs.
Laten we nu terug de omschrijving in.
Dus dat zal slechts een paragraaf tag en dan zullen we aan onze beschrijving die is camping beschrijving daar.
En het gaat een beetje underwhelming te zijn omdat we niet een groot abonnement hebben op dit moment, dus we zouden willen doen is te gaan en zie de databank met enkele Lorem Ipsum en ik ga gewoon om dit te stelen en ik zal kopiëren dat en ga terug naar het zaad bestand.
En dan in plaats van het dossier van ons zaad en zal ik de beschrijving op alle drie van hen.
maken het het zelfde ding in plaats van blah blah blah net.
We hebben nu een langere beetje van Lorem Ipsum en we zullen redden.
En dan om dit in werking treden moeten we de server opnieuw op te starten, omdat dat de database zal ontvangen.
En dan laten we teruggaan en draai naar de pagina campings.
We hebben drie campings.
Maar ze hebben nu een meer legitieme beschrijving wat tekst.
Oke geweldig.
Dus laten we nu wat we nodig hebben om te werken aan een kijkje nemen.
Er zijn een paar kleine dingen.
We zullen de sterren in de beoordeling alleen al tellen voor nu verlaten en we zullen naar beneden naar de opmerkingen te verplaatsen.
Laten we terug gaan naar de show die E.J. Ja bestand dat we kunnen sluiten van zaden voor nu wat we gaan doen is toe te voegen in een goed te geven klasse en de binnenkant van de kolom medium negen, omdat we willen dat het in dezelfde kolom hier.
Het opnemen van dezelfde hoeveelheid ruimte.
Dus om dat te doen ga hier na de thumbnail dus dit en de titel hier is dit de miniatuur.
Zo goed ze gaan div class toe te voegen.
Evenaart goed.
En dan de binnenkant van die gaan om het te openen en dit is waar het doorlussen naar de opmerkingen toe zal doen.
Maar ik ga om te beginnen door het toevoegen in de knop de hendel van u knop en we zullen gewoon een simpele div en dit div zal een klasse van tekst dash recht.
En dan de binnenkant van daar gaan we ons anker tag hier toevoegen dat we al een nieuwe reactie te creëren.
Gewoon we deze hier.
Het is een lange, maar vergeet niet het is een anker tag die een klasse van knop knop succes dat het groen maakt heeft.
Maar de lijnrechter is een heel lange deel.
Het gaat om campings slash de camping ID slash reacties slash nieuw, maar op te slaan en te vernieuwen.
OK.
Zodat u kunt zien hebben we nu het goed, dat geeft ons de mooie grijze achtergrond in de border.
Dit is waar we heen gaan om toe te voegen in de commentaren.
Dus moeten we nu doen is lus door de opmerkingen en hebben we al gedaan.
Maar in plaats van alleen het maken van een paragraaf voor elke we eigenlijk gaan naar een aparte rij te maken.
Dus ik zal je laten zien hoe dat eruit ziet als het deze te kopiëren of knippen.
En we kunnen deze extra paragraaf te schrappen en we gaan dat direct na de tekst recht te zetten.
En laten we dit doen behoren.
Dus hebben we onze loop en dan gaan we lus door elke opmerking en we gaan toe te voegen binnen van hier een div class rij voor elke één div class is gelijk aan rij.
En dan binnenkant van elke We gaan naar een ander div class toe gelijk kolom medium 12 en behalve dat.
En als we een kijkje nemen op wat we hier hebben we eindigen met de gebruikersnaam e-slash gebruikersnaam waarin we de auteur noemen.
En dan aan de rechterkant is er deze keer 10 dagen geleden, die zal gewoon moeilijk code voor zo nu en dan de werkelijke reactie komt daarna.
Dus om dat werk dat we nodig hebben om wat tekst te doen en vervolgens iets te doen aan de rechter te trekken juiste tekst rechts en dan moeten we een paragraaf toe te voegen voor de eigenlijke reactie zelf.
Dus laten we proberen dat en ga hier.
We hebben onze column medium 12.
En de binnenkant van dat we gaan beginnen met alleen het toevoegen van de reactie auteur.
Dus laten we gewoon toevoegen dat daar.
En dan onder dat we gaan toe te voegen in een overspanning en dit zal worden aan de rechterkant.
Dus we zullen voegen klassieke pull rechts.
En dan hier zullen we voeg gewoon tien dagen geleden voor nu.
Nou gewoon moeilijk code in.
En dan is het laatste wat ze willen doen is eigenlijk de reactie tekst weer te geven.
Dus ik ga naar deze reactie tekst hier te komen en we zullen we deze binnen zijn eigen paragraaf die we al hebben hier net als dat, behalve we willen om het te verplaatsen in de kolom hier net als wij hebben de auteur en de 10 dagen te gaan .
We willen dat ze elkaar en nu in dezelfde kolom, maar op te slaan en terug te gaan.
Zie wat we krijgen.
Okee.
Dus hebben we een reactie.
Dat is het.
Maar je kunt zien dat we een knop toe te voegen een nieuwe reactie.
Zorg ervoor dat het werkt.
En de commentaren zijn hier weergegeven.
We missen de rating.
Dus het ziet er een beetje raar, maar dat is prima voor nu.
Wat wij zouden willen doen is toe te voegen nog een of twee opmerkingen.
Dus ga hier terug en laten we gewoon gebruik maken van wat meer Lorem ipsum.
Dus ik ga gewoon om delen van deze te kopiëren en voeg ze in als commentaar.
Gebruik gewoon wat van die en de auteur hier kampeert.
Opa.
Indienen.
OK.
Dus we nu krijgen onze opmerkingen hier prima.
Dat werkt.
Ik heb wel wat ruimte die we willen toevoegen.
Als je een blik op wat we hier hebben is er een heel vage lijn Ik weet niet of je zal je laten zien op het scherm cast te nemen.
Er is een heel vage regel dat sommige afstand toe te voegen aan en alles wat we moeten doen om dat te laten werken is het toevoegen van een h r.
Dus direct na deze tekst recht, dat is de knop we gewoon toe te voegen in een horizontale lijn en als we frissen we hebben nu een aantal ruimte is er.
Je hebt een knop en we hebben al onze opmerkingen worden weergegeven op de korte termijn.
Waarom gaan we niet bouwen aan de gebruikersnaam.
Dus we zullen hier terug te gaan en we dit al gehad en ze verlost van het, maar we zullen teruggaan en voegde weer een sterke tag met de auteur en ze zullen het een beetje makkelijker om te zien maken.
Daar gaan we.
Nog steeds niet geweldig, maar goed genoeg voor nu.
Dus dat is eigenlijk al de bootstrap wat we moeten doen voor nu.
Maar we zijn nog niet klaar.
Als we terug gaan en neem een ​​kijkje op de afgewerkte ish-versie zul je zien dat de afbeelding de gehele miniatuur en zijn gewoon niet dat te doen.
Ook al heb ik een punt naar het exact hetzelfde beeld dat het niet over de feitelijke beeld zelf te gebruiken.
Het probleem komt neer op onze styling.
En wat we willen doen is naar binnen en vertel dit beeld tot het nemen van 100 procent van de container.
Dus ik zal je laten zien kunnen we gewoon te inspecteren en dit is een groot nut voor de inspecteur hier.
We kunnen het hier te selecteren en hier kunnen we in een stijl toe met 100 procent.
En daar gaan we.
Dus dat is een ding dat we willen doen.
Er is nog steeds een zeer klein verschil dat er is een weinig ruimte daar dat we niet op deze.
En om zich te ontdoen van die krijgen alles wat we willen doen is in de feitelijke miniatuur en selecteer de miniatuur die hier en we gaan dat padding nul geven.
En nu als we een kijkje te nemen lijkt het de manier waarop we willen dat het kijken of bijna lijkt op die manier bij te kijken.
We gaan een aantal afstand hier ook toe.
Je kunt zien dat er een aantal uit elkaar hier gedaan en we kunnen oplossen die op dit moment.
Ook door het inspecteren van het en vergeet niet dat we niet echt vast te zetten we gewoon testen het uit in de browser en dan gaan we terug te gaan en eigenlijk maken deze veranderingen in onze eigen style sheet.
Dus wat we willen doen is toe te voegen in een klein beetje van padding op de titel veulen die dit vak hier.
En de Padam we willen is op de links rechts boven en onder en het gaat om negen of 10 pixels.
Dus we gewoon doen padding negen x.
En daar gaan we.
We eindigen met een mooie afstand daar.