1
00:00:00,750 --> 00:00:12,290
歡迎回來，在這節課，我要告訴你所有引導的最重要和最廣泛使用的成分也就是NFR所以你可以看到在GET Boucek網絡公司之一。

2
00:00:12,450 --> 00:00:15,980
他們利用足夠欄組件就在這裡。

3
00:00:16,200 --> 00:00:21,900
我們也將使用一個我們Yelp的應用陣營和我調整的導航欄。

4
00:00:21,900 --> 00:00:30,700
注意它是如何回應，然後也只要我打TAB什麼大小和移動的大小，我們得到這個漂亮的漢堡包注意到。

5
00:00:30,720 --> 00:00:33,020
因此，我們會在這一課對所有這一切工作。

6
00:00:33,180 --> 00:00:34,890
但是，我們要開始簡單。

7
00:00:34,890 --> 00:00:46,290
我們需要做的第一件事就是去組件和去導航欄中，我們走得更遠之前，我已經創建了只是因為我們會寫相當多的代碼的新文件。

8
00:00:46,380 --> 00:00:48,150
舊的是越來越混亂。

9
00:00:48,150 --> 00:00:50,620
我打電話是白開水吧^ h Tm值L.

10
00:00:50,820 --> 00:00:56,030
內部的所有他們是引導不在這裡更改標題的鏈接。

11
00:00:56,630 --> 00:01:00,980
我只是把它引導導航條。

12
00:01:01,350 --> 00:01:02,910
就這樣。

13
00:01:02,910 --> 00:01:07,580
現在，讓我們去的文檔和看一看默認的導航欄。

14
00:01:08,220 --> 00:01:13,460
因此，這個例子在這裡展示的是在這裡我們可以有一個全新的鏈接的重要特徵。

15
00:01:13,560 --> 00:01:15,800
我們可以有其他的聯繫，我們可以在菜單上有所下降。

16
00:01:15,930 --> 00:01:22,010
我們可以有一個導航欄的形式和一個按鈕，我們可以有事情是在右邊的東西都是在左側。

17
00:01:22,020 --> 00:01:23,720
這確實展示了一切。

18
00:01:23,790 --> 00:01:30,330
它是引導蹩腳的酒吧廚房的水槽，因此標記是有點長。

19
00:01:30,390 --> 00:01:33,530
我們將與所有這些作品由該視頻的末尾工作。

20
00:01:33,540 --> 00:01:37,790
但我想簡單的開始，我會向您展示，使一些最簡單的方式開始。

21
00:01:38,040 --> 00:01:51,550
因此，我們需要做一個導航元素和NAV元素都需要有兩個類，我們希望導航欄和導航欄，我們可以開始與Dasch默認將節省。

22
00:01:51,550 --> 00:01:54,920
現在，讓我們去看看在瀏覽器中刷新該文件。

23
00:01:55,200 --> 00:02:04,860
你可以看到，我希望它遇到示範的screencast有足夠的酒吧非常微弱的酒吧在頂部會不過就是這樣這就是我們如何真正初始化NF吧。

24
00:02:04,860 --> 00:02:06,980
現在，讓我們用一些內容填充它。

25
00:02:07,050 --> 00:02:11,640
我們將看看的第一件事情是我們如何能夠在這個品牌加在這裡。

26
00:02:11,790 --> 00:02:13,180
基本上，您的公司名稱。

27
00:02:13,230 --> 00:02:14,320
在多數情況下。

28
00:02:14,900 --> 00:02:20,830
這就是使用導航欄標題，然後在NFR頭中，我們使用了一個導航欄的品牌。

29
00:02:20,850 --> 00:02:35,910
因此，讓我們通過添加DIV類的equals導航欄中破折號標題，然後還有裡面我們要在導航欄中品牌，這是一個錨標記添加啟動。

30
00:02:35,910 --> 00:02:39,440
通常，當你點擊該公司名稱是帶你回到主頁。

