1
00:00:00,310 --> 00:00:04,590
Welkom terug te komen in deze les gaan we richten op styling van de show pagina.

2
00:00:04,620 --> 00:00:07,080
Dus nu de show pagina ziet er als volgt uit.

3
00:00:07,230 --> 00:00:10,710
We hebben een beetje saaie bar hier met de toetsen die niets doen.

4
00:00:10,710 --> 00:00:12,910
We hebben een H-1 met de naam van de camping.

5
00:00:13,190 --> 00:00:19,290
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.

6
00:00:19,410 --> 00:00:21,900
Ieder een beetje paragraaf.

7
00:00:21,900 --> 00:00:25,230
Dus ons doel hier is om het er een beetje meer als dit.

8
00:00:25,230 --> 00:00:27,190
Dus ik heb een zijbalk hier.

9
00:00:27,270 --> 00:00:34,250
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.

10
00:00:34,380 --> 00:00:41,350
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.

11
00:00:41,430 --> 00:00:45,360
Hun eigen kleine container daar zal ik een beetje knop om een ​​paar hefboom hebben.

12
00:00:45,360 --> 00:00:47,240
Over het algemeen is het een beetje meer gestileerd.

13
00:00:47,310 --> 00:00:50,210
We kunnen dit toevoegen en die zegt hoeveel beoordelingen zijn achtergelaten.

14
00:00:50,280 --> 00:00:51,540
Dus dat is wat we streven.

15
00:00:51,720 --> 00:00:55,170
En om te beginnen gaan we gewoon concentreren op de bootstrap net.

16
00:00:55,350 --> 00:00:58,500
Vergeet niet dat de bootstrap rooster is 12 eenheden over.

17
00:00:58,560 --> 00:01:05,500
We gaan wijzen drie van de 12 voor deze kleine side bar en dan gaan we naar toe negen voor de belangrijkste inhoud.

18
00:01:05,760 --> 00:01:10,550
Voordat we op het daadwerkelijk veranderen van om het even wat te beginnen wil ik erop wijzen dat ik werk in v 5 nu.

19
00:01:10,680 --> 00:01:13,710
Dus als je wilt om mee te volgen al deze veranderingen zullen in V 5.

20
00:01:13,800 --> 00:01:17,280
En de reden dat ik dat te doen is dat we gaan te hebben om een ​​aangepaste stylesheet te maken.

21
00:01:17,340 --> 00:01:21,910
We gaan te hebben om de publieke map en een paar andere dingen die aanzienlijke veranderingen dienen.

22
00:01:22,020 --> 00:01:24,020
Dus wilde ik een aparte versie te maken.

23
00:01:24,270 --> 00:01:30,020
Maar voordat we dat doen is het eerste wat we gaan doen is het toevoegen van een container rond dit alles bootstrap container.

24
00:01:30,150 --> 00:01:40,290
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.

25
00:01:40,290 --> 00:01:45,270
En Ik zal beginnen met het toevoegen van de zijbalk en we zullen gewoon vullen met wat dummy data, zoals we hier hebben.

26
00:01:45,660 --> 00:02:00,920
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.

27
00:02:01,080 --> 00:02:07,670
En dan de binnenkant van hier gaan we een paragraaf toe te voegen en we gaan om deze tekst die zegt Joachim krijgen.

28
00:02:08,460 --> 00:02:17,640
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.

29
00:02:17,640 --> 00:02:34,670
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.

30
00:02:35,610 --> 00:02:44,530
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.

31
00:02:44,610 --> 00:02:46,340
En dan laten we eens kijken hoe dat eruit ziet voor nu.

32
00:02:46,500 --> 00:02:52,480
Dus voor Vernieuw de pagina hebben we een zijbalk hier en ik zal een van deze items geselecteerd om te beginnen te maken.

33
00:02:52,830 --> 00:02:55,480
En alles wat we moeten doen is het toevoegen van een actieve daar.

34
00:02:55,650 --> 00:02:58,900
Als we verse We zien nu dat een van hen is actief.

35
00:02:59,460 --> 00:03:07,680
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.

36
00:03:07,770 --> 00:03:14,590
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.

37
00:03:14,940 --> 00:03:16,560
OK dus dat is een zijbalk.

38
00:03:16,560 --> 00:03:19,050
Nu gaan we naar toe in de belangrijkste inhoud.

39
00:03:19,290 --> 00:03:28,670
Dus moeten we een andere kolom en dit is de klasse kolom medium 9.

40
00:03:29,130 --> 00:03:41,820
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.

