Как я могу открыть раскрывающееся меню мобильного устройства из Bootstrap?

Question

Если вы перейдете на основной сайт бутстрапа на своем телефоне, вы увидите слайд-меню в правом верхнем углу.

Это часть навигационной панели.

Где я могу найти это выпадающее меню? Это не на главном сайте.

Answer 1

Это Отзывчивый Navbar - вариант, который отображается на мобильных телефонах. Для того, чтобы найти и увидеть его использование, прочитать комментарий Карло или идти здесь:

http://getbootstrap.com/components/#navbar-default

Answer 2

Я считаю, что это результат отзывчивым CSS bootstrap-responsive.css

Это показывает, отличается от мобильной связи с обнаружением ширины устройства.

Answer 3

Смотрите этот пример: http://twitter.github.com/bootstrap/examples/fluid.html

запомнить добавить:

<script src="../assets/js/bootstrap-dropdown.js"></script> 

И в CSS:

<link href="../assets/css/bootstrap.css" rel="stylesheet"> 
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 

Это пример кода:

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <p class="navbar-text pull-right"> 
       Logged in as <a href="#" class="navbar-link">Username</a> 
      </p> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

Answer 4

Если вы хотите, чтобы загрузить специфически реагирующий компонент NavBar, вы можете сделать это творится в Customize BootStrap, а затем выберите Navbar , навигаторы, вкладки и пилюли, а затем в чувствительном разделе. Вы можете выбрать ответную навигационную опцию и другие мультимедийные компоненты в соответствии с вашим требованием. Также вы найдете раздел «Выбор jquery-плагинов», в котором вам нужно будет загрузить следующие плагины, чтобы сделать работу в навигационном режиме, как предполагалось: - Affix, Dropdowns, collapse

Answer 5

Я знаю, что это уже давно, но я обнаружил, что работаю через те же проблемы и хотите предоставить пример barebone для всех, кто его найдет. Однако он основан на Bootstrap 3.

<nav class="navbar container" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav_container" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> <!-- this are literally the "burger lines" and can be styled --> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div>  

    <!-- Note the ID here is the data-target of the button!! Critically important--> 
    <div id="main_nav_container" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li>your menu item here</li> 
     </ul> 
    </div> 
</nav>