Welkom terug in deze les gaan we om af de styling van de camping voorstelling pagina aan het einde van de laatste video.
Ik noemde een aantal van de veranderingen die we nodig hebben om te maken.
Dat kan niet worden aangepakt met pure bootstrap.
We moeten toe te voegen in een aantal aangepaste stijlen.
Dus moeten we de breedte van het beeld aanpassen, zodat duurt het maximaal 100 procent van de miniatuur.
We wilden wat opvulling in hier toevoegen.
Dit is hoe het eruit zou moeten zien waar we padding en je kunt zien dat de afbeelding de gehele container.
En om dat te bereiken we in het toonde op elke Yes kon gaan en voeg een stijl tag hier.
Maar dat is niet echt een geweldig idee.
Dus in plaats daarvan gaan we aan onze eerste aangepaste style sheet en om dat werk we gaan naar een openbare map, net als wij deden in een eerdere les te maken.
Dus ik ga naar de directory openbaar te maken en dan zal ik een andere map te maken binnenkant van publiek.
Deze zal worden genoemd style sheets, zodat het publiek slash style sheets en we zullen een ander uiteindelijk voor onze javascript is de voorkant hebben en Javascript en we zullen druk op enter en dan gaan we een enkel bestand te maken binnenkant van stylesheets openbare sosh stijl lakens slash en we noemen dit betekenen Dotsie SS Zomaar.
OK.
Nu willen we open dat.
Dus we zullen openen dat het bestand van stylesheets belangrijkste gutsiest ons en laten we beginnen met iets heel voor de hand liggende hier zoals het instellen van de achtergrondkleur voor het lichaam paars te voegen en op te slaan en dan moeten we verder gaan en krijg deze aangesloten.
Dus in de app geval moeten we een regel toe te voegen in hier, waar we een app dot gebruik maken Express dat is statisch.
En dan wat we deden vorige keer was gewoon toe te voegen in het openbaar, maar er is eigenlijk een iets betere manier van doen dat ik niet wil meteen laten zien.
Maar ik bedoel om het nu te laten zien wat we moeten doen is het toevoegen van een underscore underscore lieve naam mapnaam plus slash openbare naam dir verwijst naar de directory die dit script liep.
Dus laat me zien hoe dat eruit ziet.
Als ik gewoon een console, maar log underscore onderstrepen om uw naam, net als dat en op te slaan en de server opnieuw op.
Let op wat ik hier.
Dit is de map de naam van de hele werkruimte pad lushly van het kamp slash v 5.
Dus door het toevoegen van dir naam plus slash publieke we alleen maar veiliger, want als mogelijk een of andere manier veranderde de huidige directory kreeg raar gebeurde er iets wat we niet hadden verwacht.
Die hopelijk nooit doet, maar als het niet doet uw naam zal altijd de map die het script leeft in zijn.
Dus we gewoon veiliger en het toevoegen van slash publiek en het is gewoon de meer conventionele manier om het te doen in.
We zullen het verschil niet zien at all.
Dus we zullen redden.
We kunnen ontdoen van deze te krijgen en wat we hebben gedaan wordt toegevoegd in onze eenvoudige geest.
SS Maar we hebben nog niet gekoppeld zijn.
Dus we hebben het publiek directory geserveerd.
We zijn nu waar u alles in die map die eigenlijk gewoon één map stylesheets en een enkel bestand kan uiteindelijk ons.
Maar laten we nu gaan link naar dat bestand en laten we het doen op de header file.
Dus ik ga C9 standpunten slash Parshall's slash hetter en dan boven in de kop na bootstrap.
Ik ga naar een andere link tag toe te voegen en deze gaat H ref zijn gelijk slash stylesheets slash belangrijkste C Ss en dan zullen we ook in de rij toe te voegen hier om style sheet zijn.
OK.
Dus we hebben nu gekoppeld aan hopelijk onze style sheet dat we nu ten dienste van het publiek directory.
En laten we test het uit of het werkte.
Het zal op elke pagina, omdat elke pagina die de kop gedeeltelijk heeft opgenomen.
Laten we eens testen die uit.
We gaan gewoon naar onze landing page.
Daar gaan we.
Het is allemaal paars en als we naar onze camping te zien Er is ook een paarse achtergrond helemaal aan jou als je wilt het als paars houden.
Ik ga het terug te veranderen.
Maar ik ga toe te voegen in de stijl die we hebben gewonnen en die stijlen gaan miniaturen beïnvloeden.
Dus dit zijn de miniaturen alsmede deze miniatuur.
We gaan om de opname te maken steeg 100 procent van de breedte, zodat zowel de show pagina en de indexpagina we willen dat dat gebeurt, zodat we kunnen teruggaan en veranderen en upsy beoordelen.
Dus we zullen beginnen met alle afbeeldingen selecteren binnenkant van miniaturen.
Dus moeten we thumbnail want het is een bootstrap klasse.
En dan image-tag met de ruimte tussen hen dat is alles image-tags binnenkant van miniaturen.
En toen we willen gewoon de breedte ingesteld op 100 procent, net als dat.
En als we op te slaan en te vernieuwen en laten we naar een show pagina kunt u zien onze afbeelding nu 100 procent van deze miniatuur.
Dan moeten we dit padding probleem dat is echt makkelijk om zo goed te repareren waar we willen om zich te ontdoen van die afstand te doen die we nodig hebben om de miniatuur zelf te selecteren op te lossen.
De miniatuur div en te ontdoen van de vulling en gewoon zet deze op nul.
Dus Dot thumbnail padding 0.
Laten we het redden.
Houd uw oog op deze opvulling daar.
Nu is het weg.
En als we terug gaan naar onze index pagina kunt u zien deze zijn nu ook flush.
We hebben geen opvulling er ook niet te hebben.
Ik persoonlijk liever het zonder de opvulling hier met geen ruimte in tussen.
Maar het is een kwestie van persoonlijke voorkeur en als je wilt dat de ruimte terug naar binnen wat u kunt doen is niet deze stijlen toe te passen deze stijl in het bijzonder om elke miniatuur.
In plaats daarvan je zou kunnen geven op de show pagina die u kan dit miniatuurweergave een ID of een speciale klasse geven hier en dan zou u dit alleen vullingen toepassen nul tot die klasse of twee die ID.
Maar ik ga het doen ze allemaal en dan de andere probleem dat we moeten oplossen is de opvulling hier.
Dus binnenkant van deze titel ful als we inspecteren dat is de div die we gemaakt kunnen hier het is een div class bijschrift vol te zien.
We willen een aantal padding daar toe te voegen en het aantal we besloten op de laatste video was 9 pixels.
Dus laat me de con te sluiten ..
Ga hier terug en ik ga gewoon te selecteren in plaats van alle caption veulen Ik ga alleen naar de titel te selecteren plooien binnen van een miniatuur.
Dus Dot thumbnail ruimte bijschrift vol en we zullen ze opvulling van negen pixels net als dit te geven tenzij laten we de pagina vernieuwen.
Daar gaan we.
We krijgen die afstand die we zoeken.
Okee.
Dus dat is alles wat ik wilde doen.
Laten we snel samen te vatten wat we bereikt.
We hebben een nieuw bestand belangrijkste nazi-SS en zetten we dat binnenkant van de openbare map binnenkant van stylesheets en uiteindelijk zullen ze meer stijl platen hebben een voor de landing page in het bijzonder en we zullen ook javascript's die verder gaan in hier ook.
En dan om daadwerkelijk gebruik maken van de openbare map die we hebben om te communiceren Yes vertellen uitdrukkelijk voor het publiek directory te dienen.
En ik liet je dit underscore onderstrepen uw naam en het laatste is dat we onder het op de header file.