1
00:00:00,750 --> 00:00:12,290
Witamy z powrotem w tej lekcji mam zamiar pokazać wam jeden z najważniejszych i powszechnie używanych składników w całej Bootstrap, którym jest NFR, dzięki czemu można zobaczyć, faktycznie na get Boucek Dotcom.

2
00:00:12,450 --> 00:00:15,980
Wykorzystują one wystarczająco składnik bar tutaj.

3
00:00:16,200 --> 00:00:21,900
Mamy też zamiar skorzystać z jednej aplikacji na naszym obozie Yelp i jak zmiana rozmiaru paska nawigacyjnego.

4
00:00:21,900 --> 00:00:30,700
Zauważ, jak czułe jest to, a potem również zauważyć, jak tylko uderzyć TAB jaki rozmiar i wielkość mobile otrzymujemy ten miły hamburgera.

5
00:00:30,720 --> 00:00:33,020
Więc będziemy pracować na rzecz wszystkich, że w tej lekcji.

6
00:00:33,180 --> 00:00:34,890
Ale mamy zamiar rozpocząć prostsze.

7
00:00:34,890 --> 00:00:46,290
Pierwszą rzeczą, jaką musimy zrobić, to udać się do komponentów i przejść do pasku nawigacyjnym i przed idziemy znacznie dalej Stworzyłem nowy plik tylko dlatego będziemy pisać sporo kodu.

8
00:00:46,380 --> 00:00:48,150
Stary jeden był już przepełniony.

9
00:00:48,150 --> 00:00:50,620
Dzwonię to tandetne Bar H Tm L.

10
00:00:50,820 --> 00:00:56,030
Wewnątrz wszystkie mają odnośnikiem nie bootstrap zmienić tytuł tutaj.

11
00:00:56,630 --> 00:01:00,980
Ja po prostu nazwać to bootstrap Nav bary.

12
00:01:01,350 --> 00:01:02,910
Właśnie tak.

13
00:01:02,910 --> 00:01:07,580
Teraz chodźmy do docs i spojrzeć na domyślnym pasku nawigacyjnym.

14
00:01:08,220 --> 00:01:13,460
Więc ten przykład tutaj prezentuje wszystkie ważne funkcje, gdzie możemy mieć związek marki.

15
00:01:13,560 --> 00:01:15,800
Możemy mieć inne linki możemy spadły w menu.

16
00:01:15,930 --> 00:01:22,010
Możemy mieć formę nav bar oraz przycisk możemy mieć rzeczy, które są po prawej stronie rzeczy, które są po lewej stronie.

17
00:01:22,020 --> 00:01:23,720
To naprawdę prezentuje wszystko.

18
00:01:23,790 --> 00:01:30,330
To zlewozmywak z bootstrap tandetne barów iw konsekwencji znaczników jest trochę długi.

19
00:01:30,390 --> 00:01:33,530
Będziemy pracować z tymi wszystkimi sztuk do końca tego filmu.

20
00:01:33,540 --> 00:01:37,790
Ale chcę, aby rozpocząć prostsze i zacznę pokazując najprostszy sposób, aby numer.

21
00:01:38,040 --> 00:01:51,550
Więc musimy sprawić, aby element NAV i NAV ten element musi mieć dwie klasy chcemy nav nav bar oraz bar i możemy zacząć domyślny Dasch uratuje.

22
00:01:51,550 --> 00:01:54,920
A teraz chodźmy zajrzeć do pliku w przeglądarce i odświeżyć.

23
00:01:55,200 --> 00:02:04,860
Widać mam nadzieję, że napotka i screencast starczy baru bardzo słaby pasek dzieje na górze, więc to, że to w jaki sposób właściwie zainicjowana poprzeczkę NF.

24
00:02:04,860 --> 00:02:06,980
Teraz wypełnić go z niektórych treści.

25
00:02:07,050 --> 00:02:11,640
Pierwszą rzeczą, którą będziemy spojrzeć na to, jak możemy dodać w tej marce tutaj.

26
00:02:11,790 --> 00:02:13,180
Zasadniczo nazwa firmy.

