Чтобы долго не объяснять, что мы сейчас будем делать, посмотрите демо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