41
00:03:41,940 --> 00:03:44,150
Elk van deze is een miniatuur.

42
00:03:44,190 --> 00:03:50,160
We gaan hetzelfde doen rond het gehele beeld in de titel en de opmerkingen en dat alles.

43
00:03:50,220 --> 00:03:56,930
Dus we gaan een div toe te voegen en dat zal div class hebben gelijk miniatuur.

44
00:03:58,110 --> 00:04:06,140
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.

45
00:04:06,180 --> 00:04:08,260
Dus dat gaat om het imago van onze camping zijn.

46
00:04:08,490 --> 00:04:19,500
En dan willen we ook een klasse toe te voegen aan dat bootstrap geeft ons die het Dasch responsief.

47
00:04:19,560 --> 00:04:20,420
Daar gaan we.

48
00:04:20,490 --> 00:04:23,270
Behalve dat.

49
00:04:23,400 --> 00:04:29,570
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.

50
00:04:29,610 --> 00:04:33,280
We hebben een probleem waar dit echter niet opnemen met dat we willen dat het.

51
00:04:33,320 --> 00:04:38,660
Ik wil dat gaan helemaal over en we moeten behandelen die met een aantal aangepaste C Ss aan het eind.

52
00:04:38,970 --> 00:04:46,360
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.

53
00:04:46,440 --> 00:04:47,830
Dus we gewoon hardcoded.

54
00:04:48,150 --> 00:04:49,400
Dus laten we dat nu doen.

55
00:04:49,860 --> 00:04:57,250
En dat is een ander div en deze heeft een klasse van bijschrift dash vol.

56
00:04:57,570 --> 00:05:01,190
En dan de binnenkant van daar gaan we een H toe te voegen voor.

57
00:05:01,620 --> 00:05:09,540
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.

58
00:05:09,750 --> 00:05:15,300
En ik zal gewoon beginnen met $ 9 per nacht ook dit zal komen uit de database uiteindelijk.

59
00:05:15,540 --> 00:05:25,610
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.

60
00:05:25,650 --> 00:05:45,460
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.

61
00:05:46,500 --> 00:05:50,370
En de gedachte daarachter is dat ik uiteindelijk terug te gaan.

62
00:05:50,380 --> 00:05:56,040
Dit moet een link naar de werkelijke camping of de Park Service pagina waar we kunnen gaan om iets te boeken zijn.

63
00:05:56,130 --> 00:05:58,050
Voor nu is het gewoon de link naar nergens.

64
00:05:58,410 --> 00:05:59,020
OK.

65
00:05:59,160 --> 00:06:00,350
Dus hebben we dat in.

66
00:06:00,360 --> 00:06:01,370
We hebben een prijs.

67
00:06:01,470 --> 00:06:03,660
Laten we nu terug de omschrijving in.

68
00:06:04,230 --> 00:06:14,060
Dus dat zal slechts een paragraaf tag en dan zullen we aan onze beschrijving die is camping beschrijving daar.

69
00:06:14,640 --> 00:06:29,750
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.

70
00:06:29,940 --> 00:06:34,700
En dan in plaats van het dossier van ons zaad en zal ik de beschrijving op alle drie van hen.

71
00:06:34,720 --> 00:06:37,990
maken het het zelfde ding in plaats van blah blah blah net.

72
00:06:38,130 --> 00:06:42,380
We hebben nu een langere beetje van Lorem Ipsum en we zullen redden.

73
00:06:42,660 --> 00:06:48,430
En dan om dit in werking treden moeten we de server opnieuw op te starten, omdat dat de database zal ontvangen.

74
00:06:48,720 --> 00:06:52,340
En dan laten we teruggaan en draai naar de pagina campings.

75
00:06:52,440 --> 00:06:54,090
We hebben drie campings.

76
00:06:54,090 --> 00:06:58,330
Maar ze hebben nu een meer legitieme beschrijving wat tekst.

77
00:06:58,680 --> 00:07:00,050
Oke geweldig.

78
00:07:00,060 --> 00:07:02,240
Dus laten we nu wat we nodig hebben om te werken aan een kijkje nemen.

79
00:07:02,250 --> 00:07:03,730
Er zijn een paar kleine dingen.

80
00:07:03,880 --> 00:07:08,580
We zullen de sterren in de beoordeling alleen al tellen voor nu verlaten en we zullen naar beneden naar de opmerkingen te verplaatsen.

81
00:07:08,970 --> 00:07:22,630
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.

82
00:07:22,680 --> 00:07:24,350
Het opnemen van dezelfde hoeveelheid ruimte.

