1
00:00:00,250 --> 00:00:03,150
Deze video gaan we verder styling het kamp.

2
00:00:03,360 --> 00:00:08,590
We gaan een navigatiebalk toe te voegen aan elke pagina en dat nav bar zal vrij leeg zijn voor nu.

3
00:00:08,700 --> 00:00:14,780
Maar uiteindelijk zal het knoppen zoals log in te hebben en afmelden registreren al die functionaliteit.

4
00:00:15,030 --> 00:00:23,510
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.

5
00:00:23,580 --> 00:00:28,860
Dus laten we beginnen met de server en gewoon een kijkje nemen op wat we hebben.

6
00:00:28,890 --> 00:00:31,150
Dus hier is onze landing page.

7
00:00:31,680 --> 00:00:36,250
Hier is onze mening al kamp veranderen de lijst campings.

8
00:00:36,290 --> 00:00:38,180
Het ziet er vrij goed.

9
00:00:38,430 --> 00:00:40,490
Wij willen een navigatiebalk hier.

10
00:00:40,890 --> 00:00:43,370
Hetzelfde op het toevoegen van nieuwe camping.

11
00:00:43,740 --> 00:00:51,050
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.

12
00:00:51,360 --> 00:00:56,400
Maar we gaan beginnen met de navigatiebalk en laten we werken gewoon op de camping template.

13
00:00:56,610 --> 00:01:00,990
Dus we zullen hier terug te gaan en open de campings sjabloon om de slag te gaan.

14
00:01:00,990 --> 00:01:22,910
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.

15
00:01:22,950 --> 00:01:28,130
We gaan beginnen leuk en eenvoudig, maar zelfs dan is het nog steeds een hoop lessen die we nodig hebben om te onthouden.

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

17
00:01:35,100 --> 00:01:42,860
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.

18
00:01:42,870 --> 00:01:55,180
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.

19
00:01:55,320 --> 00:01:59,450
We konden gewoon een div maar een Nav. is een beetje meer betekenis.

20
00:01:59,460 --> 00:02:00,870
Het is meer semantische.

21
00:02:01,050 --> 00:02:09,580
Dus ik ga een nav maken met de klas nav bar en vervolgens nav bar dash default.

22
00:02:09,600 --> 00:02:16,240
Er zijn verschillende soorten en verschillende kleuren of kunnen we een omgekeerde nav bar, maar we gaan gewoon om te gaan met de standaard.

23
00:02:16,410 --> 00:02:54,090
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.

24
00:02:54,330 --> 00:03:04,850
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.

25
00:03:04,980 --> 00:03:07,750
En laten we eens kijken wat we krijgen met deze eenvoudige opmaak.

26
00:03:07,920 --> 00:03:16,730
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.

27
00:03:17,010 --> 00:03:18,290
Laten we vernieuwen.

28
00:03:18,780 --> 00:03:27,710
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.

29
00:03:28,200 --> 00:03:34,320
OK dus laten we toe te voegen in een paar placeholders hier voor log in en meld je aan.

30
00:03:34,320 --> 00:03:40,870
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.

31
00:03:40,890 --> 00:03:47,710
E.J. als template dan in de navigatiebalk en de verpakking, maar niet in de N.F. bar Hetter.

32
00:03:47,970 --> 00:03:56,220
We gaan toe te voegen in een andere div en deze div zal een klasse van instorting die ziet wat dat wel.

33
00:03:56,220 --> 00:04:01,810
En net even en Neph bar Dasch instorten, net als dat.

34
00:04:01,890 --> 00:04:24,520
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.

35
00:04:25,170 --> 00:04:32,820
En dan binnen dat Ally een anker tag zal hebben en zal de eerste log in te geven.

36
00:04:32,850 --> 00:04:42,940
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.

37
00:04:42,980 --> 00:04:49,540
Laten we doen Sign-Up en dan ook nog uit te loggen zomaar.

38
00:04:49,910 --> 00:04:50,680
OK.

39
00:04:51,210 --> 00:04:52,580
Dus laten we eens kijken hoe dit eruit ziet.