27
00:02:13,230 --> 00:02:14,320
W większości przypadków.

28
00:02:14,900 --> 00:02:20,830
I to przy użyciu nagłówka pasku nawigacyjnym, a następnie wewnątrz NFR nagłówka używamy marki pasku nawigacyjnym.

29
00:02:20,850 --> 00:02:35,910
Więc zacznijmy dodając, że div class równa NAV nagłówek bar kreska a następnie wewnątrz nie zamierzamy dodać paska nawigacji marki, która jest znacznik kotwicy.

30
00:02:35,910 --> 00:02:39,440
Zazwyczaj po kliknięciu na tą nazwą firmy trwa powrót do strony głównej.

31
00:02:39,660 --> 00:02:45,840
Więc zrobimy to tutaj znacznik zakotwiczenia i zaczniemy z ruchu równego do Thorpes więc nie zabierze nas wszędzie.

32
00:02:45,870 --> 00:02:52,890
Klasa będzie równa nav bar marki kreska, a my po prostu uzupełnić nazwę firmy.

33
00:02:52,890 --> 00:02:57,170
Zobaczymy, czy mam filiżankę kawy wokół mnie, więc chodźmy z kawą.

34
00:02:57,270 --> 00:03:02,210
Ale faktycznie sprawiają, że prawdziwe starcie musimy zmienić pisownię trochę.

35
00:03:02,400 --> 00:03:03,180
OK Alex.

36
00:03:03,180 --> 00:03:03,990
wystarczająco dobre dla mnie.

37
00:03:04,020 --> 00:03:05,350
Kawa z K.

38
00:03:05,760 --> 00:03:07,420
Chodźmy spojrzeć.

39
00:03:07,590 --> 00:03:11,830
Odświeżyć i teraz mamy naszą NAV bar markę, która znajduje się link.

40
00:03:11,940 --> 00:03:12,880
I kliknij na nią.

41
00:03:13,010 --> 00:03:20,940
Nie bierze mnie wszędzie teraz, ale w końcu nasze aplikacje będą musiały się tak, że po kliknięciu na nazwę firmy trwa powrót do strony głównej następnego.

42
00:03:20,940 --> 00:03:24,480
Zobaczmy, czy możemy dodać w niektórych innych linków jak o kontakt.

43
00:03:24,510 --> 00:03:25,660
Zapisz się do rejestru.

44
00:03:25,770 --> 00:03:27,490
Wszystkie te wspólne łącza w barze.

45
00:03:27,660 --> 00:03:31,190
Zacznijmy dodając link do strony na temat tutaj.

46
00:03:31,500 --> 00:03:41,600
Więc wracamy a następnie poza pasku nagłówka nav mamy zamiar dokonać innego div w tym div zbierze całą zawartość co najmniej po lewej stronie naszego baru NAV.

47
00:03:41,760 --> 00:03:48,960
Mamy więc nagłówek i wtedy będziemy mieć jakąś treść, a następnie, jeśli chcemy coś po prawej stronie będziemy mieli inny div, który ma inną klasę.

48
00:03:48,960 --> 00:03:50,010
Więc klasa tutaj.

49
00:03:50,070 --> 00:03:56,730
Właściwie dwa chcemy NAV i nav bar kreska NAV.

50
00:03:56,850 --> 00:04:00,170
Nie pytaj mnie o nazywania ich nav bar rozdzielczej NAV.

51
00:04:00,210 --> 00:04:05,940
To jedna z wielkich krytykę bootstrap jest to, że jest trochę brzydki i nie jest bardzo sensowne czasem.

52
00:04:06,030 --> 00:04:14,630
I rzeczywiście ramy CSSA, który został stworzony w odpowiedzi na semantycznej bezsensu bootstrap jeśli będzie nazywany semantycznej UI.

53
00:04:14,910 --> 00:04:16,660
I to jest jeden, który bardzo lubię, jak również.

54
00:04:16,710 --> 00:04:18,070
I dyskutowane nauczania.