31
00:02:39,660 --> 00:02:45,840
所以我們會做的是，這裡的錨標記，我們將會等於索普交通開始，因此它不會把我們的任何地方。

32
00:02:45,870 --> 00:02:52,890
級將等於導航欄短跑品牌，我們只是做了一個公司名稱。

33
00:02:52,890 --> 00:02:57,170
讓我們來看看，如果我得到了我周圍一個咖啡杯讓我們一起去咖啡。

34
00:02:57,270 --> 00:03:02,210
但實際上使之成為真正的啟動，我們需要改變拼寫一點點。

35
00:03:02,400 --> 00:03:03,180
OK亞歷克斯。

36
00:03:03,180 --> 00:03:03,990
夠用了我。

37
00:03:04,020 --> 00:03:05,350
咖啡與K.

38
00:03:05,760 --> 00:03:07,420
讓我們去看看。

39
00:03:07,590 --> 00:03:11,830
刷新，現在我們有我們的導航欄中品牌，這是一個鏈接。

40
00:03:11,940 --> 00:03:12,880
我一下就可以了。

41
00:03:13,010 --> 00:03:20,940
它並不需要我到任何地方，但現在最終這樣，當你點擊公司名稱需要你回到旁邊的主頁我們的應用程序將有它。

42
00:03:20,940 --> 00:03:24,480
讓我們看看如果我們能像有關接觸一些其他的鏈接添加。

43
00:03:24,510 --> 00:03:25,660
註冊登記。

44
00:03:25,770 --> 00:03:27,490
在酒吧所有這些共同的聯繫。

45
00:03:27,660 --> 00:03:31,190
讓我們從有關網頁鏈接添加右這裡開始。

46
00:03:31,500 --> 00:03:41,600
因此，我們會回去，然後導航欄頭，我們要再拍格在這個分區將收集所有的內容，至少在我們的導航欄左側之外。

47
00:03:41,760 --> 00:03:48,960
因此，我們有頭，然後我們將有一些內容，然後如果我們想在右邊的東西，我們就必須有另一個類另一個div。

48
00:03:48,960 --> 00:03:50,010
所以這裡的類。

49
00:03:50,070 --> 00:03:56,730
實際上是兩個我們想要導航和導航欄衝刺導航。

50
00:03:56,850 --> 00:04:00,170
不要問我關於命名他們的導航欄衝刺導航。

51
00:04:00,210 --> 00:04:05,940
這是自舉的大批評之一是，它是一個有點難看，而且有時不是非常有意義的。

52
00:04:06,030 --> 00:04:14,630
而實際上有被響應引導的語義無意義創建如果你叫語義UI綜援框架。

53
00:04:14,910 --> 00:04:16,660
這就是一個我很享受為好。

54
00:04:16,710 --> 00:04:18,070
我辯論教學。

55
00:04:18,420 --> 00:04:22,190
但最終它只是沒有得到廣泛的應用不會有那麼大的教程呢。

56
00:04:22,200 --> 00:04:23,550
所以回到我們這裡的差異。

57
00:04:23,590 --> 00:04:27,600
一流的導航欄導航和類資產淨值兩個。

58
00:04:27,690 --> 00:04:36,850
，然後，我們要對這個NFR每一個項目，我們需要添加一個盟友，然後在Y裡面，如果我們想鏈接我們剛剛有一個錨標記。

59
00:04:37,050 --> 00:04:38,810
所以這一塊只是無處可去。

60
00:04:38,850 --> 00:04:42,280
再次，這將是關於頁。

61
00:04:42,500 --> 00:04:54,120
如果我回去，並刷新我們現在有一個鏈接至，讓我們增加一個聯繫保存回去。

62
00:04:54,570 --> 00:04:58,950
現在我們有兩個環節，現在讓我們繼續前進，添加一些頁面的右側。

63
00:04:59,160 --> 00:05:07,630
讓我們增加對寄存器中的兩個環節一個或註冊，另一個用於登錄上欄的右側做到這一點。

