Здравствуйте дорогие читатели! Сегодня хочу привести пример работы в bootstrap 3, именно пример адаптивного меню для сайта. На данный момент иметь адаптивный дизайн сайт просто необходимо, так как такие поисковики как Яндекс и Гугл стали ранжировать выше те сайты у которых адаптивный дизайн ( корректное отображение вашего сайта в любых разрешениях монитора).

Перед тем как мы приступим к созданию нашего навигационного меню, у вас уже должен быть подключен bootstrap 3, можете ознакомится со статьей как подключить bootstrap.
И так bootstrap у нас подключен, переходим к созданию адаптивного меню. Для начало нам нужно создать навигационное меню с обычными пунктами, а уже после этого будем добавлять пункты с подпунктами и создадим форму поиска на сайте.
<nav role="navigation" class="navbar navbar-default"> <!-- Логотип и мобильное меню --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">SeoBel.ru</a> </div> <!-- Навигационное меню --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Новости</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Войти</a></li> </ul> </div> </nav>
Приведенный пример меню выглядит следующим образом:

Создание форм в навигационном меню Bootstrap
Для корректного отображения элементов форм в меню их помещают внутри тега form и добавляют класс .navbar-form для правильной ориентации по вертикали и сжатия на маленьких разрешениях экрана.
Для выравнивания различных компонентов в меню по левому или правому краю, нужно использовать классы bootstrap 3 .navbar-left или .navbar-right соответственно. Например чтобы выровнять форму поиска просто добавьте соответствующий класс.
Адаптивное меню с формой поиска и выпадающим под меню:
<nav role="navigation" class="navbar navbar-default"> <!-- Логотип и мобильное меню --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">SeoBel.ru</a> </div> <!-- Навигационное меню --> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Главная</a></li> <li><a href="#">Статьи</a></li> <!-- Выподающие меню с подпунктами --> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Новости <b class="caret"></b></a> <ul role="menu" class="dropdown-menu"> <li><a href="#">Меню 1</a></li> <li><a href="#">Меню 2</a></li> <li><a href="#">Меню 3</a></li> <li class="divider"></li> <li><a href="#">Меню 4</a></li> </ul> </li> </ul> <!-- Поиск по сайту --> <form role="search" class="navbar-form navbar-left"> <div class="form-group col-md-12"> <input type="text" placeholder="Найти" class="form-control"> </div> </form> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Войти</a></li> </ul> </div> </nav>
Так будет выглядеть наше адаптивное меню:

Навигационное меню в разных разрешениях монитора:

Ну вот мы и сделали с вами адаптивное меню с помощью bootstrap 3, свои вопросы можете задавать в комментариях, я с радостью на них отвечу.