1
00:00:00,240 --> 00:00:04,170
Welkom terug in deze les gaan we verder werken aan uw kamp.

2
00:00:04,170 --> 00:00:06,070
We hebben al de eerste set-up gedaan.

3
00:00:06,180 --> 00:00:13,990
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.

4
00:00:14,010 --> 00:00:17,550
Nu gaan we om te gaan in de stijl van de pagina campings met behulp van bootstrap.

5
00:00:17,550 --> 00:00:18,600
Dus laten we beginnen.

6
00:00:18,600 --> 00:00:21,230
Het allereerste wat ik ga doen is ervoor zorgen dat mijn servers draaien.

7
00:00:22,000 --> 00:00:25,260
En net een kijkje nemen op wat we nu hebben.

8
00:00:25,350 --> 00:00:26,740
Zeker een beetje underwhelming.

9
00:00:26,850 --> 00:00:28,110
Dus ik heb twee hoofddoelen.

10
00:00:28,170 --> 00:00:34,150
De eerste is dat we willen een betere kop in de titel hier dus dit moet mooier uitzien.

11
00:00:34,170 --> 00:00:43,000
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.

12
00:00:43,020 --> 00:00:48,200
In plaats daarvan willen we een raster van kleinere beelden gaan over en dat rooster moet responsief zijn.

13
00:00:48,480 --> 00:00:52,850
Laten we beginnen met de eerste, die krijgt deze titel tekst een beetje mooier uitzien.

14
00:00:53,100 --> 00:00:58,440
Dus ik ga openstellen kampeerterreinen dat ja ik ga gewoon hier om te werken.

15
00:00:58,590 --> 00:01:06,390
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.

16
00:01:06,440 --> 00:01:12,510
Dus om te werken aan de kop gaan we een header-tag die we nog niet eerder hebben gezien gebruiken.

17
00:01:12,510 --> 00:01:15,740
Functioneel werkt op exact dezelfde manier als iets als een div.

18
00:01:15,780 --> 00:01:20,080
Het enige verschil is dat dit een beetje semantische betekenis aan.

19
00:01:20,400 --> 00:01:25,850
Met behulp van header in plaats van alleen een willekeurige div, maar het maakt eigenlijk niet uit het is gewoon een container.

20
00:01:26,010 --> 00:01:42,540
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.

21
00:01:42,570 --> 00:01:44,890
We hebben nu wat de Jumbotron genoemd.

22
00:01:45,130 --> 00:01:46,280
Het is nog steeds niet geweldig.

23
00:01:46,290 --> 00:01:50,720
Het volgende wat we moeten doen is het maken van alles wat de binnenkant van een bootstrap container.

24
00:01:51,030 --> 00:02:01,260
Dus alles wat we hier zien dit alles ga ik inspringen en ik ga een div voegen met klasse evenaart container, net als dat.

25
00:02:01,460 --> 00:02:07,670
En dan zullen we alles blijven binnenkant van dat en dit zal een aantal speccing toe te voegen voor ons op de zijkanten.

26
00:02:07,830 --> 00:02:08,710
Vernieuwen.

27
00:02:08,880 --> 00:02:13,800
U kunt zien dat we niet langer dingen recht tegen de linkerkant hier.

28
00:02:13,830 --> 00:02:20,330
We hebben wat ruimte en onze JumboTron op zoek is naar een beetje dichterbij en uiteindelijk zal een saaie bar verschijnen.

29
00:02:20,520 --> 00:02:22,890
Dus dit ziet er een beetje mooier ook.

30
00:02:22,890 --> 00:02:25,530
Voor nu hebben we alleen de Jumbotron.

31
00:02:25,590 --> 00:02:27,570
Laten we nu de tekst zelf veranderen.

32
00:02:27,600 --> 00:02:34,530
Dus in plaats van deze is de pagina campings laten we een welkomstbericht Welkom op het kamp.

33
00:02:34,710 --> 00:02:56,550
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.

34
00:02:56,670 --> 00:02:58,940
Zoiets maakt niet echt uit.