83
00:07:24,750 --> 00:07:31,800
Dus om dat te doen ga hier na de thumbnail dus dit en de titel hier is dit de miniatuur.

84
00:07:31,880 --> 00:07:34,770
Zo goed ze gaan div class toe te voegen.

85
00:07:34,870 --> 00:07:37,060
Evenaart goed.

86
00:07:37,410 --> 00:07:43,560
En dan de binnenkant van die gaan om het te openen en dit is waar het doorlussen naar de opmerkingen toe zal doen.

87
00:07:43,680 --> 00:07:55,150
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.

88
00:07:55,320 --> 00:08:02,940
En dan de binnenkant van daar gaan we ons anker tag hier toevoegen dat we al een nieuwe reactie te creëren.

89
00:08:03,300 --> 00:08:05,090
Gewoon we deze hier.

90
00:08:05,820 --> 00:08:12,350
Het is een lange, maar vergeet niet het is een anker tag die een klasse van knop knop succes dat het groen maakt heeft.

91
00:08:12,490 --> 00:08:14,620
Maar de lijnrechter is een heel lange deel.

92
00:08:14,790 --> 00:08:22,290
Het gaat om campings slash de camping ID slash reacties slash nieuw, maar op te slaan en te vernieuwen.

93
00:08:22,680 --> 00:08:23,030
OK.

94
00:08:23,040 --> 00:08:27,750
Zodat u kunt zien hebben we nu het goed, dat geeft ons de mooie grijze achtergrond in de border.

95
00:08:27,750 --> 00:08:29,960
Dit is waar we heen gaan om toe te voegen in de commentaren.

96
00:08:30,120 --> 00:08:34,170
Dus moeten we nu doen is lus door de opmerkingen en hebben we al gedaan.

97
00:08:34,170 --> 00:08:38,500
Maar in plaats van alleen het maken van een paragraaf voor elke we eigenlijk gaan naar een aparte rij te maken.

98
00:08:38,760 --> 00:08:42,880
Dus ik zal je laten zien hoe dat eruit ziet als het deze te kopiëren of knippen.

99
00:08:43,020 --> 00:08:49,140
En we kunnen deze extra paragraaf te schrappen en we gaan dat direct na de tekst recht te zetten.

100
00:08:49,440 --> 00:08:51,850
En laten we dit doen behoren.

101
00:08:52,090 --> 00:09:03,830
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.

102
00:09:04,750 --> 00:09:14,040
En dan binnenkant van elke We gaan naar een ander div class toe gelijk kolom medium 12 en behalve dat.

103
00:09:14,110 --> 00:09:21,850
En als we een kijkje nemen op wat we hier hebben we eindigen met de gebruikersnaam e-slash gebruikersnaam waarin we de auteur noemen.

104
00:09:22,090 --> 00:09:30,760
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.

105
00:09:30,750 --> 00:09:41,350
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.

106
00:09:41,350 --> 00:09:43,890
Dus laten we proberen dat en ga hier.

107
00:09:43,950 --> 00:09:45,900
We hebben onze column medium 12.

108
00:09:46,290 --> 00:09:49,800
En de binnenkant van dat we gaan beginnen met alleen het toevoegen van de reactie auteur.

109
00:09:50,130 --> 00:09:51,770
Dus laten we gewoon toevoegen dat daar.

110
00:09:52,200 --> 00:09:57,520
En dan onder dat we gaan toe te voegen in een overspanning en dit zal worden aan de rechterkant.

111
00:09:57,580 --> 00:09:59,770
Dus we zullen voegen klassieke pull rechts.

112
00:09:59,970 --> 00:10:03,340
En dan hier zullen we voeg gewoon tien dagen geleden voor nu.

113
00:10:03,510 --> 00:10:05,300
Nou gewoon moeilijk code in.

114
00:10:05,400 --> 00:10:09,520
En dan is het laatste wat ze willen doen is eigenlijk de reactie tekst weer te geven.

115
00:10:09,680 --> 00:10:22,770
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 .

116
00:10:22,770 --> 00:10:29,680
We willen dat ze elkaar en nu in dezelfde kolom, maar op te slaan en terug te gaan.

117
00:10:29,700 --> 00:10:31,340
Zie wat we krijgen.

118
00:10:31,360 --> 00:10:31,980
Okee.

119
00:10:31,980 --> 00:10:33,050
Dus hebben we een reactie.

120
00:10:33,070 --> 00:10:33,930
Dat is het.

121
00:10:33,930 --> 00:10:36,580
Maar je kunt zien dat we een knop toe te voegen een nieuwe reactie.