64
00:05:07,690 --> 00:05:23,570
在這裡，我們實際上不是用div的它更傳統的使用一個你將工作完全相同的方式需要一個諾特爾容器，但你想擁有的盟友，而不是很好，即使他們會工作得很好用一個div使多一點的意義上，而不是UL認證。

65
00:05:23,620 --> 00:05:32,700
所以，我們要添加另一個UL而這一次將是NAV。導航欄中破折號導航，然後導航欄衝刺。

66
00:05:32,760 --> 00:05:33,570
對。

67
00:05:33,660 --> 00:05:38,280
我們需要確保我們拼寫正確，否則該類不會生效。

68
00:05:38,280 --> 00:05:42,960
那麼，這將要做的是使我們的內容的新組的導航欄的右側。

69
00:05:43,120 --> 00:05:44,540
現在，我們只需要填充它。

70
00:05:44,550 --> 00:05:47,750
所以我會添加無論是在沿邊兩個環節。

71
00:05:47,820 --> 00:05:56,550
第一個將無處可去，它會說，註冊，然後我們就會有另外一個，只是說登錄。

72
00:05:56,940 --> 00:05:58,080
讓我們來看看。

73
00:05:58,290 --> 00:06:01,630
刷新頁面，你可以看到我們有正確的內容。

74
00:06:01,650 --> 00:06:12,220
然而，它的正對著的優勢和修復，我們可以在足夠的酒吧，就像我們使用容器更早一些的間距添加到我們的主要內容一個容器中添加。

75
00:06:12,220 --> 00:06:14,190
我們可以添加一個，而不是一個導航欄。

76
00:06:14,400 --> 00:06:17,730
所以，我把一切都在NEPH酒吧，而不是一個容器。

77
00:06:17,740 --> 00:06:20,800
因此類等於容器。

78
00:06:21,060 --> 00:06:22,430
只是移動下來。

79
00:06:22,560 --> 00:06:26,180
確保一切正確縮進。

80
00:06:26,190 --> 00:06:27,770
在那裡，我們走了。

81
00:06:27,780 --> 00:06:30,930
讓我們來測試一下。

82
00:06:30,930 --> 00:06:31,430
尼斯。

83
00:06:31,440 --> 00:06:33,910
所以，現在一切都很好居中正確。

84
00:06:34,140 --> 00:06:41,940
我會告訴你，如果我沒有加入容器中的導航之外，他們把整個導航欄裡面。

85
00:06:42,880 --> 00:06:43,650
那麼看看會發生什麼。

86
00:06:43,660 --> 00:06:49,950
現在，如果我足夠新鮮吧其實我切斷，唯一無二的街對面的方式的一部分。

87
00:06:50,460 --> 00:06:53,460
因此，容器將做到這一點到任何我們把它裡面。

88
00:06:53,670 --> 00:07:03,820
在這種情況下，我們希望的導航欄以便它不收縮的實際蹩腳的部分自我，但它是制約它裡面的內容裡面的容器。

89
00:07:04,440 --> 00:07:04,950
好。

90
00:07:05,060 --> 00:07:13,060
因此，容器，我們有我們的Hetter我們左邊的東西，我們有正確的一些內容，所以你可以在這裡看到。

91
00:07:13,290 --> 00:07:29,670
現在是什麼加強它一點點，去把這個基本的導航欄或默認的導航欄，他們在文檔中有，讓我們複製這個整個事情，我只會把它放在右下方現在為止做一些空間。

92
00:07:29,670 --> 00:07:33,010
很多意見，使之更加清晰。

93
00:07:33,250 --> 00:07:35,510
默認的導航欄。

94
00:07:36,060 --> 00:07:40,280
讓我們來看看它的刷新。

95
00:07:40,560 --> 00:07:44,580
所以，在這裡這個導航欄中，有一個幾件事情我想強調。