40
00:04:52,590 --> 00:05:02,090
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.

41
00:05:02,290 --> 00:05:06,470
Het lijkt erop dat we nu dus we toegevoegd navigatiebalk niet heeft toe te voegen in.

42
00:05:06,470 --> 00:05:20,430
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.

43
00:05:20,430 --> 00:05:25,130
Merk op dat hier precies daar het instortte.

44
00:05:25,680 --> 00:05:29,300
En uiteindelijk wat we hebben is een beetje hamburger icoon.

45
00:05:29,340 --> 00:05:32,610
Het ziet er net als dat waar u klikt en het menu.

46
00:05:33,050 --> 00:05:36,180
Voor nu we net verberg ze als we bij die grootte.

47
00:05:36,450 --> 00:05:36,690
OK.

48
00:05:36,690 --> 00:05:42,240
Dus dat is alles wat we moeten doen voor de navigatiebalk uitzondering van het feit dat het slechts op deze één pagina.

49
00:05:42,240 --> 00:05:45,390
Dus laten we nu toevoegen aan alle pagina's.

50
00:05:45,390 --> 00:05:50,030
Dus laten we kopiëren het uit of knip het uit en we gaan om het te verplaatsen naar de kop.

51
00:05:50,460 --> 00:05:52,400
Dus naar het hoofd of gedeeltelijk.

52
00:05:52,680 --> 00:05:53,790
Ik zal gewoon open dat.

53
00:05:53,790 --> 00:06:00,130
Met behulp van de command line C9 standpunten slash Parshall's slash header Ijaw Ja.

54
00:06:00,570 --> 00:06:03,840
En dan gewoon op de top van het lichaam zullen we toevoegen dat in.

55
00:06:04,320 --> 00:06:06,080
Laten we dit goed te laten inspringen.

56
00:06:06,570 --> 00:06:09,230
OK daar gaan we.

57
00:06:09,900 --> 00:06:20,550
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.

58
00:06:20,850 --> 00:06:25,790
Dus het is nog steeds hier als we een nieuwe camping we ook dat de bar te krijgen toe te voegen.

59
00:06:26,160 --> 00:06:31,270
En als we naar de home page hebben we ook het genoeg bar.

60
00:06:31,530 --> 00:06:32,110
Grote.

61
00:06:32,130 --> 00:06:36,950
Dus laten we nu overgaan tot het maken van dit formulier ziet er een beetje beter.

62
00:06:36,990 --> 00:06:40,840
Dus zoals ik al eerder zijn er twee grote dingen die ik wil doen om dit formulier.

63
00:06:40,860 --> 00:06:53,270
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.

64
00:06:53,370 --> 00:06:56,120
Je wilt ze te nemen en gestapeld ze op een top van een ander.

65
00:06:56,370 --> 00:07:00,820
Laten we beginnen met de openstelling van de juiste bestand dat is de nieuwe dot.

66
00:07:00,960 --> 00:07:01,510
Ja.

67
00:07:01,650 --> 00:07:11,470
Dus we zullen doen uitzicht C9 slash wist dat Ejay ons en dan is hier onze vorm die we tot nu toe.

68
00:07:11,970 --> 00:07:20,810
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.

69
00:07:21,150 --> 00:07:25,390
En we willen dat op beide ingangen en op de knop.

70
00:07:25,500 --> 00:07:33,290
Laten we toevoegen in Bootstrap klasse PTEN ETN grote zomaar.

71
00:07:33,570 --> 00:07:39,090
En we doen ook tussen de fout en laten we zien hoe dat eruit ziet.

72
00:07:39,090 --> 00:07:40,920
Dus knooppunt na J.

73
00:07:41,030 --> 00:07:42,830
Ja vernieuwen.

74
00:07:43,300 --> 00:07:51,060
OK dus krijgen we de bootstrap controles hier en de bootstrap knop hoewel het absoluut enorm en we willen dat niet.

75
00:07:51,210 --> 00:07:54,840
Dus om dit zijn er een paar dingen die we kunnen doen oplossen.

