如何在bootstrap中使用漢堡按鈕導航選項卡？

我爲我的響應式網站使用引導程序。我有一個標籤式內容，我希望它的導航標籤可以在移動視圖中用漢堡包按鈕摺疊，如this site中的選項卡式圖形標籤。我也附上圖片的更多細節。
這是我的導航，標籤標記代碼：如何在bootstrap中使用漢堡按鈕導航選項卡？

<ul class="nav nav-tabs" id="descriptionTab" role="tablist"> 
    <li class="active" role="presentation"> 
     <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a> 
    </li> 
    <li role="presentation"> 
     <a href="#introduction" role="tab" data-toggle="tab">introduction</a> 
    </li> 
    <li role="presentation"> 
     <a href="#access" role="tab" data-toggle="tab">access</a> 
    </li> 
    <li role="presentation"> 
     <a href="#times" role="tab" data-toggle="tab">times</a> 
    </li> 
    <li role="presentation"> 
     <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a> 
    </li> 
    <li role="presentation"> 
     <a href="#warnings" role="tab" data-toggle="tab">warnings</a> 
    </li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content">     
    <div class="tab-pane fade active in" id="briefDescription"> 
     <h5></h5> 
    </div> 
    <div class="tab-pane fade" id="introduction"> 
     <h5></h5> 
    </div> 
    <div class="tab-pane fade" id="access"> 
     <h5></h5> 
    </div> 
    <div class="tab-pane fade" id="times"> 
     <h5></h5> 
    </div> 
    <div class="tab-pane fade" id="ticketPrices"> 
     <h5></h5> 
    </div> 
    <div class="tab-pane fade" id="warnings"> 
     <h5></h5> 
    </div> 
</div>

我想用這樣的表現爲當屏幕尺寸變得足夠小的切換按鈕一個漢堡包按鈕的這段代碼中，UL必須被倒塌通過點擊按鈕，漢堡：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button>

我想說明這些標籤類似這樣的截圖http://glyphicons.com/網站的移動視圖：

mobile view

來源

2017-02-06 baran.jl

後你試過到目前爲止的代碼 – ZimSystem

謝謝@ZimSystem，我編輯了我的問題，並在上面發佈了我的代碼。 –

最後我找到了解決方案。所以我在這裏寫我的代碼也許有人會需要它。

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#descriptionTab"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="navbar-collapse collapse" id="descriptionTab"> 
    <ul class="nav nav-tabs" role="tablist"> 
     <li class="active" role="presentation"> 
     <a href="#briefDescription" role="tab" data-toggle="tab">brief description</a> 
     </li> 
     <li role="presentation"> 
      <a href="#introduction" role="tab" data-toggle="tab">introduction</a> 
     </li> 
     <li role="presentation"> 
      <a href="#access" role="tab" data-toggle="tab">access</a> 
     </li> 
     <li role="presentation"> 
      <a href="#times" role="tab" data-toggle="tab">times</a> 
     </li> 
     <li role="presentation"> 
      <a href="#ticketPrices" role="tab" data-toggle="tab">ticket prices</a> 
     </li> 
     <li role="presentation"> 
      <a href="#warnings" role="tab" data-toggle="tab">warnings</a> 
     </li> 
    </ul> 
</div>

而且，我需要改變一些CSS規則，例如：

@media screen and (max-width: 769px){ 
    .nav-tabs > li{ 
    display:block; 
    width:100%; 
    } 
}

我希望這會有所幫助:)

來源

2017-02-07 11:31:50

如何在bootstrap中使用漢堡按鈕導航選項卡？

回答

相關問題