Bootstrap список Отзывчивые превратятся в мобильное меню

Question

Я хочу, чтобы иметь возможность превратить простой неупорядоченный список в хорошее меню, когда на мобильном телефоне:

 <ul class="jumpToList list-inline"> 
      <li><a href="#buttons">Buttons</a></li> 
      <li><a href="#select">Select</a></li> 
      <li><a href="#input">Input</a></li> 
      <li><a href="#checkradio">Checkboxes &amp; Radios</a></li> 
      <li><a href="#switches">Switches</a></li> 
     </ul> 

Так что, когда я на мобильном телефоне выше получает превращены в простое меню с 3 барами, а затем сбрасывает ссылки.

Как и в случае с навигационным меню Bootstrap, но это не противоречит этому.

Я идеально хочу использовать встроенный в материал с Bootstrap для этого, хороший пример того, что я после:

http://ux.mailchimp.com/patterns/forms

Если сжать браузер вы увидите, что список поворот в меню на мобильный.

Благодаря

Answer 1

Некоторые простые модификации в вашем HTML, media-queries и Javascript должен позволить вам повторить это поведение.

Я предлагаю вам начать с создания медиа-запроса, чтобы изменить применяемые стили на основе ширины устройства.

CSS - Mobile первый

.list-inline { 
    display: none; 
    visibility: hidden; 
} 

.list-inline-active { 
    display: block; 
    visibility: visible; 
} 

.list-inline li { 
    display: block; 
} 

@media (min-width: 600px) { 
    .list-toggle { 
    display: none; 
    } 

    .list-inline { 
    display: block; 
    visibility: visible; 
    }  

    .list-inline li { 
    display: inline-block; 
    } 
} 

HTML - Добавить кнопку переключения/значок

<button class="list-toggle">Show list</button> 

Javascript/JQuery

$('.list-toggle').click(function(){ 
    $('.list-inline').toggleClass('list-inline-active'); 
}); 

Этот метод просто использует кнопку для переключения класса на элемент неупорядоченного списка. Класс toggled содержит стили, чтобы сделать список видимым на мобильном устройстве.

Я создал простой JSFiddle example, чтобы показать это в действии.

Стоит отметить, что это поведение почти полностью воспроизводимо без использования Javascript вообще. Это будет связано с использованием флажков и псевдоселектора «: checked». Однако Bootstrap 3 использует Javascript.

Надеюсь, это поможет.