1
00:00:00,250 --> 00:00:03,150
Ten film zamierzamy kontynuować stylizacji obóz.

2
00:00:03,360 --> 00:00:08,590
Mamy zamiar dodać pasek nav z każdej strony i że pasek nawigacyjny będzie całkiem pusty teraz.

3
00:00:08,700 --> 00:00:14,780
Ale w końcu będzie miał przyciski jak się zalogować i wylogować się zarejestrować cała ta funkcjonalność.

4
00:00:15,030 --> 00:00:23,510
Ale do tego czasu musimy po prostu umieścić jakiś tekst zastępczy tam i wtedy my też będziemy projektować nową formę campingu bo teraz to w dość fatalnym stanie.

5
00:00:23,580 --> 00:00:28,860
Więc zacznijmy od serwera do góry i po prostu spojrzeć na to, co mamy.

6
00:00:28,890 --> 00:00:31,150
Więc tutaj jest nasza strona docelowa.

7
00:00:31,680 --> 00:00:36,250
Oto nasz zobacz wszystkie obóz zmienić listę kempingów.

8
00:00:36,290 --> 00:00:38,180
To wygląda całkiem dobrze.

9
00:00:38,430 --> 00:00:40,490
Chcemy pasku nawigacyjnym tutaj.

10
00:00:40,890 --> 00:00:43,370
To samo na dodać nowe pole kempingowe.

11
00:00:43,740 --> 00:00:51,050
Jedziemy do centrum formularz, a my zamierzamy układać te dwa wejścia na szczycie siebie zamiast je mieć obok siebie.

12
00:00:51,360 --> 00:00:56,400
Ale mamy zamiar zacząć pasku nawigacyjnym i niech to po prostu działa to na szablonie campingu.

13
00:00:56,610 --> 00:01:00,990
Więc wracamy tutaj i otwórz camping szablon, aby zacząć.

14
00:01:00,990 --> 00:01:22,910
Zamierzam otworzyć okno bootstrapped i mam zamiar przejść do części i następnie nav barze i znajdę się na tym odcinku cały czas, ponieważ mimo bootstrap sprawia, że ​​naprawdę łatwo dodać paska nawigacji można jeszcze zobaczyć to sporo znaczników i nasz nie będzie tak długo, na pewno przynajmniej nie rozpocznie się, gdy nie mamy wszystkich przycisków na upadki upuszczania.

15
00:01:22,950 --> 00:01:28,130
Mamy zamiar rozpocząć ładne i proste, ale nawet wtedy to jeszcze wiele klas, które trzeba pamiętać.

16
00:01:28,140 --> 00:01:35,040
Więc na pewno nie wstyd podciągania bootstrap darcs jak nic innego w tej klasie nie powinno się wstydzić o poszukiwaniu rzeczy.

17
00:01:35,100 --> 00:01:42,860
Ale w szczególności bootstrap czasami może być po prostu bałagan z tych klas i elementów i nie ma sposobu, aby to zrobić, nie patrząc na docs.

18
00:01:42,870 --> 00:01:55,180
OK, więc musimy wrócić i zrobię trochę miejsca w górnej części mojego szablonu campingów i zamierzamy rozpocząć od zdefiniowania Nav. co znowu podobnie jak nagłówek.

19
00:01:55,320 --> 00:01:59,450
Moglibyśmy zrobić div lecz Nav. jest trochę bardziej znaczące.

20
00:01:59,460 --> 00:02:00,870
To jest bardziej semantyczny.

21
00:02:01,050 --> 00:02:09,580
Więc mam zamiar zrobić z nav pasku nawigacyjnym, a następnie klasy domyślnie rozdzielczej nav bar.

22
00:02:09,600 --> 00:02:16,240
Istnieją różne rodzaje i różne kolory lub możemy mieć odwrócony pasku nawigacyjnym, ale jesteśmy po prostu pójdzie z domyślnego.

23
00:02:16,410 --> 00:02:54,090
A następnie wewnątrz zamiar dodać div z klasą równej pojemnika płynu i że będzie po prostu sprawiają, że jesteśmy ładne dopełnienie i trochę miejsca tam i wtedy mamy zamiar dodać w innym div z klasą równej pasku nawigacyjnym nagłówka, a następnie wewnątrz klasa równa że nasz nagłówek mamy zamiar dodać znacznik zakotwiczenia z klasą równej pasku nawigacyjnym kreską na końcu takiego.