55
00:04:18,420 --> 00:04:22,190
Ale w końcu, że to po prostu nie tak szeroko stosowane nie są jeszcze tak wielkie tutoriale.

56
00:04:22,200 --> 00:04:23,550
Wracając do naszego diff tutaj.

57
00:04:23,590 --> 00:04:27,600
Klasa nav pasku nawigacyjnym, a klasa nav oba z nich.

58
00:04:27,690 --> 00:04:36,850
A następnie dla każdego elementu, który chcemy na tej NFR musimy dodać sojusznika, a następnie wewnątrz Y, jeśli chcemy połączyć my właśnie mieliśmy znacznik zakotwiczenia.

59
00:04:37,050 --> 00:04:38,810
Więc ten będzie po prostu iść nigdzie.

60
00:04:38,850 --> 00:04:42,280
Po raz kolejny, a będzie to na stronie O mnie.

61
00:04:42,500 --> 00:04:54,120
A jeśli wrócę i odświeżyć mamy odnośnik do około dodajmy jeszcze do kontaktu z zastrzeżeniem wrócić.

62
00:04:54,570 --> 00:04:58,950
Teraz mamy dwa linki teraz chodźmy naprzód i dodać coś do prawej strony.

63
00:04:59,160 --> 00:05:07,630
Dodajmy dwa linki jeden dla rejestru lub zarejestrować i zalogować do innego po prawej stronie paska, aby to zrobić.

64
00:05:07,690 --> 00:05:23,570
Musimy pojemnik nother tutaj i faktycznie zamiast używania DIV jest to bardziej konwencjonalne Aby użyć będzie to będzie działać w ten sam sposób, ale chcesz mieć sojuszników zamiast dobrze chociaż będą działać dobrze z div broni trochę więcej sensu być zamiast ul.

65
00:05:23,620 --> 00:05:32,700
Więc mamy zamiar dodać kolejne UL i ten będzie Nav. Pasek nawigacji nav kreska a następnie nav bar kreska.

66
00:05:32,760 --> 00:05:33,570
Dobrze.

67
00:05:33,660 --> 00:05:38,280
I musimy upewnić się, że poprawnie pisze inaczej, że klasa nie przyniosą efektu.

68
00:05:38,280 --> 00:05:42,960
Więc co to będzie zrobić, to nam nową grupę treści na prawej stronie tego paska nawigacyjnego.

69
00:05:43,120 --> 00:05:44,540
A teraz po prostu trzeba go wypełnić.

70
00:05:44,550 --> 00:05:47,750
Więc dodam dwa linki zarówno w sztorc.

71
00:05:47,820 --> 00:05:56,550
Pierwszy z nich pójdzie nigdzie i powie zarejestrować się i wtedy będziemy mieć jeszcze jeden, który po prostu mówi się zalogować.

72
00:05:56,940 --> 00:05:58,080
Spójrzmy.

73
00:05:58,290 --> 00:06:01,630
Odśwież stronę i widać mamy zawartość po prawej stronie.

74
00:06:01,650 --> 00:06:12,220
Jednak jest to aż do krawędzi oraz ustalenie, że możemy dodać w pojemniku na tyle baru tak jak używamy pojemnik wcześniej dodać trochę rozstawienie do głównej zawartości.

75
00:06:12,220 --> 00:06:14,190
Moglibyśmy dodać jeden zamiast pasku nawigacyjnym.

76
00:06:14,400 --> 00:06:17,730
Włożyłem więc wszystko w barze Neph zamiast pojemnika.

77
00:06:17,740 --> 00:06:20,800
Więc klasy wynosi pojemnik.

78
00:06:21,060 --> 00:06:22,430
Wystarczy przesunąć to w dół.

79
00:06:22,560 --> 00:06:26,180
Upewnij się, że wszystko jest wcięte prawidłowo.

80
00:06:26,190 --> 00:06:27,770
No to jedziemy.

81
00:06:27,780 --> 00:06:30,930
Sprawdźmy to.

82
00:06:30,930 --> 00:06:31,430
Miły.

