Bootstrap令我困惑：<nav>，.nav，.navbar-nav，.navbar

Question

我是Bootstrap的新手。每次我創建一個引導的導航欄，我使用這些元素/類，但所有這些讓我困惑：

<nav> 
.nav 
.navbar 
.navbar-nav 

誰能請解釋一下這些元素/類之間的區別？

Answer 1

<nav>標記不是引導程序樣式，它只是一個表示導航的HTML5標記。其他類用於設置Bootstrap導航欄組件的不同部分。使用任何瀏覽器的開發者工具可以看到這些類中每個類都能做什麼。右鍵單擊完成的導航欄並選擇「檢查元素」或類似的東西，然後瀏覽DOM。

所有這些類的原因是Bootstrap試圖使它們的組件更加可重用。如果將所有nav -elements設置爲其導航欄組件，則開發人員難以創建自己的導航欄，因爲它們需要覆蓋此元素上的任何Bootstrap樣式。

Answer 2

這些是執行用戶想要實現的特定功能的引導類。在你的情況下，你想添加一個導航欄到頁面，並使用引導navbar類來實現功能。如果您看到bootstrap.css和bootstrap.js文件源代碼並找到navbar類，則可以看到navbar類的代碼。 這是源文件中的代碼片段。

.navbar-nav { 
    margin: 7.5px -15px; 
} 
.navbar-nav > li > a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    line-height: 20px; 
} 
@media (max-width: 767px) { 
    .navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
    } 
    .navbar-nav .open .dropdown-menu > li > a, 
    .navbar-nav .open .dropdown-menu .dropdown-header { 
    padding: 5px 15px 5px 25px; 
    } 
    .navbar-nav .open .dropdown-menu > li > a { 
    line-height: 20px; 
    } 
    .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-nav .open .dropdown-menu > li > a:focus { 
    background-image: none; 
    } 
} 
@media (min-width: 768px) { 
    .navbar-nav { 
    float: left; 
    margin: 0; 
    } 
    .navbar-nav > li { 
    float: left; 
    } 
    .navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 15px; 
    } 
} 

如果您使用此navbar-nav類。此功能將被添加到您的元素。

Answer 3

在Bootstraps v4 documentation（我只是c/p所需的部分）有一個很好的解釋。

Navbar：

導航欄需要包裝.navbar和配色方案。

使用<nav>元素確保無障礙或者，如果使用的是更通用的元素，如<div>，加role="navigation"每一個導航欄，以明確其識別爲一個具有里程碑意義的區域爲輔助技術的用戶

.navbar-nav了全高且重量輕的導航（包括下拉菜單支持）

Navs：

通過擴展基本組件.nav來滾動您自己的導航類型。通過指定其他樣式，所有Bootstrap的導航組件都建立在此之上。包含禁用狀態的樣式，但不包含活動狀態。