Давайте разберем создание навигационной цепочки с помощью классов Bootstrap, давайте посмотрим демо. Для этого наша цепочка должна быть просто в теге списков <ul> или <ol>
Давайте теперь добавим специальный класс, чтобы наш список преобразился.
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li class="active">Vaccinations</li> </ol>
Смотрим, что у нас получилось
Вроде неплохо, ну а если мы хотим заменить эти черточки на что-то другое?! Для этого нам нужно, во-первых, переписать класс, отвечающий за это, который можно найти с помощью firebug
.breadcrumb > li + li:before {
content: none;
} А, во-вторых, вставить свои разделители. Давайте сделаем это с помощью глиф иконок
<ol class="breadcrumb"> <li><a href="#">Home</a> <span class="glyphicon glyphicon-circle-arrow-right"></span></li> <li><a href="#">Services</a> <span class="glyphicon glyphicon-circle-arrow-right"></span></li> <li class="active">Vaccinations</li> </ol>
Теперь наши хлебные крошки имеют собственный стиль, который вы можете изменять на свое усмотрение
Посмотреть результат скачать урок