Làm cách nào để điều hướng thu gọn vào biểu tượng nhỏ cho thiết bị di động?

Question

Nếu bạn truy cập trang web Twitter-Bootstrap và giảm kích thước cửa sổ bên dưới 1024x768, điều hướng sẽ thay đổi thành biểu tượng bạn nhấp vào. Đây có phải là một trong các plugin javascript không? Làm cách nào để trang web của tôi làm điều tương tự?

---

EDIT

Answer 1

Các hướng đòi hỏi thuộc tính nav-collapse cùng với số .btn. Đây là ví dụ:

<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 để biết thêm chi tiết về việc thu gọn điều hướng.

SIDE LƯU Ý ngày 03 Tháng 10 2012

Tôi chỉ mới bắt đầu để làm điều này với một ứng dụng khác và chạy vào một số vấn đề khi dùng các tập tin chế độ nền nên tôi đề nghị bạn dính vào thường xuyên nếu bạn có vấn đề ngay cả khi mọi thứ đều thiết lập chính xác. Đây là tôi application.css bây giờ:

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

Answer 2

Nó không phải JavaScript (tiết kiệm cho việc thực hiện các menu togglable chính nó), đó là CSS với các truy vấn phương tiện truyền thông:

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

Answer 3

Nếu bạn chỉ cần tải về các tập tin bootstrap bằng cách nhấn vào nút nó sẽ không làm việc ngay lập tức khi bạn đang tùy biến trang của bạn. Bạn phải tải xuống tệp jQuery mới nhất và thay thế bằng đường dẫn tệp chung mà chúng cung cấp cho bạn. Bạn cũng có thể dọn dẹp các tập tin ví dụ như thế này ...

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

vào

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

Hoặc chỉ cần nhấp vào liên kết "tải với tài liệu" và tất cả các vấn đề của bạn sẽ được giải quyết bởi vì tất cả trong các liên kết sẽ làm việc

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>