無導航欄元素的引導程序導航切換

Question

是否可以在不使用默認導航的所有標記的情況下創建切換按鈕？

我只是想創建具有摺疊功能的簡單菜單。例如：

<div class="navigation"> 
    <ul id="nav-to-collapse"> 
     <li><a href=""></a></li> 
     <li><a href=""></a></li> 
     <li><a href=""></a></li> 
    </ul> 

    <a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse"> 
</div> 

會這樣嗎？它是我第一次使用Bootstrap（3），它非常混亂。我不想使用所有的導航欄類，因爲那樣我就不得不覆蓋所有的導航欄樣式來創建我想要的簡單菜單。

編輯：我設法創建切換沒有所有無用的導航欄類，但有一個切換動畫的問題，當導航高度改變。這裏是一個jsfiddle來解決這個問題：Jsfiddle demo

Answer 1

通過在nav元素上使用min-height而不是height來修復崩潰動畫問題。這裏是一個小提琴：http://jsfiddle.net/cfcZY/2/

nav { min-height: 100px; } 

Answer 2

Bootstrap的切換功能是一個JavaScript函數，當用戶點擊具有data-toggle =「collapse」屬性的元素時觸發。如果沒有指定data-target =「」id，則用戶點擊的元素將摺疊。然而，在這個標記位：

<a href="#" class="toggle" data-toggle="collapse" data-target="#nav-to-collapse"> 

data-target =「」屬性設置爲＃導航到摺疊的ID。因此，Bootstrap的崩潰插件將尋找id =「nav-to-collapse」，並在該id上觸發其功能。

所以在這個標記：

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="collapse navbar-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> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

的數據目標被設置爲分類.navbar崩潰的，這將使該元素崩潰之下的一切。