Deze video gaan we verder styling het kamp.
We gaan een navigatiebalk toe te voegen aan elke pagina en dat nav bar zal vrij leeg zijn voor nu.
Maar uiteindelijk zal het knoppen zoals log in te hebben en afmelden registreren al die functionaliteit.
Maar tot dan zullen we gewoon een aantal placeholder tekst in daar en dan zijn we ook naar de nieuwe camping formulier stijl, want nu is het in vrij ruw vorm.
Dus laten we beginnen met de server en gewoon een kijkje nemen op wat we hebben.
Dus hier is onze landing page.
Hier is onze mening al kamp veranderen de lijst campings.
Het ziet er vrij goed.
Wij willen een navigatiebalk hier.
Hetzelfde op het toevoegen van nieuwe camping.
We gaan om het formulier te centreren en we gaan deze twee ingangen stapelen op de top van elkaar in plaats van hen naast elkaar.
Maar we gaan beginnen met de navigatiebalk en laten we werken gewoon op de camping template.
Dus we zullen hier terug te gaan en open de campings sjabloon om de slag te gaan.
Ik ga naar het openstellen van de bootstrap doos en ik ga om over te gaan naar componenten en vervolgens nav bar en vind ik mezelf op dit onderdeel de hele tijd, want hoewel bootstrap maakt het heel gemakkelijk om nav bar toe zie je nog steeds het is nogal een beetje van de opmaak en de onze zal dit niet lang meer zeker in ieder geval niet om te beginnen als we niet alle knoppen in het drop downs hebben.
We gaan beginnen leuk en eenvoudig, maar zelfs dan is het nog steeds een hoop lessen die we nodig hebben om te onthouden.
Dus er is zeker geen schande in het trekken van de bootstrap Darcs net als iets anders in deze klasse moet je niet te schamen over het kijken dingen voelen.
Maar in het bijzonder bootstrap het soms kan het gewoon een puinhoop van deze klassen en elementen zijn en er is geen manier om het te doen zonder te kijken naar de documentatie.
OK dus we zullen teruggaan en ik zal wat ruimte te maken op de top van mijn campings template en we gaan beginnen met het definiëren van een Nav. die weer net als de kop.
We konden gewoon een div maar een Nav. is een beetje meer betekenis.
Het is meer semantische.
Dus ik ga een nav maken met de klas nav bar en vervolgens nav bar dash default.
Er zijn verschillende soorten en verschillende kleuren of kunnen we een omgekeerde nav bar, maar we gaan gewoon om te gaan met de standaard.
En dan binnen gaan om een ​​div met klasse gelijk is aan container vocht toe te voegen en dat zal alleen maar ons mooie padding en wat ruimte in daar en dan gaan we in een andere div toe te voegen met klasse gelijk is aan nav bar header en vervolgens de binnenkant van de klasse gelijk dat onze header gaan we een anker tag toe te voegen met klasse gelijk is aan nav bar dash om een ​​einde als dat.
En dan kunnen we de link naar gewoon slash te stellen en dan gaan we sluiten dat en voeg in Yelper kamp net als dat.
En laten we eens kijken wat we krijgen met deze eenvoudige opmaak.
Dus hebben we onze NAV met een container binnen met nav bar header en de nav bar header heeft slechts één punt dat is de Neph bar merk.
Laten we vernieuwen.
OK dus we hebben de nav bar en dan hebben we ons merk hier en dit is een link die, wanneer we op het zal ons terug naar de afschuwelijke landing page te nemen.
OK dus laten we toe te voegen in een paar placeholders hier voor log in en meld je aan.
Ze zullen niet werken of ze zullen niets maar we zien er goed uit dus laten we dat nu doen over te gaan naar ons kamp te doen.
E.J. als template dan in de navigatiebalk en de verpakking, maar niet in de N.F. bar Hetter.
We gaan toe te voegen in een andere div en deze div zal een klasse van instorting die ziet wat dat wel.
En net even en Neph bar Dasch instorten, net als dat.
En dan binnen gaan we naar een UL toe te voegen en dit UL zal een klasse van navigatiebalk dash nav hebben en dan ook nog nav bar dash recht dat zal verplaatsen naar de rechterkant en vervolgens de binnenkant van dat we gaan hebben drie verbindingen voor nu en een ieder zal een bondgenoot zijn.
En dan binnen dat Ally een anker tag zal hebben en zal de eerste log in te geven.
En voor nu de H ref zal alleen worden ingesteld op onze route pad, want we hebben geen log hebben nog en we zullen hetzelfde doen voor register.
Laten we doen Sign-Up en dan ook nog uit te loggen zomaar.
OK.
Dus laten we eens kijken hoe dit eruit ziet.
Voordat we praten over wat de instorting doet als we vernieuwen en het ziet er niet goed we misten een kleine klasse terug hier op de UL.
Het lijkt erop dat we nu dus we toegevoegd navigatiebalk niet heeft toe te voegen in.
Nu heb ik nog nooit heb het recht, maar we hebben niet toevoegen op zich nav zodat we nu zullen besparen wordt vernieuwd en we eindigen met alle drie de links aan de rechterkant van de NAV en ook toen ik de grootte te veranderen hier.
Merk op dat hier precies daar het instortte.
En uiteindelijk wat we hebben is een beetje hamburger icoon.
Het ziet er net als dat waar u klikt en het menu.
Voor nu we net verberg ze als we bij die grootte.
OK.
Dus dat is alles wat we moeten doen voor de navigatiebalk uitzondering van het feit dat het slechts op deze één pagina.
Dus laten we nu toevoegen aan alle pagina's.
Dus laten we kopiëren het uit of knip het uit en we gaan om het te verplaatsen naar de kop.
Dus naar het hoofd of gedeeltelijk.
Ik zal gewoon open dat.
Met behulp van de command line C9 standpunten slash Parshall's slash header Ijaw Ja.
En dan gewoon op de top van het lichaam zullen we toevoegen dat in.
Laten we dit goed te laten inspringen.
OK daar gaan we.
En we hebben onze nav bar op de header, zodat elk bestand dat we onder de kop gedeeltelijk in wil hebben nu de nav bar, maar start de server opnieuw.
Dus het is nog steeds hier als we een nieuwe camping we ook dat de bar te krijgen toe te voegen.
En als we naar de home page hebben we ook het genoeg bar.
Grote.
Dus laten we nu overgaan tot het maken van dit formulier ziet er een beetje beter.
Dus zoals ik al eerder zijn er twee grote dingen die ik wil doen om dit formulier.
De eerste is om het centrum in het midden van de pagina en de tweede is om het formulier te stapelen verticaal in plaats van de drie ingangen of de twee ingangen en de knop horizontaal uitgelijnd over het scherm.
Je wilt ze te nemen en gestapeld ze op een top van een ander.
Laten we beginnen met de openstelling van de juiste bestand dat is de nieuwe dot.
Ja.
Dus we zullen doen uitzicht C9 slash wist dat Ejay ons en dan is hier onze vorm die we tot nu toe.
Laten we beginnen eenvoudig en voeg in een aantal van de bootstrap klassen op de vorm of aan de ingangen en dat is vorm dash controle.
En we willen dat op beide ingangen en op de knop.
Laten we toevoegen in Bootstrap klasse PTEN ETN grote zomaar.
En we doen ook tussen de fout en laten we zien hoe dat eruit ziet.
Dus knooppunt na J.
Ja vernieuwen.
OK dus krijgen we de bootstrap controles hier en de bootstrap knop hoewel het absoluut enorm en we willen dat niet.
Dus om dit zijn er een paar dingen die we kunnen doen oplossen.
De eerste is dat we alles in een container zal zetten.
Dus gingen we in div class is gelijk aan container en ik zal dit alleen maar naar de bodem.
Daar gaan we en laten we dit goed te laten inspringen.
Spaar zeer kleine verandering.
We krijgen een aantal afstand nu, maar dat is nog steeds een massieve vorm.
Dus de volgende ding dat ik zal doen is gebruik maken van het net.
Dus we zullen voegen in een andere div en deze zal klasse gelijk moeten roeien, net als dat.
Laten we dit en kopieer hem in de rij.
Dus de gehele formulier gaat in een rij nu.
En dat is ook dit gedaan.
OK opslaan vernieuwen niet een groot verschil nog niet.
En wat we gaan doen is gebruik CSSA en eigenlijk schrijven onze eigen stijl op de top van bootstrap om dit centrum door het geven van deze marge.
Auto dit alles hier op de linker en rechter kant.
En we wilden alleen maar tot het nemen van ongeveer 30 procent van de verpakking dat het in.
Dus we hebben gedaan dat, voordat we weer terug gaan en ik ga naar een van de regels te breken, zodat ze je verteld vroeg zei je inline stijlen niet.
En dat is zeker een goed idee om dat niet te doen.
Maar voor nu tot we bij een nieuwe versie waarin we onze eigen style sheets ik ga om het te doen in de rij.
Dus ik ga een nieuwe div dat we de vorm binnenkant van te maken.
Gewoon zo.
En dan ga ik die div style geven en ik ga om te beginnen met te zeggen met 30 procent.
En laat het op dat en niet gezien krijgen we een kleinere vorm.
Nu willen we naar het centrum dat.
Dus gaan we hier terug.
Zeggen nulmarge aan de boven- en onderkant en Otto links en rechts.
Nu hebben we het formulier gecentreerd.
Het volgende wat we doen is het maken van de knop neemt de gehele breedte die is nog steeds vrij lang.
Maar wat we zullen doen is geef het DTN blok dat een is gebouwd in Bootstrap manier waardoor het een blok element.
En het duurt nu de gehele lijn.
Volgende laten we wat ruimte tussen al deze elementen om dat te doen.
We zullen bootstraps gebouwd in de vorm groep klasse te gebruiken.
Dus we moeten een div class ECO vorm dash groep en we gaat nodig hebben die voor elke ingang.
Dus elke ingang gaat naar binnen één van die net als dat en dan zal ik alleen deze dupliceren en we zullen nog een recht hebben hier en dit zal naar binnen gaan van.
En dan hebben we nog een voor de knop.
Dus hebben we klassieke vorm groep drie keer en we moeten ook de afsluitende div-tags.
Daar gaan we oh er is een en we moeten de andere afsluitende div tag hier.
OK.
Dus die vorm groep net GRP dingen samen.
Maar het geeft ons ook een beetje van de ruimte.
Nu hebben we deze knop hier.
Het volgende ding dat we konden concentreren op is de tekst te centreren en om dat te doen, hoewel we moeten doen is geven tekst align center.
En nogmaals, ik ga om dat te doen in de rij.
Geen goed idee op de lange termijn in ieder geval, maar dit is een groot nut voor het gewoon om iets te snel te doen.
Dus stijl en we zullen tekst align center doen.
Spaar nu gecentreerd in het midden.
Het volgende wat we moeten doen is de kleur van deze toets.
The White is niet op zoek naar zeer goed.
Laten we het primaire knop primaire waardoor het blauw bewaart refresh.
Ja, dat ziet er een stuk beter.
Laten we ook deze link onderweg terug over te linken naar het midden ook bewegen.
Dus we alleen deze te kopiëren en alles wat we moeten doen is het te zetten binnenkant van deze marge.
Auto div zodat deze div hier na de vorm, net als dat en op te slaan.
Daar gaan we.
We hebben ons terug te gaan en het laatste wat we moeten echt doen is het toevoegen van een beetje van padding of marge, zodat het niet recht tegen dit H-1 om dat te doen.
We zullen gewoon terug te gaan en we hebben al deze div die we hebben geselecteerd.
Dus in plaats van margined nul kunnen we alleen maar geef het een marge van 20 pixels te beginnen.
Laten we eens zien hoe dat eruit ziet.
Ok, dat ziet er een beetje beter.
Laten we iets meer als 50 te doen.
En dat is misschien een beetje te veel.
Zeker uw eigen voorkeur.
Laten we terug gaan en doen 25.
Okee.
Dat is goed genoeg voor nu.
Spelen met deze zoveel als je wilt en kunt u dit formulier maken de ingangen breder als je ze of smaller wilt, maar je kunt zien dat het reageert het gaat om te verblijven in het midden en krimpen een beetje.
Laatste ding laten zich te ontdoen van deze handelsmerk.
Je zeker niet meer nodig dat.
In de bodem van onze footer dus gaan we naar de voettekst bestand en ik zal bedriegen.
Doe dit voor nu en we gewoon te ontdoen van die redden.
Nu hebben we ons formulier niet al te slecht kunnen terug te gaan krijgen we een lijst van de campings hebben we genoeg bar kunnen we een toe te voegen kijken.
We kunnen ook terug te gaan en bekijk de landing page die nog niet is gedaan.
Die heeft waarschijnlijk het meeste werk en het gaat behoorlijk anders dan de andere pagina's zal het een stuk mooier uitzien en hebben veel meer aangepaste stijlen te zijn.
Dus dat is de reden waarom ik het opslaan van tot later.
En dan hebben we ook onze nummer hier met onze dummy knoppen die niets doen.