96
00:07:44,580 --> 00:07:48,690
其中之一是，我們已經跌至上的菜單，但他們不實際工作。

97
00:07:48,900 --> 00:07:53,300
同時也作為我們調整窗口的大小，我們在這裡得到了漢堡包菜單。

98
00:07:53,550 --> 00:07:54,740
這些鏈接走開。

99
00:07:54,750 --> 00:07:58,630
表單消失並揭示它們，我們需要點擊這裡。

100
00:07:58,830 --> 00:08:00,480
但是，這也不行。

101
00:08:00,960 --> 00:08:07,570
因此，讓我們先來得到它的工作，然後我們將談論所有這些不同的部分，他們這樣做，使其工作是什麼。

102
00:08:07,590 --> 00:08:10,550
我們需要去包括引導JavaScript文件。

103
00:08:10,830 --> 00:08:15,660
因此，如果我們回到引導文件，我們會點擊下載。

104
00:08:15,780 --> 00:08:19,800
還有，我們需要它在這裡的JavaScript文件。

105
00:08:19,800 --> 00:08:24,460
我將使用CDN的版本，但它也涉及您下載文件夾中。

106
00:08:24,510 --> 00:08:25,700
這只是所謂的自舉。

107
00:08:25,810 --> 00:08:26,220
是。

108
00:08:26,250 --> 00:08:29,890
或最小化版本自舉了孟子。

109
00:08:30,420 --> 00:08:36,210
讓我們補充一點，我們會做下來我們身體的底部和保存。

110
00:08:36,210 --> 00:08:38,280
我知道，我們還沒有談到的JavaScript。

111
00:08:38,380 --> 00:08:42,860
你不知道什麼是腳本是在這裡什麼也源不要緊。

112
00:08:42,900 --> 00:08:44,710
我們只是將它插入引導。

113
00:08:44,910 --> 00:08:46,550
現在我們刷新。

114
00:08:46,710 --> 00:08:53,470
我們可以解決一個小問題，我會告訴你在這裡告訴我們，白手起家的JavaScript需要查詢。

115
00:08:53,790 --> 00:08:56,180
不要擔心這是什麼，以及它如何得到此消息。

116
00:08:56,250 --> 00:08:59,970
但我只是想展示給你，讓你看到實際的消息我們得到的。

117
00:08:59,970 --> 00:09:03,240
我們需要要求，我們也還沒有談到Ĵ查詢。

118
00:09:03,580 --> 00:09:05,360
但它是很容易去得到。

119
00:09:05,400 --> 00:09:07,140
我們沒有寫任何JavaScript。

120
00:09:07,170 --> 00:09:08,830
你不必知道任何JavaScript。

121
00:09:08,830 --> 00:09:10,180
我們只需要包含它。

122
00:09:10,230 --> 00:09:23,890
因此，我們需要做的是尋找周杰倫查詢請求CDN這是對代碼周杰倫點com，並到這裡需要選擇最新的版本並複製此網址。

123
00:09:23,910 --> 00:09:30,150
這是奎雷伊文件，然後我們會回到這裡了。

124
00:09:30,150 --> 00:09:32,560
我們要添加這些script標籤的另一個。

125
00:09:32,640 --> 00:09:34,410
基本上複製這個確切的代碼。

126
00:09:34,410 --> 00:09:42,030
其實我會的，使其更容易複製，準確的線路和改變這個網址是JEY查詢你。

127
00:09:42,610 --> 00:09:44,530
如果一切都失敗了，你可以只輸入了這一點。

128
00:09:44,560 --> 00:09:56,290
這並不是說壞，如果你一個為1-但我通過搜索周杰倫queery CDN得到這個又節省，這確實需要，因為它依賴於一個查詢來白手起家的JavaScript文件之前。

129
00:09:56,560 --> 00:10:00,370
所以有更多的時間不要太擔心它是什麼，它是如何工作的周杰倫查詢是什麼。

