Navs / Навигация

Navs / Навигация

Доступна в Bootstrap навигация имеет общую разметку, начиная с базового класса.nav, и вплоть до совместных состояний. Осуществляется обмен модификаторами доступа для переключения между каждым стилем.

Заметьте, что класс .nav-tabs требует базового класса .nav.

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Необходимость в JavaScript-плагине

Для переключения между различными вкладками, вам нужно использовать JavaScript-плагин для вкладок.

Возьмите тот же HTML, но используйте .nav-pills вместо .nav-tabs:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Главная</a></li>
  <li><a href="#">Профиль</a></li>
  <li><a href="#">Сообщение</a></li>
</ul>

Навигационные кнопки также доступны в вертикальной сборке. Просто добавьте .nav-stacked.

 

 

 

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

При помощи .nav-justified можно легко создавать вкладки или кнопки, одинаковой ширины с их родительскими элементами, для более широких экранов по 768px. На меньших экранах, навигационные ссылки будут состоять.

WebKit и адаптивные навигационные меню, выровнены по ширине

По состоянию на v7.0.1, Safari проявляется ошибка, в котором при изменение размера окна ваш браузер по горизонтали вызывает ошибки рендеринга нивигации по ширине, которые были удалены при обновлении. Эта ошибка проявляется также в пример justified nav.

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

В любых навигационных компонентов (вкладок, кнопок, списков) можно добавить .disabled для отображения в них серых ссылок и отсутствия эффектов при наведении курсора.

Функциональности ссылки не изменны

Этот класс меняет лишь отражение <a>, но не его функциональность. Для блокировки функциональности ссылки используйте JavaScript.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Заблокированная ссылка</a></li>
  ...
</ul>

Создавайте выпадающее меню с небольшим добавлением HTML и JavaScript плагина для выпадающего меню.

Вкладки с выпадающем меню

<ul class="nav nav-tabs">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Навигационные кнопки с выпадающем меню

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Translate »