Работа с меню в Bootstrap

Сейчас мы разберем элементы навигации с помощью 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% своего контейнера.

Посмотреть результат скачать урок

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector