Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная Инструкции Bootstrap Bootstrap 3 - Навигационные цепочки

Bootstrap 3 - Навигационные цепочки

На этом уроке вы познакомитесь с процессом создания навигационных цепочек ("хлебных крошек") на платформе Twitter Bootstrap 3.

Навигационные цепочки ("хлебные крошки", breadcrumbs) - это схема навигации, которая показывает текущее положение пользователя на сайте. Они применяются для отображения иерархически-организованной информации. Например, в интернет-магазине "хлебные крошки" обычно представляют собой цепочки разделов. С их помощью пользователь может определить в каком разделе он находится сейчас, а также они позволяют перейти на разделы более высоких уровней, т.е. предоставляют ещё одну возможность навигации по структуре сайта.

"Хлебные крошки" в Bootstrap – это обычный упорядоченный список с классом breadcrumbs. Разделитель элементов списка автоматически добавляется с помощью CSS (bootstrap.min.css) через следующий класс:

.breadcrumbs > li + li:before {
color: #cccccc;
content: "/";
padding: 0 5px;
}

 

Пример создания "хлебных крошек" с помощью Twitter Bootstrap.

<ol class="breadcrumb">
  <li class="active">Главная</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li class="active">Процессоры</li>
</ol>

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#" >Процессоры</a></li>
  <li class="active">Intel</li>
</ol>

 

Выше приведенный пример будет выглядеть примерно так:

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">Ноябрь</li>
</ol>