35
00:02:58,950 --> 00:03:00,850
We zullen vernieuwen redden.

36
00:03:01,170 --> 00:03:06,650
OK dus nu hebben we een beetje tag lijn en het laatste wat we willen doen is het verzorgen van deze link.

37
00:03:06,690 --> 00:03:08,280
Het toevoegen van nieuwe camping link.

38
00:03:08,580 --> 00:03:12,640
Dus ik ga om te kopiëren dat en ook zet het in de Jumbotron.

39
00:03:12,650 --> 00:03:15,070
Maar ik ga om het te maken in een knop.

40
00:03:15,150 --> 00:03:24,780
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.

41
00:03:24,780 --> 00:03:26,680
En ik doe dat alleen voor spatiëring.

42
00:03:26,730 --> 00:03:43,320
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.

43
00:03:43,330 --> 00:03:45,420
Nu hebben we een nieuwe camping button gehad.

44
00:03:45,510 --> 00:03:49,930
We klikken op het en het neemt ons mee naar de vorm die volledig is ingericht.

45
00:03:50,220 --> 00:03:54,050
Een klein ding is dat als ik hier dit venster wijzigen.

46
00:03:55,320 --> 00:04:01,740
Merk op hoe onze tekst gaat recht tegen de rand van de Jumbotron dat is niet geweldig.

47
00:04:01,860 --> 00:04:24,330
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.

48
00:04:24,420 --> 00:04:26,040
En nu als we vernieuwen.

49
00:04:26,210 --> 00:04:30,860
Ze zag er hetzelfde uit, maar toen we krimpen naar beneden hebben we nu wat ruimte daar.

50
00:04:31,230 --> 00:04:33,790
OK dus dat is de header gedeelte.

51
00:04:33,840 --> 00:04:37,680
Nu willen we werken aan dat raster van afbeeldingen en ik zal van te voren met u.

52
00:04:37,680 --> 00:04:39,770
Het is zeker een beetje meer werk.

53
00:04:40,020 --> 00:04:53,520
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.

54
00:04:53,580 --> 00:05:15,790
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.

55
00:05:15,790 --> 00:05:25,470
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.

56
00:05:25,560 --> 00:05:28,820
Het is een div class is gelijk aan rij net als dat.

57
00:05:28,970 --> 00:05:43,380
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.

58
00:05:43,420 --> 00:05:53,580
Dus ik ga dat nu te doen waar ik ga dit alles code voor elke lus gaat ingesprongen zomaar gezet.

59
00:05:53,830 --> 00:05:57,180
En dan is hier moeten we onze afsluitende div tag.

60
00:05:57,490 --> 00:06:01,500
Dus dit is de klassieke rij en dit is voor de container.

61
00:06:02,020 --> 00:06:02,470
OK.

62
00:06:02,730 --> 00:06:28,270
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.

63
00:06:28,300 --> 00:06:36,400
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.

64
00:06:36,610 --> 00:06:56,560
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.

65
00:06:56,680 --> 00:07:02,210
We hebben image diensten die gelijk is aan de camping u RL En we zullen gewoon het bij laten.

66
00:07:02,230 --> 00:07:08,580
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.

67
00:07:09,280 --> 00:07:09,820
Okee.

68
00:07:09,910 --> 00:07:11,850
Dus hebben we een raster van afbeeldingen nu.

69
00:07:11,890 --> 00:07:14,860
Er zijn slechts drie, maar we krijgen dit raster.

70
00:07:15,220 --> 00:07:18,580
En ik zal je laten zien wat ik bedoelde met waardoor het responsief.

71
00:07:18,580 --> 00:07:25,270
Dus als een krimp deze verklaring hoe het verandert in twee velden of twee items over het scherm.

72
00:07:25,280 --> 00:07:26,910
Vergeet niet dat er 12 eenheden.

73
00:07:27,040 --> 00:07:44,190
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.

74
00:07:44,350 --> 00:07:49,130
En we hoefden niet te schrijven dat, omdat de extra kleine standaard is om 12 eenheden te gebruiken.

