正常的導航欄鏈接和class =「navbar-link」鏈接之間的區別是什麼？

Question

我正在通過微軟的Edt入門課程（DEV203x）進行工作。我在那裏發現了這條信息：

要添加不被視爲導航欄一部分的普通鏈接，請將navbar-link類添加到a元素。錨點必須包含在navbar文本容器內。

<div class="navbar-text"> 
    <a class="navbar-link" href="URL here"> 
    Follow us! 
    </a> 
</div> 

普通鏈接理應加入這樣的：

<ul><li> 
    <a href="URL here"> 
    A normal link! 
    </a> 
</li></ul> 

似乎這些鏈接的顯示頁面上太大的區別有不。只有navbar-text的樣式適用於navbar-link，因爲它包含在該標籤中。

我在這裏錯過了什麼嗎？

Answer 1

只是爲了安全起見，正常的鏈接添加了<ul class="nav navbar-nav">，而不僅僅是一個ul（我敢肯定你知道已經準備好了）。

對於使用標準鏈接不屬於正規導航欄 導航組件內的人來說，使用.navbar鏈接類添加適當的 顏色默認和逆導航欄選項。

這些差異可能是微妙的，但它們很重要，因爲它們可能非常有用。 鏈接不在內常規導航就是這個進場時，你可以使用這些類添加文本或鏈接到你的導航欄不屬於withing標準ul + li結構。

在您提供的示例中，存在差異（即使非常小）。有可能不會需要這個（見例3）：

<div class="navbar-text"> 
    <a class="navbar-link" href="URL here"> 
    Follow us! 
    </a> 
</div> 

爲引導需要li類的內部照顧HREFs儘可能定位和造型爲它的導航組件，以便這不會如果你減少瀏覽器並打開摺疊的導航欄，你會看到鏈接不在示例3中的位置，如果你將鼠標懸停在第一個鏈接上，它將被加下劃線。默認導航鏈接不是這種情況。例如：如果您需要某些文本/鏈接在您的導航欄摺疊移動時仍然暴露，請在navbar-header內部使用這些標記，並且它們將被適當地定位/佈局，因此您不會（必然）必須自己寫CSS。以及navbar-collapse面板內部但在ul類別之外。

查看完整頁面中以下代碼段中的3個示例。

1）適當地使用這些類。

2）與第一個相同但沒有應用這些類的示例結構。

3）我相信你的例子說明了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<h3 class="alert alert-success">Example 1: Using Bootstrap classes</h3> 
 

 
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a class="navbar-brand" href="#">Brand</a> 
 

 
     <p class="navbar-text navbar-left">This is navbar-text <a href="#" class="navbar-link">and this is a navbar-link</a> 
 

 
     </p> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-1"> 
 
     <p class="navbar-text">This is navbar-text <a href="#" class="navbar-link">and this is a navbar-link</a> 
 

 
     </p> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<hr> 
 
<h3 class="alert alert-info">Example 2: Not using Bootstrap classes</h3> 
 

 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a class="navbar-brand" href="#">Brand</a> 
 

 
     <p class="not-navbar-text">This is NOT navbar-text <a href="#" class="not-navbar-link">and this is NOT navbar-link</a> 
 

 
     </p> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-2"> 
 
     <p class="not-navbar-text">This is NOT navbar-text <a href="#" class="not-navbar-link">and this is NOT navbar-link</a> 
 

 
     </p> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<hr> 
 
<h3 class="alert alert-warning">Example 3: You example</h3> 
 

 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a class="navbar-brand" href="#">Brand</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-3"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> 
 
      <div class="navbar-text"><a href="#" class="navbar-link">Follow us!</a> 
 

 
      </div> 
 
     </li> 
 
     <li><a href="#">Follow us!</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<hr> 
 
<h3 class="alert alert-success">Example 4: Navbar-Link</h3> 
 
<nav class="navbar navbar-inverse navbar-static-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button><a class="navbar-brand" href="#">Brand</a> 
 

 
     <p class="navbar-text"> <a href="#">Normal Link</a> <a href="#" class="navbar-link">Navbar-link</a> 
 

 
     </p> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Normal Link</a> 
 

 
     </li> 
 
     <li><a href="#" class="navbar-link">Navbar-link</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 2

第一個示例是使用引導程序結構進行css/styling，而第二個示例是裸骨骼html。在這種情況下，Bootstrap可能不會應用任何東西，因爲您自己的CSS /樣式表覆蓋了它們，更難以分辨的信息。

您還需要確認引導程序已正確設置，因爲根據引導程序外觀，它們應該看起來不同。在這裏看到一個navbar鏈接的例子; http://getbootstrap.com/components/#navbar-links。