83
00:06:31,440 --> 00:06:33,910
Więc teraz wszystko jest skupione ładne i poprawnie.

84
00:06:34,140 --> 00:06:41,940
Pokażę wam, gdybym to zrobił dodać pojemnik poza NAV i włożyli całą pasku nawigacyjnym w środku.

85
00:06:42,880 --> 00:06:43,650
Dobrze zobaczyć, co się dzieje.

86
00:06:43,660 --> 00:06:49,950
Teraz gdybym miał wystarczająco świeże bary faktycznie odcięte i jeździ tylko część drogi po drugiej stronie ulicy.

87
00:06:50,460 --> 00:06:53,460
Więc pojemnik zrobi, że aby cokolwiek umieścić wewnątrz niego.

88
00:06:53,670 --> 00:07:03,820
I w tym przypadku chcemy pojemnik wewnątrz paska nawigacyjnym tak, że nie jest zwężający się rzeczywistą Naff część siebie, ale nie ogranicza się zawartość jej wnętrzu.

89
00:07:04,440 --> 00:07:04,950
OK.

90
00:07:05,060 --> 00:07:13,060
Tak Pojemnik mamy Hetter mamy rzeczy na lewo i mamy pewne treści po prawej stronie, dzięki czemu można zobaczyć tutaj.

91
00:07:13,290 --> 00:07:29,670
Teraz to, co krok to trochę i idź i weź to podstawowe pasku nawigacyjnym lub domyślnego paska nawigacyjnego, że mają w docs i niech skopiować całą tę rzecz, a ja po prostu umieścić go tuż poniżej są obecnie znacznie zrobić trochę miejsca.

92
00:07:29,670 --> 00:07:33,010
Wiele uwag do uczynienia go bardziej zrozumiałym.

93
00:07:33,250 --> 00:07:35,510
Domyślnie nav bar.

94
00:07:36,060 --> 00:07:40,280
I rzućmy okiem na jej odświeżenie.

95
00:07:40,560 --> 00:07:44,580
Więc to jest ta nav bar tu i tam kilka rzeczy, które chciałbym podkreślić.

96
00:07:44,580 --> 00:07:48,690
Jednym z nich jest, że spadły na menu, ale w rzeczywistości nie działa.

97
00:07:48,900 --> 00:07:53,300
A także, jak możemy zmienić rozmiar okna tu dostaliśmy menu hamburger.

98
00:07:53,550 --> 00:07:54,740
Te linki odejść.

99
00:07:54,750 --> 00:07:58,630
Formularz odchodzi i ujawnić je musimy kliknąć tutaj.

100
00:07:58,830 --> 00:08:00,480
Ale to nie działa.

101
00:08:00,960 --> 00:08:07,570
Warto więc zacząć od uzyskania go do pracy, a potem porozmawiamy o tych wszystkich różnych elementów i co robią, aby to działało.

102
00:08:07,590 --> 00:08:10,550
Musimy iść i obejmują bootstrap pliku JavaScript.

103
00:08:10,830 --> 00:08:15,660
Więc jeśli wrócimy do docs bootstrap Będziemy kliknij pobrania.

104
00:08:15,780 --> 00:08:19,800
Jest tam również plik JavaScript że musimy co jest tutaj.

105
00:08:19,800 --> 00:08:24,460
Będę korzystać z wersji CDN ale również wyposażony w folderze, który jest pobierany.

106
00:08:24,510 --> 00:08:25,700
To właśnie nazywa się bootstrapped.

107
00:08:25,810 --> 00:08:26,220
Tak.

108
00:08:26,250 --> 00:08:29,890
Albo wersja zminimalizowane bootstrapped się Mencjusza.

109
00:08:30,420 --> 00:08:36,210
A dodajmy, że i zrobimy to na dole naszego ciała i oszczędzać.

110
00:08:36,210 --> 00:08:38,280
I wiem, że nie rozmawialiśmy o javascript.

111
00:08:38,380 --> 00:08:42,860
Nie wiem, co skrypt jest i co tu źródło to nie ma znaczenia.

