Welkom terug in deze les gaan we verder werken aan uw kamp.
We hebben al de eerste set-up gedaan.
We hebben een aantal eenvoudige lay-out voegde de kop- en voettekst Parshall's voegden we bootstrap en voegden we de functionaliteit van het creëren van nieuwe campings gedaan.
Nu gaan we om te gaan in de stijl van de pagina campings met behulp van bootstrap.
Dus laten we beginnen.
Het allereerste wat ik ga doen is ervoor zorgen dat mijn servers draaien.
En net een kijkje nemen op wat we nu hebben.
Zeker een beetje underwhelming.
Dus ik heb twee hoofddoelen.
De eerste is dat we willen een betere kop in de titel hier dus dit moet mooier uitzien.
We gaan om te gebruiken wat een jumbotron in Bootstrap geroepen en dan ook nog de kampeerterreinen in de lijst van campings moet niet alleen verticaal weergegeven als dit.
In plaats daarvan willen we een raster van kleinere beelden gaan over en dat rooster moet responsief zijn.
Laten we beginnen met de eerste, die krijgt deze titel tekst een beetje mooier uitzien.
Dus ik ga openstellen kampeerterreinen dat ja ik ga gewoon hier om te werken.
Dus ik ga dit een beetje verkleinen, want we gaan schrijven nogal wat HD-mail en we zijn niet van plan om iets te doen met een terminale at all.
Dus om te werken aan de kop gaan we een header-tag die we nog niet eerder hebben gezien gebruiken.
Functioneel werkt op exact dezelfde manier als iets als een div.
Het enige verschil is dat dit een beetje semantische betekenis aan.
Met behulp van header in plaats van alleen een willekeurige div, maar het maakt eigenlijk niet uit het is gewoon een container.
En we gaan het een klasse van jumbotron geven en dan erin gaan we om goed toe te voegen in slechts deze H-1 kopiëren daadwerkelijk en we zullen gewoon bij laten en op te slaan Frigo en verfrissen onze pagina.
We hebben nu wat de Jumbotron genoemd.
Het is nog steeds niet geweldig.
Het volgende wat we moeten doen is het maken van alles wat de binnenkant van een bootstrap container.
Dus alles wat we hier zien dit alles ga ik inspringen en ik ga een div voegen met klasse evenaart container, net als dat.
En dan zullen we alles blijven binnenkant van dat en dit zal een aantal speccing toe te voegen voor ons op de zijkanten.
Vernieuwen.
U kunt zien dat we niet langer dingen recht tegen de linkerkant hier.
We hebben wat ruimte en onze JumboTron op zoek is naar een beetje dichterbij en uiteindelijk zal een saaie bar verschijnen.
Dus dit ziet er een beetje mooier ook.
Voor nu hebben we alleen de Jumbotron.
Laten we nu de tekst zelf veranderen.
Dus in plaats van deze is de pagina campings laten we een welkomstbericht Welkom op het kamp.
Voel je vrij om te zetten wat de inhoud je wilt en ik zal ook toevoegen in een paragraaf in de paragraaf zal ik gewoon een beetje soort slogan toe te voegen en ik zal enkel zeggen bekijk onze kant en pick-campings van over de hele wereld.
Zoiets maakt niet echt uit.
We zullen vernieuwen redden.
OK dus nu hebben we een beetje tag lijn en het laatste wat we willen doen is het verzorgen van deze link.
Het toevoegen van nieuwe camping link.
Dus ik ga om te kopiëren dat en ook zet het in de Jumbotron.
Maar ik ga om het te maken in een knop.
Een van de bootstrap knoppen dus om dat te doen of om een ​​paragraaf eerst toe te voegen en vervolgens het anker tag binnenkant van dat.
En ik doe dat alleen voor spatiëring.
U wilt dat dit op zijn eigen lijn en dan ga ik naar de knop klasse meerdere klassen van PTEN ETN primaire geven voor de kleur en tussen dash groot als dat en zal redden.
Nu hebben we een nieuwe camping button gehad.
We klikken op het en het neemt ons mee naar de vorm die volledig is ingericht.
Een klein ding is dat als ik hier dit venster wijzigen.
Merk op hoe onze tekst gaat recht tegen de rand van de Jumbotron dat is niet geweldig.
We hebben hier een aantal afstand en ze willen dat de afstand wat we moeten doen is gewoon een container toe te voegen in de Jumbotron houden zodat div class is gelijk aan container en dan naar beneden hier in de Jumbotron voor het einde bij de sluiting div en dan gewoon streepje alles.
En nu als we vernieuwen.
Ze zag er hetzelfde uit, maar toen we krimpen naar beneden hebben we nu wat ruimte daar.
OK dus dat is de header gedeelte.
Nu willen we werken aan dat raster van afbeeldingen en ik zal van te voren met u.
Het is zeker een beetje meer werk.
OK laten we beginnen op dat rooster en we gaan beginnen met het creëren van een rij zodat div class is gelijk aan rij net als dat en ik ga om te beginnen met slechts een klein bericht.
Dus we gaan een div class toe te voegen gelijk aan en ik ga om dit te nemen net op de gehele breedte en we gaan gewoon om een ​​bericht te hebben en H-3 die zegt onze meest populaire sites zijn campings die je kent zal er niet veel.
Voor nu laten we het hoofd terug over en laten we beginnen door het toevoegen van in div class rij waarin we alles in onze lagere school in een rij nodig.
Het is een div class is gelijk aan rij net als dat.
En nu hebben we over praten voor elke lus want wat we eigenlijk willen doen is in plaats van ons netwerk in de rij voor elke camping willen we een div dat een klasse kolom en een kolom met behulp van de bootstrap raster heeft te maken.
Dus ik ga dat nu te doen waar ik ga dit alles code voor elke lus gaat ingesprongen zomaar gezet.
En dan is hier moeten we onze afsluitende div tag.
Dus dit is de klassieke rij en dit is voor de container.
OK.
Dus tieve klasse rij en in plaats van alleen het verlaten van deze inhoud als het div en hier met een H voor een beeld dat we zullen nog steeds een beeld, maar we gaan dit veranderen, zodat div dat het een klasse van kolom medium drie in kolom klein 6 en dat is alleen maar om het responsief maken, zodat we een aantal grotere beelden als het scherm groter is.
En toen we krimp neer zal dalen tot slechts twee beelden per rij en dan zal het nog verder krimpen tot slechts één afbeelding per rij.
Dus de binnenkant van dat we daadwerkelijk gaat om toe te voegen in een andere div en DIV gaat naar de klas van de miniatuur die een bootstrap klasse die zal ons te helpen met een kleine kaart zal het een beetje raster item te maken binnen dat de miniatuur zal toevoegen het hebben afbeelding om te beginnen net als dat.
We hebben image diensten die gelijk is aan de camping u RL En we zullen gewoon het bij laten.
En we gaan om zich te ontdoen van deze te krijgen voor nu en gewoon te besparen en laten we zien wat we krijgen als we zijn vers.
Okee.
Dus hebben we een raster van afbeeldingen nu.
Er zijn slechts drie, maar we krijgen dit raster.
En ik zal je laten zien wat ik bedoelde met waardoor het responsief.
Dus als een krimp deze verklaring hoe het verandert in twee velden of twee items over het scherm.
Vergeet niet dat er 12 eenheden.
Dus wat we eerst hadden we te verdelen in vier stukken, waar ze elkaar haalde drie eenheden en dan wanneer het rooster kleiner wordt hier zij elk nemen zes eenheden en nog kleiner gaat het automatisch naar één.
En we hoefden niet te schrijven dat, omdat de extra kleine standaard is om 12 eenheden te gebruiken.
Dus we hoefden niet te vermelden dat.
Laten we nu de titel terug in deze camping naam en in plaats van alleen een leeftijd voor een tot een nother bootstrap klasse A div class is gelijk aan de titel, net als dat te doen.
En dan binnen zal er een H te zetten voor de naam camping.
OK laten opslaan laten we eens kijken hoe het eruit ziet.
Daar gaan we.
We krijgen deze leuke kaarten.
Dit is de verkleinde klasse maken die voor ons.
We hebben onze beelden.
En laten we zien hoe het eruit ziet als we een heleboel foto's gaan in een bos van items.
Dus je hoeft dit niet te doen, maar ik ga dit plakken in hier.
Geef ons wat meer gegevens.
Het zal dubbele gegevens, maar dat is prima.
En dan moeten we ervoor zorgen dat we de juiste komma's toe te voegen en zo komma daar en om daar te komen.
Nu als we Oh vernieuwen moeten we de server opnieuw op te starten.
En elke keer dat we knoeien met de app.
Ja.
En nu als we vernieuwen zal hij zien we hebben een klein probleem.
Ons netwerk is een beetje verknald.
En wat is er gebeurt is dat we hebben beelden die zijn van verschillende hoogtes.
Dus dit Salmon Creek is anders dan deze.
Hoewel de breedte gelijk zijn in dit geval.
En dat is het gooien van het net en er is een gemakkelijke manier om het te repareren maar het is een beetje wankel.
En ik zal je laten zien hoe we dat doen in plaats van onze camping.
Ja.
Op de dag van de klasse rij ik ga toe te voegen in een stijl attribuut en ik ga gewoon om dit tijdelijk te doen.
We zullen het verplaatsen van dit op een externe stylesheet, maar ik ga gewoon doen in de rij om het makkelijker voor u om te zien maken.
Dus zetten we stijl te geven flex en flex wrap om wrap zijn.
En dat zijn twee eigenschappen die gaan ons net helpen.
Dus als ik waren vers Nu komen we uit op de grid waar het meer flexibel.
Het maakt niet uit dat we hebben een aantal verschillende hoogten, want nu de grid past zich Dus er is meer ruimte tussen deze twee en daar is het hier.
In principe cijfers uit de minimale hoeveelheid ruimte die nodig is waar we kunnen alles op haar eigen lijn bij elkaar waar we kunnen alles perfect uitgelijnd.
En er is een andere verandering die we kunnen maken dat is terug te gaan en toe te voegen in de tekst Center dat is een bootstrap voor ons, die zal maken onze tekst gecentreerd daar.
En ik denk dat ziet er een beetje beter.
Ook een kwestie van persoonlijke voorkeur en nu zijn we klaar met camping pagina voor het moment.
Hopelijk dat laat zien hoe bootstrap kan ons echt helpen dingen kunnen vrij gemakkelijk vooral in vergelijking met dit te doen vanuit het niets te maken.
En laat me gewoon laten zien onze mooie responsieve raster dat we hebben.
Dus dit is mobile.
We krijgen dit mooie lay-out helemaal tot vier beelden over te gaan.
OK, dus ik ben erg blij met hoe dit eruit ziet.