Html導航欄與移動支持和標誌

Question

我想在我的網站上的導航欄，但不能弄明白我希望它看起來像 this 但我想有一個標誌，以便這是我有問題。它應該看起來像下面這個site

Answer 1

轉到https://getbootstrap.com/getting-started/，你可以學習使用引導來輕鬆創建諸如navbars之類的東西。

把它放在head部分的html腳本的頂部，用於引導工作或下載bootstrap並將其放置在項目文件夾中。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

這是一個使用bootstrap的例子。

 <!--appear when room to display is smaller--> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Your Logo</a> 
     </div> 


     <div class="collapse navbar-collapse" id="top"> 
     <ul class="nav navbar-nav"> 
      <li class="active"> 
      <a href ="put your link here"> 
       Item 
      </a> 
      </li> 

    <!--align content to the right--> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="active"> 
      <a href =""> 
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; 
      Item 
      </a> 
     </li> 
     <li class="active"> 
      <a href =""> 
      <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; 
      Item 
      </a> 
     </li> 
     </ul> 
     </div> 
    </div> 
    </nav>