112
00:08:42,900 --> 00:08:44,710
Jesteśmy po prostu zamiar podłączyć go do startowej.

113
00:08:44,910 --> 00:08:46,550
A teraz nasz odświeżania.

114
00:08:46,710 --> 00:08:53,470
Możemy rozwiązać jeden mały problem, który pokażę wam tutaj mówi nam, że bootstraps javascript wymaga zapytania.

115
00:08:53,790 --> 00:08:56,180
Nie martw się o to, co to jest i jak to ma się do tej wiadomości.

116
00:08:56,250 --> 00:08:59,970
Ale ja po prostu chcę pokazać ci to tak, że widać rzeczywistą wiadomość mamy.

117
00:08:59,970 --> 00:09:03,240
Musimy wymagać zapytanie J które również nie rozmawialiśmy.

118
00:09:03,580 --> 00:09:05,360
Ale to jest dość łatwe, aby przejść i dostać.

119
00:09:05,400 --> 00:09:07,140
Nie trzeba pisać żadnego JavaScript.

120
00:09:07,170 --> 00:09:08,830
Nie trzeba znać żadnego języka JavaScript.

121
00:09:08,830 --> 00:09:10,180
Musimy po prostu umieścić go.

122
00:09:10,230 --> 00:09:23,890
Więc wszystko co musimy zrobić, to znaleźć Jay zapytań CDN, który jest kodem, który Jay dot com i tu będzie trzeba wybrać najnowszą wersję i skopiuj ten adres URL.

123
00:09:23,910 --> 00:09:30,150
Jest to plik Querrey, a potem wrócę tu.

124
00:09:30,150 --> 00:09:32,560
Mamy zamiar dodać jeszcze jeden z tych tagów skryptu.

125
00:09:32,640 --> 00:09:34,410
Zasadniczo kopiowania dokładnie ten kod.

126
00:09:34,410 --> 00:09:42,030
W rzeczywistości Zrobię to, aby ułatwić powielać dokładnie tę linię i zmienić ten adres URL będzie zapytanie JEY jesteś.

127
00:09:42,610 --> 00:09:44,530
Jeśli wszystko inne zawiedzie możesz po prostu wpisać ten.

128
00:09:44,560 --> 00:09:56,290
To nie jest takie złe, jeśli jesteś l, ale mam to wyszukując Jay queery CDN i pozwoli zaoszczędzić i to musi przyjść przed siłach pliku JavaScript, ponieważ opiera się na kwerendzie.

129
00:09:56,560 --> 00:10:00,370
Więc jeszcze raz nie martw się zbytnio, co to jest, jak to działa, co Jay zapytanie jest.

130
00:10:00,450 --> 00:10:02,150
To wszystko, co zbliża się kilka minut od teraz.

131
00:10:02,430 --> 00:10:06,550
Jednak, aby uzyskać jak najwięcej z bootstrap aw szczególności barów nav i menu.

132
00:10:06,750 --> 00:10:13,210
Po prostu trzeba mieć tych dwóch linii w każdej chwili używamy go więc wracamy teraz i odświeżyć.

133
00:10:13,230 --> 00:10:18,850
Przede wszystkim są odrzucane w menu działają teraz jak widać mamy obecnie rozwijanych menu.

134
00:10:18,880 --> 00:10:24,430
Nie będziemy o tym rozmawiać w tym filmie, ale jak zmiana rozmiaru i dostaję ten hamburger.

135
00:10:25,050 --> 00:10:26,980
Hamburger działa teraz po kliknięciu na nim.

136
00:10:26,980 --> 00:10:29,480
To przełącza ten ukryty materiał.

137
00:10:29,560 --> 00:10:43,280
Więc sposób, że działa tu jest ta mała przerwania tu gdzie wszyscy z tej zawartości skór i wszystko, co widzimy, jest nagłówek i button.

138
00:10:43,380 --> 00:10:49,120
A potem, kiedy klikamy na przycisk wszystko, co wcześniej ukryte treści pojawia Chodźmy, że do pracy.

139
00:10:49,120 --> 00:10:50,650
Teraz dla nas.