130
00:10:00,450 --> 00:10:02,150
這就是從現在來了幾分鐘。

131
00:10:02,430 --> 00:10:06,550
但是，為了獲得最大的自舉，尤其是導航欄和下拉菜單。

132
00:10:06,750 --> 00:10:13,210
我們只需要有這兩行，我們使用它，所以我們現在回過頭來刷新任何時候。

133
00:10:13,230 --> 00:10:18,850
首先，被丟棄在菜單上現在的工作，你可以看到我們現在有下拉菜單。

134
00:10:18,880 --> 00:10:24,430
我們不會談論在這個視頻，但我調整，我得到了漢堡包。

135
00:10:25,050 --> 00:10:26,980
當我點擊它的漢堡包現在的作品。

136
00:10:26,980 --> 00:10:29,480
它切換隱藏的材料。

137
00:10:29,560 --> 00:10:43,280
這樣的方式，它的工作原理在這裡有這個小斷點在這裡，所有這些內容皮張和所有我們看到的是頭和按鈕。

138
00:10:43,380 --> 00:10:49,120
然後，當我們點擊按鈕以前隱藏的內容再次出現所有讓我們的工作。

139
00:10:49,120 --> 00:10:50,650
現在我們。

140
00:10:50,950 --> 00:11:01,960
但是，我們要做一個更複雜的版本，我們只想隱藏這些四個環節，這樣，當我們調整這四個環節都隱藏，然後真的很快他們就會被顯示。

141
00:11:02,250 --> 00:11:09,830
要做到這一點將會通過採取看看它是如何在這個默認版本的完成導航欄，這個巨型怪物啟動。

142
00:11:10,380 --> 00:11:13,650
而我只想指出重要的線就在這裡。

143
00:11:13,760 --> 00:11:24,850
當我們打手機的大小，所以它不會使按鈕對我們來說，無論我們把這個div中的div類崩潰導航欄崩潰將被折疊。

144
00:11:24,850 --> 00:11:33,470
它不會做這種切換在重新出現在躲藏，但它會隱藏什麼內容，我們把它的內部時，我們打的平板電腦和手機的大小。

145
00:11:33,650 --> 00:11:40,320
所以，我們要複製這一點，我們只需要將其套在我們要隱藏的內容，我們希望在這裡隱藏這一點。

146
00:11:40,330 --> 00:11:49,980
這兩個Juelz所以四個環節，我們想隱藏，當我們打的更小的屏幕尺寸。

147
00:11:50,440 --> 00:11:57,820
所以加在結束標記和保存和這裡有一個線，這是很重要的，我會得到它在短短的時刻。

148
00:11:57,850 --> 00:12:01,230
它不會影響我們只是還沒有，但如果我們刷新。

149
00:12:01,690 --> 00:12:02,160
你會看到的。

150
00:12:02,170 --> 00:12:10,650
現在，當我調整有一點就在這裡，其中倒塌div中所有的內容消失。

151
00:12:10,680 --> 00:12:11,650
現在，它不會重新出現。

152
00:12:11,640 --> 00:12:13,180
我們沒有得到這個漢堡包。

153
00:12:13,330 --> 00:12:16,940
我們沒有得到任何東西了點擊，但它已經崩潰了它的消失。

154
00:12:17,050 --> 00:12:24,580
那是因為我們在這條線在這裡的div類崩潰導航欄中添加崩潰。

155
00:12:24,630 --> 00:12:29,780
我們需要做的下一件事就是添加在漢堡，這是相當多的代碼。

156
00:12:29,780 --> 00:12:33,010
遺憾的是它仍然比，如果我們不得不這樣做自己好得多。

157
00:12:33,280 --> 00:12:37,220
但漢堡其實這一切就在這裡。

158
00:12:37,800 --> 00:12:48,660
所以，我要複製並粘貼到我們的咖啡inContact公司之前午睡或Hetter內。

159
00:12:48,970 --> 00:12:52,420
我們會救我會回來給它做什麼。