122
00:10:36,580 --> 00:10:37,980
Zorg ervoor dat het werkt.

123
00:10:38,770 --> 00:10:40,450
En de commentaren zijn hier weergegeven.

124
00:10:40,470 --> 00:10:41,600
We missen de rating.

125
00:10:41,670 --> 00:10:44,460
Dus het ziet er een beetje raar, maar dat is prima voor nu.

126
00:10:44,700 --> 00:10:48,460
Wat wij zouden willen doen is toe te voegen nog een of twee opmerkingen.

127
00:10:48,450 --> 00:10:52,600
Dus ga hier terug en laten we gewoon gebruik maken van wat meer Lorem ipsum.

128
00:10:52,600 --> 00:10:57,100
Dus ik ga gewoon om delen van deze te kopiëren en voeg ze in als commentaar.

129
00:10:57,270 --> 00:11:02,440
Gebruik gewoon wat van die en de auteur hier kampeert.

130
00:11:02,520 --> 00:11:03,600
Opa.

131
00:11:03,820 --> 00:11:05,000
Indienen.

132
00:11:05,720 --> 00:11:06,090
OK.

133
00:11:06,100 --> 00:11:08,420
Dus we nu krijgen onze opmerkingen hier prima.

134
00:11:08,430 --> 00:11:09,550
Dat werkt.

135
00:11:09,540 --> 00:11:11,610
Ik heb wel wat ruimte die we willen toevoegen.

136
00:11:11,610 --> 00:11:17,520
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.

137
00:11:17,520 --> 00:11:23,890
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.

138
00:11:24,370 --> 00:11:33,210
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.

139
00:11:33,260 --> 00:11:38,680
Je hebt een knop en we hebben al onze opmerkingen worden weergegeven op de korte termijn.

140
00:11:38,730 --> 00:11:40,310
Waarom gaan we niet bouwen aan de gebruikersnaam.

141
00:11:40,620 --> 00:11:52,950
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.

142
00:11:52,950 --> 00:11:53,770
Daar gaan we.

143
00:11:53,830 --> 00:11:57,470
Nog steeds niet geweldig, maar goed genoeg voor nu.

144
00:11:57,540 --> 00:12:00,060
Dus dat is eigenlijk al de bootstrap wat we moeten doen voor nu.

145
00:12:00,240 --> 00:12:01,390
Maar we zijn nog niet klaar.

146
00:12:01,470 --> 00:12:09,900
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.

147
00:12:10,050 --> 00:12:15,000
Ook al heb ik een punt naar het exact hetzelfde beeld dat het niet over de feitelijke beeld zelf te gebruiken.

148
00:12:15,120 --> 00:12:16,820
Het probleem komt neer op onze styling.

149
00:12:17,080 --> 00:12:22,890
En wat we willen doen is naar binnen en vertel dit beeld tot het nemen van 100 procent van de container.

150
00:12:23,160 --> 00:12:29,150
Dus ik zal je laten zien kunnen we gewoon te inspecteren en dit is een groot nut voor de inspecteur hier.

151
00:12:29,350 --> 00:12:36,260
We kunnen het hier te selecteren en hier kunnen we in een stijl toe met 100 procent.

152
00:12:36,270 --> 00:12:37,060
En daar gaan we.

153
00:12:37,120 --> 00:12:39,540
Dus dat is een ding dat we willen doen.

154
00:12:39,610 --> 00:12:45,320
Er is nog steeds een zeer klein verschil dat er is een weinig ruimte daar dat we niet op deze.

155
00:12:45,470 --> 00:12:56,670
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.

156
00:12:57,580 --> 00:13:02,700
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.

157
00:13:02,730 --> 00:13:05,350
We gaan een aantal afstand hier ook toe.

158
00:13:05,350 --> 00:13:09,740
Je kunt zien dat er een aantal uit elkaar hier gedaan en we kunnen oplossen die op dit moment.

159
00:13:09,820 --> 00:13:19,560
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.

160
00:13:19,570 --> 00:13:24,760
Dus wat we willen doen is toe te voegen in een klein beetje van padding op de titel veulen die dit vak hier.

161
00:13:24,990 --> 00:13:31,220
En de Padam we willen is op de links rechts boven en onder en het gaat om negen of 10 pixels.

162
00:13:31,230 --> 00:13:35,370
Dus we gewoon doen padding negen x.

163
00:13:35,760 --> 00:13:36,510
En daar gaan we.

164
00:13:36,540 --> 00:13:38,240
We eindigen met een mooie afstand daar.