1
00:00:00,420 --> 00:00:06,550
Welkom terug in deze les gaan we om af de styling van de camping voorstelling pagina aan het einde van de laatste video.

2
00:00:06,630 --> 00:00:08,540
Ik noemde een aantal van de veranderingen die we nodig hebben om te maken.

3
00:00:08,640 --> 00:00:10,970
Dat kan niet worden aangepakt met pure bootstrap.

4
00:00:10,980 --> 00:00:13,050
We moeten toe te voegen in een aantal aangepaste stijlen.

5
00:00:13,050 --> 00:00:18,570
Dus moeten we de breedte van het beeld aanpassen, zodat duurt het maximaal 100 procent van de miniatuur.

6
00:00:18,750 --> 00:00:21,050
We wilden wat opvulling in hier toevoegen.

7
00:00:21,120 --> 00:00:25,880
Dit is hoe het eruit zou moeten zien waar we padding en je kunt zien dat de afbeelding de gehele container.

8
00:00:26,280 --> 00:00:31,810
En om dat te bereiken we in het toonde op elke Yes kon gaan en voeg een stijl tag hier.

9
00:00:32,280 --> 00:00:34,050
Maar dat is niet echt een geweldig idee.

10
00:00:34,050 --> 00:00:42,960
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.

11
00:00:43,110 --> 00:00:48,790
Dus ik ga naar de directory openbaar te maken en dan zal ik een andere map te maken binnenkant van publiek.

12
00:00:48,870 --> 00:01:10,000
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.

13
00:01:10,470 --> 00:01:11,260
OK.

14
00:01:11,520 --> 00:01:13,040
Nu willen we open dat.

15
00:01:13,380 --> 00:01:28,140
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.

16
00:01:28,140 --> 00:01:36,790
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.

17
00:01:37,380 --> 00:01:44,380
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.

18
00:01:44,400 --> 00:01:57,050
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.

19
00:01:57,180 --> 00:01:58,630
Dus laat me zien hoe dat eruit ziet.

20
00:01:58,800 --> 00:02:10,190
Als ik gewoon een console, maar log underscore onderstrepen om uw naam, net als dat en op te slaan en de server opnieuw op.

21
00:02:12,000 --> 00:02:13,440
Let op wat ik hier.

22
00:02:13,530 --> 00:02:19,560
Dit is de map de naam van de hele werkruimte pad lushly van het kamp slash v 5.

23
00:02:19,710 --> 00:02:30,390
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.

24
00:02:30,450 --> 00:02:36,650
Die hopelijk nooit doet, maar als het niet doet uw naam zal altijd de map die het script leeft in zijn.

25
00:02:36,900 --> 00:02:41,860
Dus we gewoon veiliger en het toevoegen van slash publiek en het is gewoon de meer conventionele manier om het te doen in.

26
00:02:42,060 --> 00:02:43,820
We zullen het verschil niet zien at all.

27
00:02:43,860 --> 00:02:44,920
Dus we zullen redden.

28
00:02:44,930 --> 00:02:50,140
We kunnen ontdoen van deze te krijgen en wat we hebben gedaan wordt toegevoegd in onze eenvoudige geest.

29
00:02:50,190 --> 00:02:52,390
SS Maar we hebben nog niet gekoppeld zijn.

30
00:02:52,530 --> 00:02:54,500
Dus we hebben het publiek directory geserveerd.

31
00:02:54,600 --> 00:03:01,540
We zijn nu waar u alles in die map die eigenlijk gewoon één map stylesheets en een enkel bestand kan uiteindelijk ons.

32
00:03:01,620 --> 00:03:05,510
Maar laten we nu gaan link naar dat bestand en laten we het doen op de header file.

33
00:03:05,580 --> 00:03:14,920
Dus ik ga C9 standpunten slash Parshall's slash hetter en dan boven in de kop na bootstrap.

34
00:03:14,980 --> 00:03:31,330
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.

35
00:03:31,950 --> 00:03:32,500
OK.

36
00:03:32,850 --> 00:03:38,340
Dus we hebben nu gekoppeld aan hopelijk onze style sheet dat we nu ten dienste van het publiek directory.

