ナビゲーションをモバイルデバイス用の小さなアイコンに畳ませるにはどうすればよいですか？

Question

Twitter-Bootstrapウェブサイトにアクセスし、1024x768未満のウィンドウサイズを縮小すると、ナビゲーションがクリックしたアイコンに変わります。これはjavascriptプラグインの1つですか？私のウェブサイトに同じことをさせるにはどうすればいいですか？

---

EDIT

Answer 1

はナビゲーションが必要ですと同様にnav-collapseプロパティもあります。ナビゲーションの崩壊についての詳細は、

<div class="container"> 
    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 

    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse"> 
     <ul class="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>< 

</div> 

http://twitter.github.com/bootstrap/components.html#navbar：これは一例です。

サイドノート2012年10月3日

私は別のアプリケーションでこれを行うために始めたと私はすべてがある場合でも、あなたが問題を抱えている場合、あなたが定期的に固執示唆して最小化したファイルを使用して、いくつかのトラブルに走りました正しく設定してください。ここに私のapplication.css今ある：

/* 
*= require_self 
*= require bootstrap 
*= require bootstrap-responsive 
*= require_tree . 
*/ 
body { 
    padding-top: 60px; # this is for fixed-top navigation 
} 

Answer 2

それにはJavaScript（togglableメニュー自体の実装のために保存）ではありません、それはメディアクエリとCSSです：

http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Answer 3

あなたがちょうどあなたがあなたのページをカスタマイズしているとき、それはすぐに動作しません]ボタンをクリックすることで、ブートストラップファイルをダウンロードした場合。最新のjQueryファイルをダウンロードし、それをあなたが提供する汎用ファイルパスに置き換える必要があります。また

<!-- Le javascript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="../assets/js/jquery.js"></script> 
    <script src="../assets/js/bootstrap-transition.js"></script> 
    <script src="../assets/js/bootstrap-alert.js"></script> 
    <script src="../assets/js/bootstrap-modal.js"></script> 
    <script src="../assets/js/bootstrap-dropdown.js"></script> 
    <script src="../assets/js/bootstrap-scrollspy.js"></script> 
    <script src="../assets/js/bootstrap-tab.js"></script> 
    <script src="../assets/js/bootstrap-tooltip.js"></script> 
    <script src="../assets/js/bootstrap-popover.js"></script> 
    <script src="../assets/js/bootstrap-button.js"></script> 
    <script src="../assets/js/bootstrap-collapse.js"></script> 
    <script src="../assets/js/bootstrap-carousel.js"></script> 
    <script src="../assets/js/bootstrap-typeahead.js"></script> 

に

<!-- Le javascript 
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="../assets/js/jqueryNEW.js"></script> 
<script src="../assets/js/bootstrap.js"></script> 

または単に「ドキュメントをダウンロード」というリンク をクリックして、すべてのため、すべてのあなたの問題が解決されます...このような例のファイルをクリーンアップすることができますリンクで動作します

Answer 4

うーん... @LearningROR

I have nodified your code.. 

<div class="navbar"> 
<div class="navbar-inner"> 
<div class="container"> 
    <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 

    <a class="brand" href="#">Project name</a> 

    <!-- Everything you want hidden at 940px or less, place within here --> 
    <div class="nav-collapse"> 
     <ul class="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> 

</div> 
</div> 
</div>