Хлебные крошки

Bootstrap предлагает класс .breadcrumb, который оформляет список в виде хлебных крошек. Чтобы получить эффект «хлебных крошек» Bootstrap добавляет разделители (через ::before и content), а также display: inline-block к элементу li.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Главная</a></li> <li class="breadcrumb-item"><a href="#">Фрукты</a></li> <li class="breadcrumb-item active">Груши</li> </ul>

Создание хлебных крошек

Для создания:

  • добавьте class="breadcrumb" к элементу <ul> для отображения хлебных крошек;
  • добавьте класс .breadcrumb-item к каждому элементу <li> внутри класса .breadcrumb;
  • также добавьте к <li> класс .active, который представляет текущую страницу или раздел (страницу, на которой пользователь находится в данный момент) — почти всегда это будет последней крошкой в списке.

Хлебные крошки без списка

Для хлебных крошек не обязательно требуется список, при необходимости вы можете использовать их следующим образом.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="breadcrumb"> <a class="breadcrumb-item" href="#">Главная</a> <a class="breadcrumb-item" href="#">Фрукты</a> <span class="breadcrumb-item active">Груши</span> </div>

Bootstrap 4 против Bootstrap 3

Bootstrap 3 требует только класс .breadcrumb для элемента <ul>. Bootstrap 4 кроме этого требует, чтобы .breadcrumb-item применялся к каждому пункту хлебных крошек.

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты