Подробное описание и демонстрация работы «Хлебных крошек» для сайта под номером №5 для библиотеки Bootstrap. Html и CSS код для реализации хлебных крошек на сайте как на изображении.
Демо блока «Хлебные крошки» — стиль 5
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Library</a></li> <li><a href="#">Web</a></li> <li class="active">Data</li> </ol>
.breadcrumb{ display: inline-block; padding: 0 20px 0 0; margin: 0; background: transparent; overflow: hidden; border-radius: 0; position: relative; } .breadcrumb li{ float: left; margin-right: 10px; background: #161054; border-radius: 20px; font-size: 16px; font-weight: bold; color: #fff; text-transform: uppercase; position: relative; transition: all 0.3s ease 0s; } .breadcrumb li:last-child{ padding: 10px 25px; margin-right: 0; background: #f48b07; color: #fff; position: relative; } .breadcrumb li:hover{ background: #f48b07; } .breadcrumb li:before{ display: none; } .breadcrumb li a{ display: block; padding: 10px 25px; font-size: 16px; font-weight: bold; color: #fff; } @media only screen and (max-width: 767px){ .breadcrumb li{ margin-right: 3px; } .breadcrumb li a, .breadcrumb li:last-child{ padding: 10px; } } @media only screen and (max-width: 479px){ .breadcrumb li{ margin-right: 3px; } .breadcrumb li a, .breadcrumb li:last-child{ font-size: 13px; font-weight: normal; padding: 4px 3px; } }