75
00:07:49,180 --> 00:07:52,050
Dus we hoefden niet te vermelden dat.

76
00:07:52,090 --> 00:08:07,550
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.

77
00:08:07,780 --> 00:08:13,080
En dan binnen zal er een H te zetten voor de naam camping.

78
00:08:14,070 --> 00:08:18,670
OK laten opslaan laten we eens kijken hoe het eruit ziet.

79
00:08:18,670 --> 00:08:19,270
Daar gaan we.

80
00:08:19,300 --> 00:08:21,030
We krijgen deze leuke kaarten.

81
00:08:21,040 --> 00:08:23,700
Dit is de verkleinde klasse maken die voor ons.

82
00:08:23,840 --> 00:08:25,030
We hebben onze beelden.

83
00:08:25,210 --> 00:08:30,480
En laten we zien hoe het eruit ziet als we een heleboel foto's gaan in een bos van items.

84
00:08:30,760 --> 00:08:34,160
Dus je hoeft dit niet te doen, maar ik ga dit plakken in hier.

85
00:08:34,600 --> 00:08:36,860
Geef ons wat meer gegevens.

86
00:08:36,880 --> 00:08:38,800
Het zal dubbele gegevens, maar dat is prima.

87
00:08:38,940 --> 00:08:46,250
En dan moeten we ervoor zorgen dat we de juiste komma's toe te voegen en zo komma daar en om daar te komen.

88
00:08:46,300 --> 00:08:49,840
Nu als we Oh vernieuwen moeten we de server opnieuw op te starten.

89
00:08:50,170 --> 00:08:52,060
En elke keer dat we knoeien met de app.

90
00:08:52,120 --> 00:08:53,330
Ja.

91
00:08:53,590 --> 00:08:58,070
En nu als we vernieuwen zal hij zien we hebben een klein probleem.

92
00:08:58,120 --> 00:09:00,040
Ons netwerk is een beetje verknald.

93
00:09:00,170 --> 00:09:03,810
En wat is er gebeurt is dat we hebben beelden die zijn van verschillende hoogtes.

94
00:09:04,090 --> 00:09:07,940
Dus dit Salmon Creek is anders dan deze.

95
00:09:08,410 --> 00:09:10,710
Hoewel de breedte gelijk zijn in dit geval.

96
00:09:10,930 --> 00:09:16,210
En dat is het gooien van het net en er is een gemakkelijke manier om het te repareren maar het is een beetje wankel.

97
00:09:16,270 --> 00:09:19,130
En ik zal je laten zien hoe we dat doen in plaats van onze camping.

98
00:09:19,270 --> 00:09:19,960
Ja.

99
00:09:20,320 --> 00:09:26,980
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.

100
00:09:27,010 --> 00:09:32,530
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.

101
00:09:32,530 --> 00:09:37,360
Dus zetten we stijl te geven flex en flex wrap om wrap zijn.

102
00:09:37,480 --> 00:09:39,900
En dat zijn twee eigenschappen die gaan ons net helpen.

103
00:09:39,910 --> 00:09:44,810
Dus als ik waren vers Nu komen we uit op de grid waar het meer flexibel.

104
00:09:44,860 --> 00:09:53,400
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.

105
00:09:53,470 --> 00:10:02,750
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.

106
00:10:02,800 --> 00:10:13,370
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.

107
00:10:13,540 --> 00:10:15,410
En ik denk dat ziet er een beetje beter.

108
00:10:15,490 --> 00:10:20,500
Ook een kwestie van persoonlijke voorkeur en nu zijn we klaar met camping pagina voor het moment.

109
00:10:20,620 --> 00:10:27,550
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.

110
00:10:27,550 --> 00:10:31,900
En laat me gewoon laten zien onze mooie responsieve raster dat we hebben.

111
00:10:31,900 --> 00:10:33,260
Dus dit is mobile.

112
00:10:33,310 --> 00:10:38,890
We krijgen dit mooie lay-out helemaal tot vier beelden over te gaan.

113
00:10:39,160 --> 00:10:41,140
OK, dus ik ben erg blij met hoe dit eruit ziet.