бутстрап навигация со складным поиском

Question

Я хочу сделать навигацию со складным окном поиска в бутстрапе, например, wordpress двадцать четырнадцатая тема навигации может мне помочь? Я хочу навигационный что-то вроде этого,

Answer 1

В зависимости от того, сколько из этого Nav вы хотите дублировать, это действительно только некоторые хитрости, чтобы уже существующие самозагрузки Nav. Но так как дублирование коллапса является сложным (для меня все равно), вот способ, используя два входа поиска, показывающий только по одному, в зависимости от устройства. И popover для планшета + поиск.

Here's a Bootply

Поиск по планшету и больше (hidden-xs скрывает эту строку поиска на телефоне):

<a id="example" type="button" class="btn btn-default navbar-btn hidden-xs pull-right btn-link btn-blk" data-toggle="popover" data-placement="bottom" data-html="true" data-content=" 
    <form class='form-inline' role='search'> 
     <div class='form-group'> 
     <input type='email' class='form-control' placeholder='Search'> 
     </div> 
     <button type='submit' class='btn btn-default'>Go!</button> 
    </form>" data-container="body"> 
    <span class="glyphicon glyphicon-search"></span> 
    </a> 

Поиск по телефону только:

<form class="navbar-form navbar-left visible-xs" role="search"> 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Search"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </form> 

Как я уже сказал .. не уверен, насколько вы хотите, чтобы стиль соответствовал вашим снимкам экрана, но это довольно близко :)