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

Опубликовано: 02.09.2017

видео Bootstrap - Хлебные крошки

Хлебные крошки - 3 особенности, которые нужно знать. Академия SEO

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



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

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


bootstrap хлебные крошки

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

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

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


Урок 2. Хлебные крошки

<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

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

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

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

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

rss