160
00:12:53,320 --> 00:12:54,680
我們只是刷新。

161
00:12:55,140 --> 00:12:57,910
現在，如果我調整我得到的漢堡包。

162
00:12:58,120 --> 00:13:00,280
在那裡，我們走了。

163
00:13:00,310 --> 00:13:03,240
現在讓我來解釋它是如何工作的一點點。

164
00:13:03,250 --> 00:13:13,000
因此，有一個按鈕，然後該按鈕裡面有三個跨距，每個人負責製造這些酒吧之一。

165
00:13:13,210 --> 00:13:21,780
所以，這並不是說我們現在看到它實際上是每個做的正在風格到這些窄條使漢堡包這個小spand隊的圖像。

166
00:13:22,030 --> 00:13:34,310
然後，盡可能的表現內容和隱藏，當我們點擊它什麼是真正重要的是，我們有這個目標的數據屬性，無論這是在我們的情況下，B-S例如設定。

167
00:13:34,310 --> 00:13:41,700
現在，我們的塌陷，引導例如網為我們的俱樂部左右，我們只是將其更改為yes。

168
00:13:42,180 --> 00:13:44,330
導航。演示就這樣。

169
00:13:44,470 --> 00:13:49,810
然後，我們需要改變，我們要真正崩潰，我們要顯示和隱藏的內容的ID。

170
00:13:49,870 --> 00:13:57,310
所以，我會改變以匹配VS導航演示。

171
00:13:57,340 --> 00:13:59,710
請注意一個重要的區別。

172
00:13:59,710 --> 00:14:11,420
我們不是在北極雷神增加所以它就像CSI那時我們選擇用C的東西說，我們需要使用八溴索普目標的ID，所以我們離開ID作為只是文本的名稱。

173
00:14:11,440 --> 00:14:18,120
現在，如果演示我們在這裡補充一點，索普會節省刷新。

174
00:14:18,120 --> 00:14:25,490
現在，如果我調整我們得到的漢堡包，他們點擊它，它的工作原理切換的顯示和隱藏。

175
00:14:26,250 --> 00:14:27,040
大。

176
00:14:27,070 --> 00:14:32,400
這將顯示你的最後一件事是，如果我們移動這個東西崩潰之外。

177
00:14:32,470 --> 00:14:35,710
因此，讓我們這些鏈接在這裡。

178
00:14:36,070 --> 00:14:55,710
是崩潰，而不是賬戶或約和接觸，我們只是將這些在這裡倒塌的div的外面，我刷新可以看到，他們實際上沒有崩潰，他們呆在那裡，然後我點擊了與其他兩個被切換。

179
00:14:55,720 --> 00:15:00,390
現在，我不是說這看起來不錯，但它確實說明了崩潰div的重要性..

180
00:15:00,630 --> 00:15:08,160
所以，無論發生崩潰或任何我們有我們的情況下，對於那些到上或從右向左不同環節在側。

181
00:15:08,160 --> 00:15:12,070
他們都將面臨崩潰的時候，我們打的更小尺寸的移動。

182
00:15:12,070 --> 00:15:23,570
然後讓他們再次顯示我們點擊這個按鈕在這裡和按鈕有一個數據目標屬性和任何ID此相對應的將被隱藏，當我們點擊所示。

183
00:15:24,010 --> 00:15:25,930
而這恰好是這種想法在這裡。

184
00:15:26,440 --> 00:15:28,230
確定這樣一種馬拉松。

185
00:15:28,270 --> 00:15:30,750
很多東西，進入製作引導導航欄。

186
00:15:30,970 --> 00:15:37,450
但同樣，我們得到的方式有按直線上升複製此到我們的文件，並剖析它的一部分只是。

187
00:15:37,540 --> 00:15:44,080
這就是我們如何製造足夠的幾乎每一個我們只是採取的示例代碼，找出我們需要的部分，並從那裡的時間。