Чтобы долго не объяснять, что мы сейчас будем делать, посмотрите демо1 и демо2 при очень маленьком размере экрана... Неплохо, неправда ли? Появляется кнопочка, которая делает наше меню выпадающим.
А теперь давайте рассмотрим решение данной задачи.
Было:
<nav class="row"> <ul class="nav nav-pills nav-justified"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Services</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Стало:
<div class="row"> <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="active"><a href="#">Services</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </div>
Рассказывать про каждый класс смысле не вижу, но основную нашу идею все же опишу.
- Сначала мы создаем контейнер <nav>, в который поместим все наше добро и укажем, что это наш navbar и есть и зададим кое-какие стили, чтобы навбар был вверху.
- Затем создаем контейнер с классом .navbar-header, в который мы воткнем кнопку <button>, которая будет появляться, когда будет очень маленькое окно браузера. Так же укажим этой кнопки, какое меню показывать при кликке на ней (data-target="#collapse") и немного стилей.
- И последний этап - создаем контейнер с нашим меню. Обязательно указываем id, чтобы именно это меню показывалось.
- И вот еще, добавьте в css, чтобы кошкам нашим головы не отрубало
body { padding-top: 70px; }
Вот и все, а более подробно про навбар читаем на getbootstrap.com