140
00:10:50,950 --> 00:11:01,960
Ale mamy zamiar zrobić dużo mniej skomplikowaną wersję, gdzie chcemy tylko ukryć te cztery linki tak, że gdy rozmiar te cztery linki są ukryte, a następnie bardzo szybko zostaną one wyświetlone.

141
00:11:02,250 --> 00:11:09,830
Aby to zrobić zamiar zacząć od przyjrzenia się, jak to jest w tym realizuje domyślnej wersji tego gigantycznego potwora na pasku nawigacyjnym.

142
00:11:10,380 --> 00:11:13,650
A ja po prostu zwrócić uwagę na ważną linię tutaj.

143
00:11:13,760 --> 00:11:24,850
Pasek nawigacyjny div class załamanie załamanie cokolwiek umieścić wewnątrz tego div zostaną zwinięte gdy trafiliśmy Telefony wielkości więc nie uczyni przycisk dla nas.

144
00:11:24,850 --> 00:11:33,470
Nie zrobi przełączanie się ponowne pojawiające się w ukryciu, ale to co ukrywać treść stawiamy wewnątrz niej, kiedy trafiliśmy ten tablet i wielkości telefonu komórkowego.

145
00:11:33,650 --> 00:11:40,320
Więc mamy zamiar skopiować to i po prostu trzeba owinąć go wokół treści, które chcemy ukryć i chcemy, aby ukryć to tutaj.

146
00:11:40,330 --> 00:11:49,980
Te dwa Juelz Więc cztery linki chcemy ukryć, kiedy trafiliśmy że mniejszy rozmiar ekranu.

147
00:11:50,440 --> 00:11:57,820
Więc dodać tagiem zamykającym i zapisać i tam jest linia tutaj i to jest ważne, a ja się do niego za chwilę.

148
00:11:57,850 --> 00:12:01,230
To nie wpłynie na nas właśnie jeszcze ale jeśli odświeżyć.

149
00:12:01,690 --> 00:12:02,160
Zobaczysz.

150
00:12:02,170 --> 00:12:10,650
Teraz po zmianie rozmiaru istnieje punkt właśnie tutaj, gdzie wszystko, zawartość wewnątrz div upadku odchodzi.

151
00:12:10,680 --> 00:12:11,650
Teraz to nie pojawi się ponownie.

152
00:12:11,640 --> 00:12:13,180
Nie mamy tego hamburgera.

153
00:12:13,330 --> 00:12:16,940
Nie mamy kliknięcie na cokolwiek, ale upadł to zniknął.

154
00:12:17,050 --> 00:12:24,580
A to dlatego, że dodaje się w tej linii tutaj pasku nawigacyjnym div class upadku upadku.

155
00:12:24,630 --> 00:12:29,780
Następną rzeczą, którą musisz zrobić to dodać na hamburgera i to jest trochę kodu.

156
00:12:29,780 --> 00:12:33,010
Niestety to wciąż o wiele lepiej, niż gdybyśmy musieli zrobić sami.

157
00:12:33,280 --> 00:12:37,220
Ale hamburger jest rzeczywiście to wszystko tutaj.

158
00:12:37,800 --> 00:12:48,660
Więc mam zamiar skopiować to i wkleić go na wewnątrz od drzemki lub Hetter przed naszym kawy incontact.

159
00:12:48,970 --> 00:12:52,420
I będziemy zapisywać Wrócę do tego, co robi.

160
00:12:53,320 --> 00:12:54,680
Miejmy tylko odświeżyć.

161
00:12:55,140 --> 00:12:57,910
A teraz, jeśli rozmiar dostaję hamburgera.

162
00:12:58,120 --> 00:13:00,280
No to jedziemy.

163
00:13:00,310 --> 00:13:03,240
Teraz pozwól mi wyjaśnić trochę o tym, jak to działa.

164
00:13:03,250 --> 00:13:13,000
Więc nie jest to przycisk, a następnie wewnątrz tego przycisku nie ma trzech przęseł, a każdy z nich jest odpowiedzialny za jeden z tych barów.

