Breadcrumbs в Bootstrap

Давайте разберем создание навигационной цепочки с помощью классов 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>

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

Посмотреть результат скачать урок

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Scroll Up
Adblock detector