37
00:03:38,340 --> 00:03:40,680
En laten we test het uit of het werkte.

38
00:03:40,740 --> 00:03:45,350
Het zal op elke pagina, omdat elke pagina die de kop gedeeltelijk heeft opgenomen.

39
00:03:45,630 --> 00:03:46,380
Laten we eens testen die uit.

40
00:03:46,380 --> 00:03:48,450
We gaan gewoon naar onze landing page.

41
00:03:48,450 --> 00:03:48,980
Daar gaan we.

42
00:03:48,990 --> 00:03:56,510
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.

43
00:03:56,610 --> 00:03:57,620
Ik ga het terug te veranderen.

44
00:03:57,750 --> 00:04:03,210
Maar ik ga toe te voegen in de stijl die we hebben gewonnen en die stijlen gaan miniaturen beïnvloeden.

45
00:04:03,210 --> 00:04:07,050
Dus dit zijn de miniaturen alsmede deze miniatuur.

46
00:04:07,080 --> 00:04:18,000
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.

47
00:04:18,180 --> 00:04:21,750
Dus we zullen beginnen met alle afbeeldingen selecteren binnenkant van miniaturen.

48
00:04:21,900 --> 00:04:25,300
Dus moeten we thumbnail want het is een bootstrap klasse.

49
00:04:25,550 --> 00:04:31,290
En dan image-tag met de ruimte tussen hen dat is alles image-tags binnenkant van miniaturen.

50
00:04:31,290 --> 00:04:36,180
En toen we willen gewoon de breedte ingesteld op 100 procent, net als dat.

51
00:04:36,300 --> 00:04:43,510
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.

52
00:04:43,860 --> 00:04:51,820
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.

53
00:04:51,870 --> 00:04:56,350
De miniatuur div en te ontdoen van de vulling en gewoon zet deze op nul.

54
00:04:56,490 --> 00:05:01,580
Dus Dot thumbnail padding 0.

55
00:05:01,890 --> 00:05:02,930
Laten we het redden.

56
00:05:03,120 --> 00:05:05,260
Houd uw oog op deze opvulling daar.

57
00:05:05,280 --> 00:05:06,130
Nu is het weg.

58
00:05:06,510 --> 00:05:11,230
En als we terug gaan naar onze index pagina kunt u zien deze zijn nu ook flush.

59
00:05:11,280 --> 00:05:12,980
We hebben geen opvulling er ook niet te hebben.

60
00:05:13,320 --> 00:05:17,100
Ik persoonlijk liever het zonder de opvulling hier met geen ruimte in tussen.

61
00:05:17,250 --> 00:05:27,910
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.

62
00:05:27,990 --> 00:05:39,280
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.

63
00:05:39,480 --> 00:05:45,380
Maar ik ga het doen ze allemaal en dan de andere probleem dat we moeten oplossen is de opvulling hier.

64
00:05:45,780 --> 00:05:55,560
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.

65
00:05:55,770 --> 00:06:00,870
We willen een aantal padding daar toe te voegen en het aantal we besloten op de laatste video was 9 pixels.

66
00:06:00,930 --> 00:06:02,830
Dus laat me de con te sluiten ..

67
00:06:03,030 --> 00:06:11,100
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.

68
00:06:11,220 --> 00:06:23,130
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.

69
00:06:23,130 --> 00:06:23,750
Daar gaan we.

70
00:06:23,760 --> 00:06:26,130
We krijgen die afstand die we zoeken.

71
00:06:26,130 --> 00:06:26,390
Okee.

72
00:06:26,400 --> 00:06:27,610
Dus dat is alles wat ik wilde doen.

73
00:06:27,780 --> 00:06:29,910
Laten we snel samen te vatten wat we bereikt.

74
00:06:29,910 --> 00:06:43,560
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.

75
00:06:43,680 --> 00:06:50,410
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.

76
00:06:50,520 --> 00:06:56,660
En ik liet je dit underscore onderstrepen uw naam en het laatste is dat we onder het op de header file.