76
00:07:54,840 --> 00:07:57,900
De eerste is dat we alles in een container zal zetten.

77
00:07:58,110 --> 00:08:09,960
Dus gingen we in div class is gelijk aan container en ik zal dit alleen maar naar de bodem.

78
00:08:10,930 --> 00:08:13,690
Daar gaan we en laten we dit goed te laten inspringen.

79
00:08:13,950 --> 00:08:16,450
Spaar zeer kleine verandering.

80
00:08:16,530 --> 00:08:19,850
We krijgen een aantal afstand nu, maar dat is nog steeds een massieve vorm.

81
00:08:20,220 --> 00:08:23,280
Dus de volgende ding dat ik zal doen is gebruik maken van het net.

82
00:08:23,520 --> 00:08:30,710
Dus we zullen voegen in een andere div en deze zal klasse gelijk moeten roeien, net als dat.

83
00:08:30,720 --> 00:08:33,750
Laten we dit en kopieer hem in de rij.

84
00:08:33,780 --> 00:08:36,630
Dus de gehele formulier gaat in een rij nu.

85
00:08:36,810 --> 00:08:39,220
En dat is ook dit gedaan.

86
00:08:39,610 --> 00:08:44,930
OK opslaan vernieuwen niet een groot verschil nog niet.

87
00:08:44,970 --> 00:08:52,880
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.

88
00:08:52,880 --> 00:08:56,580
Auto dit alles hier op de linker en rechter kant.

89
00:08:56,700 --> 00:09:01,110
En we wilden alleen maar tot het nemen van ongeveer 30 procent van de verpakking dat het in.

90
00:09:01,110 --> 00:09:10,120
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.

91
00:09:10,230 --> 00:09:13,930
En dat is zeker een goed idee om dat niet te doen.

92
00:09:14,010 --> 00:09:20,500
Maar voor nu tot we bij een nieuwe versie waarin we onze eigen style sheets ik ga om het te doen in de rij.

93
00:09:20,580 --> 00:09:24,130
Dus ik ga een nieuwe div dat we de vorm binnenkant van te maken.

94
00:09:24,270 --> 00:09:26,130
Gewoon zo.

95
00:09:26,760 --> 00:09:34,760
En dan ga ik die div style geven en ik ga om te beginnen met te zeggen met 30 procent.

96
00:09:34,980 --> 00:09:39,650
En laat het op dat en niet gezien krijgen we een kleinere vorm.

97
00:09:39,660 --> 00:09:41,820
Nu willen we naar het centrum dat.

98
00:09:41,820 --> 00:09:43,080
Dus gaan we hier terug.

99
00:09:43,110 --> 00:09:49,730
Zeggen nulmarge aan de boven- en onderkant en Otto links en rechts.

100
00:09:50,430 --> 00:09:52,790
Nu hebben we het formulier gecentreerd.

101
00:09:52,800 --> 00:09:58,750
Het volgende wat we doen is het maken van de knop neemt de gehele breedte die is nog steeds vrij lang.

102
00:09:58,790 --> 00:10:05,780
Maar wat we zullen doen is geef het DTN blok dat een is gebouwd in Bootstrap manier waardoor het een blok element.

103
00:10:05,790 --> 00:10:08,370
En het duurt nu de gehele lijn.

104
00:10:08,400 --> 00:10:13,530
Volgende laten we wat ruimte tussen al deze elementen om dat te doen.

105
00:10:13,710 --> 00:10:17,300
We zullen bootstraps gebouwd in de vorm groep klasse te gebruiken.

106
00:10:17,370 --> 00:10:25,250
Dus we moeten een div class ECO vorm dash groep en we gaat nodig hebben die voor elke ingang.

107
00:10:25,470 --> 00:10:41,240
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.

108
00:10:41,850 --> 00:10:44,080
En dan hebben we nog een voor de knop.

109
00:10:44,610 --> 00:10:50,860
Dus hebben we klassieke vorm groep drie keer en we moeten ook de afsluitende div-tags.

