Mobil aygıtlar için küçük simgeye daraltmak için gezinmeyi nasıl alabilirim?

Question

Twitter-Bootstrap web sitesine girerseniz ve 1024x768'in altındaki pencere boyutunu küçültürseniz, gezinme, bunun için tıklattığınız bir simgeye dönüşecektir. Bu javascript eklentilerinden biri mi? Aynı şeyi yapmak için web sitemi nasıl alabilirim?

---

DÜZENLEME

Answer 1

navigasyon gerektirir nav-collapse özelliğinin yanı sıra .btn. navigasyon çöken ilgili daha fazla ayrıntı için

<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: Bu bir örnektir.

Sadece başka bir uygulama ile bu yapmaya başlamış ve her şey olduğu zaman bile senin sorunlarınız eğer düzenli sopa önermek böylece minimize dosyaları kullanarak bazı belaya girdi 2012

YAN NOT 3 Ekim, doğru şekilde kurun. İşte benim application.css artık şudur:

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

Answer 2

O JavaScript (Togglable menü kendisi uygulanması için kaydedin) değil, medya sorgu ile CSS var:

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

Answer 3

sadece sayfalarınızı özelleştiriyorsanız zaman hemen işe yaramaz butonuna tıklayarak önyükleme dosyasını indirdiyseniz. En son jQuery dosyasını indirmeli ve size verdikleri genel dosya yolunu kullanarak değiştirmelisiniz. Ayrıca

<!-- 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> 

içine ... böyle

<!-- 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> 

örnek dosyalarını temizlemek Veya sadece tüm çünkü çözülecektir ve tüm sorunları "docs ile indirmek" bağlantısını tıklayabilirsiniz bağlantıların çalışacak

Answer 4

Hmm .. @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>