24
00:02:54,330 --> 00:03:04,850
A potem możemy ustawić ten link, aby po prostu być slash i wtedy będziemy blisko, że i dodać yelper obozie tak po prostu.

25
00:03:04,980 --> 00:03:07,750
I zobaczmy, co mamy z tego prostego znaczników.

26
00:03:07,920 --> 00:03:16,730
Więc mamy NAV z pojemnikiem wewnątrz pasku nawigacyjnym nagłówka i pasku nagłówka nav ma tylko jeden element, który jest marką bar Neph.

27
00:03:17,010 --> 00:03:18,290
Chodźmy odświeżyć.

28
00:03:18,780 --> 00:03:27,710
OK, więc mamy pasku nawigacyjnym, a następnie mamy naszą markę tutaj i to jest link, że gdy klikniemy zajmie nam powrót do ohydnej strony docelowej.

29
00:03:28,200 --> 00:03:34,320
OK, więc dodajmy w ciągu kilku zastępcze tutaj do logowania i rejestracji.

30
00:03:34,320 --> 00:03:40,870
Nie będą działać lub nie będzie niczego, ale co możemy wyglądać dobrze, więc zróbmy to teraz przejść do naszego obozu robić.

31
00:03:40,890 --> 00:03:47,710
EJ jako wzornik wewnątrz paska nawigacyjnego i pojemnika, lecz nie wewnątrz N.F. bar Hetter.

32
00:03:47,970 --> 00:03:56,220
Mamy zamiar dodać w innym div i ten dział będzie miał klasę upadku, który zobaczy, co to robi.

33
00:03:56,220 --> 00:04:01,810
I tak przez chwilę, a potem Neph bar Dasch upadek tak po prostu.

34
00:04:01,890 --> 00:04:24,520
A potem w środku mamy zamiar dodać UL UL i ten będzie miał klasę kreskowych nav nav myślnik i wówczas również nav bar tuż kreska, która przeniesie go do prawej strony, a następnie wewnątrz, że będziemy trzy linki do teraz, a każdy z nich będzie sprzymierzeńcem.

35
00:04:25,170 --> 00:04:32,820
A następnie wewnątrz tego Ally będą miały znacznik zakotwiczenia i da pierwsza Zaloguj.

36
00:04:32,850 --> 00:04:42,940
A teraz sędzia H będzie po prostu ustawiona na naszej drodze trasy, ponieważ nie mamy żadnego dziennika Jeszcze a my zrobimy to samo dla rejestru.

37
00:04:42,980 --> 00:04:49,540
Zróbmy Zarejestruj się, a następnie także zalogować się tak po prostu.

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

39
00:04:51,210 --> 00:04:52,580
Zobaczmy więc, jak to wygląda.

40
00:04:52,590 --> 00:05:02,090
Zanim zaczniemy mówić o tym, co robi, gdy załamanie się odświeżyć i to nie wygląda dobrze, brakowało nam jeden drobny klasę tu na ul.

41
00:05:02,290 --> 00:05:06,470
Wygląda na to, że nie dodać teraz tak po prostu dodany nav bar.

42
00:05:06,470 --> 00:05:20,430
Teraz już nigdy, ale to dobrze, ale nie dodać nav się więc będziemy zapisać się odświeży i skończyć z wszystkich trzech linków po prawej stronie NAV, a także kiedy tu zmienić rozmiar.

43
00:05:20,430 --> 00:05:25,130
Zauważ, że tu właśnie tam, że upadł.

44
00:05:25,680 --> 00:05:29,300
I w końcu, co musimy to mała ikonka hamburger.

45
00:05:29,340 --> 00:05:32,610
Wygląda to tak po prostu gdzie należy kliknąć i to menu.

46
00:05:33,050 --> 00:05:36,180
Na razie po prostu ukryć je, gdy mamy do tego rozmiaru.

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

48
00:05:36,690 --> 00:05:42,240
Więc to wszystko, co musimy zrobić na pasku nawigacyjnym z wyjątkiem faktu, że to tylko na tej jednej stronie.

49
00:05:42,240 --> 00:05:45,390
Więc teraz dodawać go do wszystkich stron.

50
00:05:45,390 --> 00:05:50,030
Warto więc skopiować go lub wyciąć go i mamy zamiar przenieść go na cel.