110
00:10:50,850 --> 00:10:54,810
Daar gaan we oh er is een en we moeten de andere afsluitende div tag hier.

111
00:10:55,190 --> 00:10:56,060
OK.

112
00:10:56,220 --> 00:10:59,140
Dus die vorm groep net GRP dingen samen.

113
00:10:59,160 --> 00:11:01,530
Maar het geeft ons ook een beetje van de ruimte.

114
00:11:01,530 --> 00:11:03,300
Nu hebben we deze knop hier.

115
00:11:03,390 --> 00:11:11,010
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.

116
00:11:11,490 --> 00:11:13,680
En nogmaals, ik ga om dat te doen in de rij.

117
00:11:13,680 --> 00:11:20,020
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.

118
00:11:20,160 --> 00:11:24,290
Dus stijl en we zullen tekst align center doen.

119
00:11:25,650 --> 00:11:31,470
Spaar nu gecentreerd in het midden.

120
00:11:31,980 --> 00:11:35,030
Het volgende wat we moeten doen is de kleur van deze toets.

121
00:11:35,070 --> 00:11:37,000
The White is niet op zoek naar zeer goed.

122
00:11:37,230 --> 00:11:44,730
Laten we het primaire knop primaire waardoor het blauw bewaart refresh.

123
00:11:44,760 --> 00:11:46,430
Ja, dat ziet er een stuk beter.

124
00:11:46,800 --> 00:11:51,700
Laten we ook deze link onderweg terug over te linken naar het midden ook bewegen.

125
00:11:51,900 --> 00:11:56,850
Dus we alleen deze te kopiëren en alles wat we moeten doen is het te zetten binnenkant van deze marge.

126
00:11:56,880 --> 00:12:07,200
Auto div zodat deze div hier na de vorm, net als dat en op te slaan.

127
00:12:07,200 --> 00:12:07,810
Daar gaan we.

128
00:12:07,860 --> 00:12:18,750
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.

129
00:12:19,080 --> 00:12:22,460
We zullen gewoon terug te gaan en we hebben al deze div die we hebben geselecteerd.

130
00:12:22,530 --> 00:12:28,050
Dus in plaats van margined nul kunnen we alleen maar geef het een marge van 20 pixels te beginnen.

131
00:12:28,050 --> 00:12:29,750
Laten we eens zien hoe dat eruit ziet.

132
00:12:30,580 --> 00:12:32,140
Ok, dat ziet er een beetje beter.

133
00:12:32,340 --> 00:12:36,070
Laten we iets meer als 50 te doen.

134
00:12:36,600 --> 00:12:38,280
En dat is misschien een beetje te veel.

135
00:12:38,280 --> 00:12:40,230
Zeker uw eigen voorkeur.

136
00:12:40,350 --> 00:12:43,570
Laten we terug gaan en doen 25.

137
00:12:44,700 --> 00:12:44,940
Okee.

138
00:12:44,940 --> 00:12:46,420
Dat is goed genoeg voor nu.

139
00:12:46,440 --> 00:12:58,160
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.

140
00:12:58,170 --> 00:13:00,420
Laatste ding laten zich te ontdoen van deze handelsmerk.

141
00:13:00,420 --> 00:13:01,920
Je zeker niet meer nodig dat.

142
00:13:02,070 --> 00:13:06,570
In de bodem van onze footer dus gaan we naar de voettekst bestand en ik zal bedriegen.

143
00:13:06,620 --> 00:13:11,530
Doe dit voor nu en we gewoon te ontdoen van die redden.

144
00:13:11,700 --> 00:13:19,800
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.

145
00:13:19,920 --> 00:13:24,000
We kunnen ook terug te gaan en bekijk de landing page die nog niet is gedaan.

146
00:13:24,210 --> 00:13:31,360
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.

147
00:13:31,380 --> 00:13:33,280
Dus dat is de reden waarom ik het opslaan van tot later.

148
00:13:33,570 --> 00:13:38,550
En dan hebben we ook onze nummer hier met onze dummy knoppen die niets doen.