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

Разметка навигационных цепочек

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

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

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

Пример создания "хлебных крошек" с помощью 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>
Оформление навигационных цепочек в Bootstrap
Оформление навигационных цепочек в Bootstrap

Ещё один пример:

<ol class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">Ноябрь</li>
</ol>
Хлебные крошки для навигации по архивной информации
Хлебные крошки для навигации по архивной информации

Не стандартный вариант оформления хлебных крошек

Рассмотрим пример создания следующего варианта оформления хлебных крошек:

Пример оформления хлебных крошек на сайте
Вариант оформления хлебных крошек на сайте

Но перед тем как переходить к их разработке, желательно убрать из Bootstrap стандартные стили компонента Breadcrumbs. Это действие позволит уменьшить размер CSS файла Bootstrap. Процесс настройки Boostrap подробно описывается в статье «Как создать сборку с нужными стилями и компонентами».

Процесс создания хлебных крошек складывается из разработки HTML структуры и стилей (CSS).

CSS хлебных крошек:

/* хлебные крошки */
#breadcrumb {
  list-style: none;
  display: inline-block;
  padding-left: 0px;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #fff;
  display: block;
  background: #cc2eaa;
  text-decoration: none;
  position: relative;
  height: 34px;
  line-height: 34px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #cc2eaa;
  border-width: 17px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #cc2eaa;
}
#breadcrumb li a:hover {
  background-color: #a22587;
}
#breadcrumb li a:hover:before {
  border-color: #a22587;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #a22587;
}
#breadcrumb li a:active {
  background-color: #a22587;
}
#breadcrumb li a:active:before {
  border-color: #a22587;
  border-left-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #a22587;
}
#breadcrumb li.current a {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

Изменения цвета производится посредством редактирования значений соответствующих CSS свойств.

HTML разметка:

<ol id="breadcrumb">
  <li>
    <a href="#"><i class="glyphicon glyphicon-home"></i>
    <span class="sr-only">Главная</span></a>
  </li>
  <li>
    <a href="#">Комплектующие</a>
  </li>
  <li>
    <a href="#">Процессы</a>
  </li>
  <li class="current">
    <a href="#">Intel</a>
  </li> 
</ol>

Веделение текущего элемента (если он будет использоваться в цепочке) осуществляется с помощью добавления к элементу li класса current.