Подробное описание и демонстрация работы блока «Хлебные крошки» для сайта под номером №8 для библиотеки Bootstrap. Html и CSS код для реализации блока Breadcrumb на сайте как на изображении.
Демо блока «Хлебные крошки» — стиль 8
.breadcrumb{ display: inline-block; padding: 0; margin: 0; background: transparent; overflow: hidden; } .breadcrumb li{ float: left; margin-right: 5px; border: 2px solid #e66120; border-radius: 10px; background: #e66120; font-size: 14px; font-weight: bold; color: #fff; position: relative; } .breadcrumb li:last-child{ padding: 10px 15px; background: #fff; margin-right: 0; color: #e66120; } .breadcrumb li:before{ content: "" !important; width: 20px; height: 20px; border-radius: 4px; background: #e66120; position: absolute; top: 50%; right: -13px; z-index: 1; transform: translateY(-50%); } .breadcrumb li:last-child:before{ display: none; } .breadcrumb li:after{ content: ""; display: block; width: 18px; height: 30px; border-radius: 7px; background: #fff; position: absolute; top: 50%; left: -5px; transform: translateY(-50%); } .breadcrumb li:first-child:after{ display: none; } .breadcrumb li a{ display: block; padding: 10px 15px 10px 25px; font-size: 14px; font-weight: bold; color: #fff; } .breadcrumb li:first-child a{ padding: 10px 15px; } .breadcrumb li a:hover{ text-decoration: none; } @media only screen and (max-width: 479px){ .breadcrumb li a{ padding: 7px 7px 7px 11px; font-size: 12px; } .breadcrumb li:last-child, .breadcrumb li:first-child a{ padding: 7px; font-size: 12px; } .breadcrumb li:before{ width: 15px; height: 18px; right: -12px; } .breadcrumb li:after{ width: 13px; height: 22px; left: -7px; } }
<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>