歡迎回來，在這節課，我要告訴你所有引導的最重要和最廣泛使用的成分也就是NFR所以你可以看到在GET Boucek網絡公司之一。
他們利用足夠欄組件就在這裡。
我們也將使用一個我們Yelp的應用陣營和我調整的導航欄。
注意它是如何回應，然後也只要我打TAB什麼大小和移動的大小，我們得到這個漂亮的漢堡包注意到。
因此，我們會在這一課對所有這一切工作。
但是，我們要開始簡單。
我們需要做的第一件事就是去組件和去導航欄中，我們走得更遠之前，我已經創建了只是因為我們會寫相當多的代碼的新文件。
舊的是越來越混亂。
我打電話是白開水吧^ h Tm值L.
內部的所有他們是引導不在這裡更改標題的鏈接。
我只是把它引導導航條。
就這樣。
現在，讓我們去的文檔和看一看默認的導航欄。
因此，這個例子在這裡展示的是在這裡我們可以有一個全新的鏈接的重要特徵。
我們可以有其他的聯繫，我們可以在菜單上有所下降。
我們可以有一個導航欄的形式和一個按鈕，我們可以有事情是在右邊的東西都是在左側。
這確實展示了一切。
它是引導蹩腳的酒吧廚房的水槽，因此標記是有點長。
我們將與所有這些作品由該視頻的末尾工作。
但我想簡單的開始，我會向您展示，使一些最簡單的方式開始。
因此，我們需要做一個導航元素和NAV元素都需要有兩個類，我們希望導航欄和導航欄，我們可以開始與Dasch默認將節省。
現在，讓我們去看看在瀏覽器中刷新該文件。
你可以看到，我希望它遇到示範的screencast有足夠的酒吧非常微弱的酒吧在頂部會不過就是這樣這就是我們如何真正初始化NF吧。
現在，讓我們用一些內容填充它。
我們將看看的第一件事情是我們如何能夠在這個品牌加在這裡。
基本上，您的公司名稱。
在多數情況下。
這就是使用導航欄標題，然後在NFR頭中，我們使用了一個導航欄的品牌。
因此，讓我們通過添加DIV類的equals導航欄中破折號標題，然後還有裡面我們要在導航欄中品牌，這是一個錨標記添加啟動。
通常，當你點擊該公司名稱是帶你回到主頁。
所以我們會做的是，這裡的錨標記，我們將會等於索普交通開始，因此它不會把我們的任何地方。
級將等於導航欄短跑品牌，我們只是做了一個公司名稱。
讓我們來看看，如果我得到了我周圍一個咖啡杯讓我們一起去咖啡。
但實際上使之成為真正的啟動，我們需要改變拼寫一點點。
OK亞歷克斯。
夠用了我。
咖啡與K.
讓我們去看看。
刷新，現在我們有我們的導航欄中品牌，這是一個鏈接。
我一下就可以了。
它並不需要我到任何地方，但現在最終這樣，當你點擊公司名稱需要你回到旁邊的主頁我們的應用程序將有它。
讓我們看看如果我們能像有關接觸一些其他的鏈接添加。
註冊登記。
在酒吧所有這些共同的聯繫。
讓我們從有關網頁鏈接添加右這裡開始。
因此，我們會回去，然後導航欄頭，我們要再拍格在這個分區將收集所有的內容，至少在我們的導航欄左側之外。
因此，我們有頭，然後我們將有一些內容，然後如果我們想在右邊的東西，我們就必須有另一個類另一個div。
所以這裡的類。
實際上是兩個我們想要導航和導航欄衝刺導航。
不要問我關於命名他們的導航欄衝刺導航。
這是自舉的大批評之一是，它是一個有點難看，而且有時不是非常有意義的。
而實際上有被響應引導的語義無意義創建如果你叫語義UI綜援框架。
這就是一個我很享受為好。
我辯論教學。
但最終它只是沒有得到廣泛的應用不會有那麼大的教程呢。
所以回到我們這裡的差異。
一流的導航欄導航和類資產淨值兩個。
，然後，我們要對這個NFR每一個項目，我們需要添加一個盟友，然後在Y裡面，如果我們想鏈接我們剛剛有一個錨標記。
所以這一塊只是無處可去。
再次，這將是關於頁。
如果我回去，並刷新我們現在有一個鏈接至，讓我們增加一個聯繫保存回去。
現在我們有兩個環節，現在讓我們繼續前進，添加一些頁面的右側。
讓我們增加對寄存器中的兩個環節一個或註冊，另一個用於登錄上欄的右側做到這一點。
在這裡，我們實際上不是用div的它更傳統的使用一個你將工作完全相同的方式需要一個諾特爾容器，但你想擁有的盟友，而不是很好，即使他們會工作得很好用一個div使多一點的意義上，而不是UL認證。
所以，我們要添加另一個UL而這一次將是NAV。導航欄中破折號導航，然後導航欄衝刺。
對。
我們需要確保我們拼寫正確，否則該類不會生效。
那麼，這將要做的是使我們的內容的新組的導航欄的右側。
現在，我們只需要填充它。
所以我會添加無論是在沿邊兩個環節。
第一個將無處可去，它會說，註冊，然後我們就會有另外一個，只是說登錄。
讓我們來看看。
刷新頁面，你可以看到我們有正確的內容。
然而，它的正對著的優勢和修復，我們可以在足夠的酒吧，就像我們使用容器更早一些的間距添加到我們的主要內容一個容器中添加。
我們可以添加一個，而不是一個導航欄。
所以，我把一切都在NEPH酒吧，而不是一個容器。
因此類等於容器。
只是移動下來。
確保一切正確縮進。
在那裡，我們走了。
讓我們來測試一下。
尼斯。
所以，現在一切都很好居中正確。
我會告訴你，如果我沒有加入容器中的導航之外，他們把整個導航欄裡面。
那麼看看會發生什麼。
現在，如果我足夠新鮮吧其實我切斷，唯一無二的街對面的方式的一部分。
因此，容器將做到這一點到任何我們把它裡面。
在這種情況下，我們希望的導航欄以便它不收縮的實際蹩腳的部分自我，但它是制約它裡面的內容裡面的容器。
好。
因此，容器，我們有我們的Hetter我們左邊的東西，我們有正確的一些內容，所以你可以在這裡看到。
現在是什麼加強它一點點，去把這個基本的導航欄或默認的導航欄，他們在文檔中有，讓我們複製這個整個事情，我只會把它放在右下方現在為止做一些空間。
很多意見，使之更加清晰。
默認的導航欄。
讓我們來看看它的刷新。
所以，在這裡這個導航欄中，有一個幾件事情我想強調。
其中之一是，我們已經跌至上的菜單，但他們不實際工作。
同時也作為我們調整窗口的大小，我們在這裡得到了漢堡包菜單。
這些鏈接走開。
表單消失並揭示它們，我們需要點擊這裡。
但是，這也不行。
因此，讓我們先來得到它的工作，然後我們將談論所有這些不同的部分，他們這樣做，使其工作是什麼。
我們需要去包括引導JavaScript文件。
因此，如果我們回到引導文件，我們會點擊下載。
還有，我們需要它在這裡的JavaScript文件。
我將使用CDN的版本，但它也涉及您下載文件夾中。
這只是所謂的自舉。
是。
或最小化版本自舉了孟子。
讓我們補充一點，我們會做下來我們身體的底部和保存。
我知道，我們還沒有談到的JavaScript。
你不知道什麼是腳本是在這裡什麼也源不要緊。
我們只是將它插入引導。
現在我們刷新。
我們可以解決一個小問題，我會告訴你在這裡告訴我們，白手起家的JavaScript需要查詢。
不要擔心這是什麼，以及它如何得到此消息。
但我只是想展示給你，讓你看到實際的消息我們得到的。
我們需要要求，我們也還沒有談到Ĵ查詢。
但它是很容易去得到。
我們沒有寫任何JavaScript。
你不必知道任何JavaScript。
我們只需要包含它。
因此，我們需要做的是尋找周杰倫查詢請求CDN這是對代碼周杰倫點com，並到這裡需要選擇最新的版本並複製此網址。
這是奎雷伊文件，然後我們會回到這裡了。
我們要添加這些script標籤的另一個。
基本上複製這個確切的代碼。
其實我會的，使其更容易複製，準確的線路和改變這個網址是JEY查詢你。
如果一切都失敗了，你可以只輸入了這一點。
這並不是說壞，如果你一個為1-但我通過搜索周杰倫queery CDN得到這個又節省，這確實需要，因為它依賴於一個查詢來白手起家的JavaScript文件之前。
所以有更多的時間不要太擔心它是什麼，它是如何工作的周杰倫查詢是什麼。
這就是從現在來了幾分鐘。
但是，為了獲得最大的自舉，尤其是導航欄和下拉菜單。
我們只需要有這兩行，我們使用它，所以我們現在回過頭來刷新任何時候。
首先，被丟棄在菜單上現在的工作，你可以看到我們現在有下拉菜單。
我們不會談論在這個視頻，但我調整，我得到了漢堡包。
當我點擊它的漢堡包現在的作品。
它切換隱藏的材料。
這樣的方式，它的工作原理在這裡有這個小斷點在這裡，所有這些內容皮張和所有我們看到的是頭和按鈕。
然後，當我們點擊按鈕以前隱藏的內容再次出現所有讓我們的工作。
現在我們。
但是，我們要做一個更複雜的版本，我們只想隱藏這些四個環節，這樣，當我們調整這四個環節都隱藏，然後真的很快他們就會被顯示。
要做到這一點將會通過採取看看它是如何在這個默認版本的完成導航欄，這個巨型怪物啟動。
而我只想指出重要的線就在這裡。
當我們打手機的大小，所以它不會使按鈕對我們來說，無論我們把這個div中的div類崩潰導航欄崩潰將被折疊。
它不會做這種切換在重新出現在躲藏，但它會隱藏什麼內容，我們把它的內部時，我們打的平板電腦和手機的大小。
所以，我們要複製這一點，我們只需要將其套在我們要隱藏的內容，我們希望在這裡隱藏這一點。
這兩個Juelz所以四個環節，我們想隱藏，當我們打的更小的屏幕尺寸。
所以加在結束標記和保存和這裡有一個線，這是很重要的，我會得到它在短短的時刻。
它不會影響我們只是還沒有，但如果我們刷新。
你會看到的。
現在，當我調整有一點就在這裡，其中倒塌div中所有的內容消失。
現在，它不會重新出現。
我們沒有得到這個漢堡包。
我們沒有得到任何東西了點擊，但它已經崩潰了它的消失。
那是因為我們在這條線在這裡的div類崩潰導航欄中添加崩潰。
我們需要做的下一件事就是添加在漢堡，這是相當多的代碼。
遺憾的是它仍然比，如果我們不得不這樣做自己好得多。
但漢堡其實這一切就在這裡。
所以，我要複製並粘貼到我們的咖啡inContact公司之前午睡或Hetter內。
我們會救我會回來給它做什麼。
我們只是刷新。
現在，如果我調整我得到的漢堡包。
在那裡，我們走了。
現在讓我來解釋它是如何工作的一點點。
因此，有一個按鈕，然後該按鈕裡面有三個跨距，每個人負責製造這些酒吧之一。
所以，這並不是說我們現在看到它實際上是每個做的正在風格到這些窄條使漢堡包這個小spand隊的圖像。
然後，盡可能的表現內容和隱藏，當我們點擊它什麼是真正重要的是，我們有這個目標的數據屬性，無論這是在我們的情況下，B-S例如設定。
現在，我們的塌陷，引導例如網為我們的俱樂部左右，我們只是將其更改為yes。
導航。演示就這樣。
然後，我們需要改變，我們要真正崩潰，我們要顯示和隱藏的內容的ID。
所以，我會改變以匹配VS導航演示。
請注意一個重要的區別。
我們不是在北極雷神增加所以它就像CSI那時我們選擇用C的東西說，我們需要使用八溴索普目標的ID，所以我們離開ID作為只是文本的名稱。
現在，如果演示我們在這裡補充一點，索普會節省刷新。
現在，如果我調整我們得到的漢堡包，他們點擊它，它的工作原理切換的顯示和隱藏。
大。
這將顯示你的最後一件事是，如果我們移動這個東西崩潰之外。
因此，讓我們這些鏈接在這裡。
是崩潰，而不是賬戶或約和接觸，我們只是將這些在這裡倒塌的div的外面，我刷新可以看到，他們實際上沒有崩潰，他們呆在那裡，然後我點擊了與其他兩個被切換。
現在，我不是說這看起來不錯，但它確實說明了崩潰div的重要性..
所以，無論發生崩潰或任何我們有我們的情況下，對於那些到上或從右向左不同環節在側。
他們都將面臨崩潰的時候，我們打的更小尺寸的移動。
然後讓他們再次顯示我們點擊這個按鈕在這裡和按鈕有一個數據目標屬性和任何ID此相對應的將被隱藏，當我們點擊所示。
而這恰好是這種想法在這裡。
確定這樣一種馬拉松。
很多東西，進入製作引導導航欄。
但同樣，我們得到的方式有按直線上升複製此到我們的文件，並剖析它的一部分只是。
這就是我們如何製造足夠的幾乎每一個我們只是採取的示例代碼，找出我們需要的部分，並從那裡的時間。