51
00:05:50,460 --> 00:05:52,400
Więc przejść do głowy lub częściowe.

52
00:05:52,680 --> 00:05:53,790
Ja po prostu otworzyć to.

53
00:05:53,790 --> 00:06:00,130
Korzystanie z linii poleceń poglądy C9 slash nagłówek slash Parshall za Ijaw Tak.

54
00:06:00,570 --> 00:06:03,840
A potem po prostu na samym wierzchu ciała dodamy, że w.

55
00:06:04,320 --> 00:06:06,080
Załóżmy, wcięcie to prawidłowo.

56
00:06:06,570 --> 00:06:09,230
OK, nie idziemy.

57
00:06:09,900 --> 00:06:20,550
I mamy nav bar na nagłówku tak, że każdy plik, który zamieszczamy w nagłówek częściowe będą miały teraz pasek nav ale ponownie uruchomić serwer.

58
00:06:20,850 --> 00:06:25,790
Więc to jeszcze tutaj, jeśli dodamy nową campingu możemy również uzyskać tę poprzeczkę.

59
00:06:26,160 --> 00:06:31,270
A jeśli pójdziemy do strony głównej mamy także wystarczająco poprzeczkę.

60
00:06:31,530 --> 00:06:32,110
Wspaniały.

61
00:06:32,130 --> 00:06:36,950
Teraz przejdźmy do uczynienia ta forma wygląda trochę lepiej.

62
00:06:36,990 --> 00:06:40,840
Tak jak wspomniałem wcześniej istnieją dwie wielkie rzeczy, które chcę zrobić do tej formy.

63
00:06:40,860 --> 00:06:53,270
Pierwszy z nich polega na wycentrowanie w środku strony, a drugi jest stos postać pionowo zamiast trzech wejść albo dwa wejścia i przycisk ustawione poziomo w linii na ekranie.

64
00:06:53,370 --> 00:06:56,120
Chcesz je wziąć i ułożone je jeden na drugim.

65
00:06:56,370 --> 00:07:00,820
Zacznijmy otwierając odpowiedni plik, który jest nowy punkt.

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

67
00:07:01,650 --> 00:07:11,470
Więc zrobimy poglądy C9 ukośnik wiedział, że Ejay nas i wtedy oto nasz formularz, który mamy do tej pory.

68
00:07:11,970 --> 00:07:20,810
Zacznijmy łatwe i dodać w niektórych klasach bootstrap do form lub do wejść i to forma sterowania kreska.

69
00:07:21,150 --> 00:07:25,390
I chcemy, że na obu wejściach i na przycisku.

70
00:07:25,500 --> 00:07:33,290
Dodajmy w klasie Bootstrap PTEN ETN dużym ot tak.

71
00:07:33,570 --> 00:07:39,090
I my też zrobić między błędu i zobaczmy, co to wygląda.

72
00:07:39,090 --> 00:07:40,920
Więc po węzła J.

73
00:07:41,030 --> 00:07:42,830
Tak odświeżyć.

74
00:07:43,300 --> 00:07:51,060
OK, tak więc jesteśmy coraz kontroli bootstrap tu i przycisk bootstrap choć to na pewno ogromny i nie chcemy tego.

75
00:07:51,210 --> 00:07:54,840
Tak więc, aby rozwiązać ten problem istnieje kilka rzeczy, które możemy zrobić.

76
00:07:54,840 --> 00:07:57,900
Pierwszym jest to, że będziemy umieścić wszystko wewnątrz pojemnika.

77
00:07:58,110 --> 00:08:09,960
Więc poszliśmy w div class równa pojemnik, a ja po prostu przenieść to do dołu.

78
00:08:10,930 --> 00:08:13,690
Nie możemy iść i niech wcięcie to prawidłowo.

79
00:08:13,950 --> 00:08:16,450
Zapisz się bardzo drobne zmiany.

80
00:08:16,530 --> 00:08:19,850
Mamy trochę odstępu teraz, ale to wciąż ogromna postać.

81
00:08:20,220 --> 00:08:23,280
Więc następną rzeczą, że zrobię to korzystać z systemu siatki.

82
00:08:23,520 --> 00:08:30,710
Więc dodamy w innym div, a ten będzie miał klasę równą wiosłować tak po prostu.

83
00:08:30,720 --> 00:08:33,750
Weźmy to i skopiować go do rzędu.

