如何使用bootstrap創建類似自適應選項卡的導航欄？

如何使用bootstrap創建類似響應標籤的導航欄？我的要求是製作應該像自舉導航欄一樣響應的標籤。我曾嘗試這樣的...如何使用bootstrap創建類似自適應選項卡的導航欄？

<nav class="navbar navbar-default"> 
     <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. --> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6"> 
      <span class="sr-only">Toggle</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 

     </div> 

     <div class="navbar-collapse in" id="bs-example-navbar-collapse-6" style="height: auto;"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div> 
    </nav>

誰能幫助....

來源

2015-01-21 Eldho George

這是你的意思是響應標籤？ http://openam.github.io/bootstrap-responsive-tabs/ – 2015-01-21 04:14:57

我的意思是..但已經嘗試過..謝謝你... – 2015-01-21 07:00:19

我發現一個有用的插件，這樣做，你可以try this responsive tabs

的標籤轉換手風琴當它達到一個CSS斷點。您可以使用此插件作爲在桌面，平板電腦和手機上優雅顯示選項卡的解決方案。

來源

2015-01-22 09:41:28 tvshajeer

引導使用媒體查詢根據屏幕寬度來改變頭，所以你需要使用它們，以及。

當寬度大於768px時，將顯示列表項，並且任何下面的項都將導致它們被隱藏。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <header> 
    <div class="navbar-header"> 
     <a class="navbar-brand">Bootstrap</a> 
     <div class="navbar-toggle"></div> 
    </div> 
    <nav class="navbar navbar-default"> 
    <ul> 
     <li>About</li> 
     <li>Services</li> 
     <li>Contact</li> 
     <li>Location</li> 
    </ul> 
    </nav> 
    </header> 
</body> 
</html>

CSS

@media (min-width: 768px) { 
    .navbar li { 
    float: left; 
    list-style-type: none; 
    display: block; 
    padding: 15px 10px; 
    } 
    .navbar-toggle { 
    display: none; 
    } 
    .navbar { 
    display: block !important; 
    } 
} 

.navbar-brand { 
    display: block; 
    float: left; 
    background: #6f5499; 
    padding: 15px; 
} 

.navbar-toggle { 
    position: relative; 
    float: right; 
    background-color: #6f5499; 
    padding: 20px; 
} 
.navbar { 
    display: none; 
}

見this jsbin。

來源

2015-01-21 05:34:29 PartyPanda

試試這個：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#">Bootstrap theme</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav>

下面是如何在引導創建響應菜單爲例jsfiddle。

來源

2015-01-21 05:44:42

如何使用bootstrap創建類似自適應選項卡的導航欄？

回答

相關問題