165
00:13:13,210 --> 00:13:21,780
Więc nie jest to obraz, który widzimy tutaj to faktycznie każdy zespół, który jest co ten mały spand które są stylem do tych wąskich pasków, aby ten hamburger.

166
00:13:22,030 --> 00:13:34,310
A potem, jeśli chodzi o Wyświetlanie i ukrywanie zawartości, kiedy kliknij na nią, co jest naprawdę ważne jest to, że mamy tego atrybutu target danych i cokolwiek jest ustawiony w naszym przypadku B-S np.

167
00:13:34,310 --> 00:13:41,700
Obecnie dla naszego upadek jednego bootstrap przykład sieci dla naszego klubu tak i niech po prostu zmienić go tak.

168
00:13:42,180 --> 00:13:44,330
Nav. demo tak po prostu.

169
00:13:44,470 --> 00:13:49,810
Następnie musimy zmienić identyfikator treści, które chcemy rzeczywiście zawali, że chcemy pokazać i ukryć.

170
00:13:49,870 --> 00:13:57,310
Więc mogę ją zmienić, aby dopasować vs demo NAV.

171
00:13:57,340 --> 00:13:59,710
Zauważ jedną istotną różnicę.

172
00:13:59,710 --> 00:14:11,420
Nie dodajemy w arktycznym Thor Więc to tak jak CSI a kiedy wybrać coś z C mówi, musimy użyć, że Octa Thorpe kierować identyfikator więc zostawić identyfikator jak tylko tekst nazwa.

173
00:14:11,440 --> 00:14:18,120
Teraz, jeśli demo tu dodać, że do Thorpe będzie to zaoszczędzić odświeżania.

174
00:14:18,120 --> 00:14:25,490
Teraz gdybym rozmiaru dostać hamburgera i kliknij na nim i działa, aby włączyć tę Wyświetlanie i ukrywanie.

175
00:14:26,250 --> 00:14:27,040
Wspaniały.

176
00:14:27,070 --> 00:14:32,400
Ostatnią rzeczą, która pokaże wam jest, jeśli poruszamy się coś poza tym, że upadek.

177
00:14:32,470 --> 00:14:35,710
Więc weźmy te linki tutaj.

178
00:14:36,070 --> 00:14:55,710
Konto lub oi kontaktowy, a my po prostu przenieść te tu poza div upadku i odświeżyć można zobaczyć, że w rzeczywistości nie zawali się tam zatrzymać, a następnie klikam na to i pozostałe dwa, które są zamiast upadku są przełączane.

179
00:14:55,720 --> 00:15:00,390
Teraz nie mówię, że to wygląda dobrze, ale ilustruje znaczenie tego upadku dz ..

180
00:15:00,630 --> 00:15:08,160
Więc co się stało stronę upadku lub co mamy w naszym przypadku dla różnych linki do znajdujących się na prawo do lub z lewej strony.

181
00:15:08,160 --> 00:15:12,070
Będą wszystkie zwinąć gdy trafiliśmy, że mniejszy rozmiar mobilnej.

182
00:15:12,070 --> 00:15:23,570
A potem, aby je pokazać znowu kliknij na ten przycisk, tutaj i że przycisk ma atrybutu target danych i cokolwiek ID odpowiada to będzie ukryte i widoczne, gdy klikniemy na ten temat.

183
00:15:24,010 --> 00:15:25,930
I tak się składa, że ​​ten pomysł tutaj.

184
00:15:26,440 --> 00:15:28,230
OK tak mili maratonu.

185
00:15:28,270 --> 00:15:30,750
Wiele rzeczy, które idzie do dokonywania bootstrap pasku nawigacyjnym.

186
00:15:30,970 --> 00:15:37,450
Ale znowu aż dotarliśmy tam było po prostu prosto do naszego skopiowanie tego pliku i krajanie jego fragmentów.

187
00:15:37,540 --> 00:15:44,080
I tak właśnie robimy tyle są prawie za każdym razem, po prostu przyjąć, że przykładowy kod i dowiedzieć się, jakie elementy musimy i go stamtąd.