84
00:08:33,780 --> 00:08:36,630
Więc cała forma idzie w rzędzie teraz.

85
00:08:36,810 --> 00:08:39,220
I tak się stało, to również.

86
00:08:39,610 --> 00:08:44,930
OK zapisz nie odświeżyć jeszcze duże różnice.

87
00:08:44,970 --> 00:08:52,880
A co mamy zamiar zrobić, to użyć CSSA i rzeczywiście napisać nasze własne style na szczycie bootstrap centrum to poprzez nadanie mu margines.

88
00:08:52,880 --> 00:08:56,580
Auto to wszystko tu po lewej i prawej stronie.

89
00:08:56,700 --> 00:09:01,110
A my tylko chcieliśmy wziąć górę o 30 procent tego kontenera, że ​​w.

90
00:09:01,110 --> 00:09:10,120
Tak zrobiliśmy, że zanim wrócimy i mam zamiar złamać jedną z zasad więc mówiłem na początku powiedział: Nie rób style inline.

91
00:09:10,230 --> 00:09:13,930
I to na pewno dobry pomysł, aby tego nie robić.

92
00:09:14,010 --> 00:09:20,500
Ale na razie, aż dojdziemy do nowej wersji, gdzie możemy tworzyć własne arkusze stylów mam zamiar zrobić to w wierszu.

93
00:09:20,580 --> 00:09:24,130
Więc mam zamiar zrobić nowy div, który kładziemy formę wewnątrz.

94
00:09:24,270 --> 00:09:26,130
Właśnie tak.

95
00:09:26,760 --> 00:09:34,760
A potem mam zamiar dać, że div style i mam zamiar zacząć od stwierdzenia, ze jest o 30 procent.

96
00:09:34,980 --> 00:09:39,650
I po prostu zostawić go w tym i nie widzieliśmy otrzymujemy mniejszą formę.

97
00:09:39,660 --> 00:09:41,820
Teraz chcemy wyśrodkować to.

98
00:09:41,820 --> 00:09:43,080
Więc wracamy tutaj.

99
00:09:43,110 --> 00:09:49,730
Say margines zero na górze i na dole, a Otto po lewej i prawej stronie.

100
00:09:50,430 --> 00:09:52,790
Teraz mamy formularz wyśrodkowany.

101
00:09:52,800 --> 00:09:58,750
Następną rzeczą, którą zrobimy to zrobić przycisk zajmują całą szerokość, która jest jeszcze dość długo.

102
00:09:58,790 --> 00:10:05,780
Ale co zrobimy, to dać mu blok DTN który jest wbudowany w Bootstrap sposobu dokonywania to element bloku.

103
00:10:05,790 --> 00:10:08,370
A teraz zajmuje całą linię.

104
00:10:08,400 --> 00:10:13,530
Następny dajmy pewne odstępy między wszystkie te elementy, aby to zrobić.

105
00:10:13,710 --> 00:10:17,300
Użyjemy siłach zbudowany w klasie grupy formą.

106
00:10:17,370 --> 00:10:25,250
Więc musimy div class eCos grupę formą kreska, a my będziemy potrzebować, że dla każdego wejścia.

107
00:10:25,470 --> 00:10:41,240
Więc każde wejście przechodzi w jednym z tych, tak po prostu, a potem ja po prostu powielić tego i będziemy mieli jeszcze jeden tu i to będzie wejść do środka tego.

108
00:10:41,850 --> 00:10:44,080
A potem mamy jeszcze jeden dla przycisku.

109
00:10:44,610 --> 00:10:50,860
Mamy więc klasyczne Grupa formularz trzy razy i musimy również zamknięciu div tagi.

110
00:10:50,850 --> 00:10:54,810
Nie idziemy oh jest jedna i musimy drugi zamykający znacznik div tutaj.

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

112
00:10:56,220 --> 00:10:59,140
Tak, że grupa formą prostu GRP rzeczy razem.

113
00:10:59,160 --> 00:11:01,530
Ale również daje nam trochę miejsca.

114
00:11:01,530 --> 00:11:03,300
Teraz mamy tutaj ten przycisk.

115
00:11:03,390 --> 00:11:11,010
Następną rzeczą, że możemy skupić się na środku jest tekst i zrobić, że chociaż mamy zrobić, to dać mu centrum wyrównać tekst.

116
00:11:11,490 --> 00:11:13,680
I znowu mam zamiar zrobić w kolejce.

