使用引導程序3的導航欄編碼/響應式設計

Question

您好，我已經給出了兩個例子，用於在bootstrap3中編寫導航欄。我不知道有什麼區別是我知道例1是固定和響應，但ex 1是在<div>和ex 2設置在標題中。混淆，因爲他們都工作，但哪個更好。

實施例1

<!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="#">COMPANY</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Welcome</a></li>  
       <li><a href="#about">Create</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">lorem<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li class="dropdown-header"> lorem</li> 
       <li class="dropdown-header">lorem</li 
        <li class="divider"></li> 
        <li class="dropdown-header">lorem</li> 
        <li class="dropdown-header">lorem</li> 
       <li class="divider"></li> 
       <li class="dropdown-header">lorem</li> 
       <li class="dropdown-header">lorem</li> 
       </ul> 
      </li>    
      <li><a href="#">Dashboard</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

實施例二：

<header> 
    <nav id="header-nav" class="navbar navbar-default"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <a href="index.html" class="pull-left visible-md visible-lg"> 
      <div id="logo-img"></div> 
      </a> 
      <div class="navbar-brand"> 
      <a href="index.html"><h1>David Chu's China Bistro</h1></a> 
      <p> 
       <img src="images/star-k-logo.png" alt="Kosher certification"> 
       <span>Kosher Certified</span> 
      </p> 
      </div> 
     </div> 
     </div> 
    </nav> 
    </header> 

Answer 1

的差別是很清楚的。代碼的第二部分屬於使用引導程序的簡單Navbar。而第一個是固定的Navbar，你主要在網站上看到。它包含列表項目形式的虛擬導航數據。

您可以使用在線編輯器，如jsfiddle和plnkr來練習和查看這些示例的結果。

詳細瞭解自舉導航欄here。

Answer 2

在例子一中，它更加先進和複雜，它有許多列表出現在網站的瀏覽器中，所以它比示例二有更多的選項。

在示例二中，只有一堆圖像和鏈接以及一些徽標的空間。它只是看起來像頁面的標題，我的意思是它的頂部。 tho的第一個示例看起來像一個內容，可以是標題，也可以是標題後的描述性部分。所以它可以放置在正文部分或標題部分，取決於編碼器想要如何表達它。對不起，這有點令人困惑。

請記住，標題或正文標記中的內容不會特別改變任何內容，它只是將代碼分成若干部分，使其更易於理解。