Сейчас мы разберем элементы навигации с помощью Bootstrap. Давайте взглянем на демо. Как мы видим, у нас есть горизонтальное верхнее меню и вертикальное правое, которые нам нужно привести впорядок.
Для этого в Bootstrap есть классы для работы с навигацией. Давайте рассмотрим сначала верхнее меню
<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 — указывает, что это будет элемент навигации
- nav-pills — делает ввиде кнопок нашу навигацию
- nav-justified — делает на всю ширину контейнера
- nav-tabs — делает дизайн табами. Это мы не указали, но вы можете попробовать вместо nav-pills
А теперь рассмотрим правое боковое
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Vaccinations</a></li>
<li><a href="#">Checkups</a></li>
<li><a href="#">Senior Pets</a></li>
<li><a href="#">Diet Plans</a></li>
</ul> Тут у нас идет отличие только на nav-stacked, который означает, что <li> будет растянут на 100% своего контейнера.