0

我想開始學習網站。我只有在本機的PHP和CSS的經驗。我沒有框架(bootstrap)的經驗。現在,我開始瞭解框架,因爲我知道這很重要。如何在Bootstrap3中製作3行NavBar

所以我想用佈局製作一個網站bootstrap。我需要製作一個固定頂部的導航欄。但我有3行作爲我的導航欄。

我有搜索和嘗試結合This First One,This Second One,This Third One,還有更多。

我花了差不多3天的時間來合併它。但沒有得到我想要的。沮喪的T_T。

任何人都可以請幫助我開發3行固定導航欄(在簡單的代碼中,作爲一個初學者,我可以理解並做改進)。 問題始終關乎我的標誌圖像。

這裏是我想要的樣子:

Here is the look which I want to make

我任何並欣賞幫助。謝謝。

+0

當點擊漢堡菜單上,前兩個欄應崩潰嗎?或所有這些?您可以與我們分享您的當前代碼嗎? –

回答

1

這樣的事情?演示:http://www.bootply.com/lp3BUeCXzf 這其中有摺疊圖標三個菜單上一級菜單

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 
<div class="divide-nav"> 
    <div class="container"> 
    <p class="divide-text">Some Text Here</p> 
    </div> 
</div> 
<nav class="navbar navbar-default navbar-lower" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2"> 
     <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 collapse-buttons" id="bs-example-navbar-collapse-2"> 
     <form class="navbar-form navbar-left" role="search"> 
     <button class="btn btn-success">Button</button> 
     <button class="btn btn-default">Button</button> 
     <button class="btn btn-default">Button</button> 
     <button class="btn btn-default">Button</button> 
     </form> 
    </div> 
    </div> 
</nav> 
<div class="container"> 
    <div class="row"> 
    <div class="filler"></div> 
    </div> 
</div>