117
00:11:13,680 --> 00:11:20,020
Nie jest to dobry pomysł, w dłuższej perspektywie, ale przynajmniej jest to bardzo przydatne ponieważ tylko szybko coś zrobić.

118
00:11:20,160 --> 00:11:24,290
Więc styl i zrobimy centrum wyrównać tekst.

119
00:11:25,650 --> 00:11:31,470
Zapisz się teraz, że w środku boiska.

120
00:11:31,980 --> 00:11:35,030
Następną rzeczą, którą powinniśmy zrobić, to zmienić kolor tego przycisku.

121
00:11:35,070 --> 00:11:37,000
Biały nie patrzy bardzo dobre.

122
00:11:37,230 --> 00:11:44,730
Zróbmy to podstawowy przycisk podstawowym, który pozwoli zaoszczędzić niebieskie odświeżenia.

123
00:11:44,760 --> 00:11:46,430
Tak to wygląda o wiele lepiej.

124
00:11:46,800 --> 00:11:51,700
Załóżmy również przenieść ten Link Wróć odwołują się do środka, jak również.

125
00:11:51,900 --> 00:11:56,850
Więc po prostu skopiować to i jedyne co musimy zrobić, to umieścić go wewnątrz tego marginesu.

126
00:11:56,880 --> 00:12:07,200
Auto div tak, że ten dział tu po prostu postaci takiego i oszczędzać.

127
00:12:07,200 --> 00:12:07,810
No to jedziemy.

128
00:12:07,860 --> 00:12:18,750
Mamy wrócić i ostatnią rzeczą, którą należy zrobić, to naprawdę dodać trochę wyściółki lub marginesu, tak że nie jest aż przeciwko tej H-1 to zrobić.

129
00:12:19,080 --> 00:12:22,460
Będziemy po prostu wrócić i już mamy ten div, który wybraliśmy.

130
00:12:22,530 --> 00:12:28,050
Więc zamiast depozytu zabezpieczającego zera możemy po prostu dać mu pewien margines 20 pikseli, aby rozpocząć.

131
00:12:28,050 --> 00:12:29,750
Zobaczmy, jak to wygląda.

132
00:12:30,580 --> 00:12:32,140
Ok, że wygląda trochę lepiej.

133
00:12:32,340 --> 00:12:36,070
Zróbmy coś więcej jak 50 lat.

134
00:12:36,600 --> 00:12:38,280
I to może być trochę za dużo.

135
00:12:38,280 --> 00:12:40,230
Zdecydowanie własnych preferencji.

136
00:12:40,350 --> 00:12:43,570
Wróćmy i zrobić 25.

137
00:12:44,700 --> 00:12:44,940
W porządku.

138
00:12:44,940 --> 00:12:46,420
To wystarczy na razie.

139
00:12:46,440 --> 00:12:58,160
Zagraj z tego tyle, ile chcesz i można zrobić z tej formy wejścia szerszy jeśli je lub węższy podoba, ale widać, że reaguje ona zamierza pozostać w środku i skurczy się trochę.

140
00:12:58,170 --> 00:13:00,420
Ostatnią rzeczą, pozbądźmy tego znaku towarowego.

141
00:13:00,420 --> 00:13:01,920
Na pewno nie trzeba już tego.

142
00:13:02,070 --> 00:13:06,570
W dolnej części naszej stopce tak pójdziemy do pliku stopki i będę oszukiwać.

143
00:13:06,620 --> 00:13:11,530
Po prostu zrób to teraz, a my po prostu pozbyć się, że uratować.

144
00:13:11,700 --> 00:13:19,800
Teraz mamy nasza postać nie wygląda tak źle może wrócić otrzymujemy listę kempingów mamy dość paska możemy dodać.

145
00:13:19,920 --> 00:13:24,000
Możemy też wrócić i zobaczyć stronę docelową, która nie została jeszcze wykonana.

146
00:13:24,210 --> 00:13:31,360
Że jeden ma chyba najwięcej pracy i to będzie całkiem inna niż pozostałych stron będzie wyglądać o wiele ładniejszy i dużo więcej niestandardowych stylów.

147
00:13:31,380 --> 00:13:33,280
Więc dlatego ja zapisując go na później.

148
00:13:33,570 --> 00:13:38,550
A potem mamy także nasz numer tutaj z naszych fikcyjnych przycisków, które nie robią nic.