Всем привет. Вот нашел довольно интересный вариант оформления breadcrumbs "хлебных крошек" на bootstrap . Смотрятся довольно интересно, и настроить под свой дизайн будет легко, кода минимум.
И так приступим .У нас должны быть подключены стили bootstrap и шрифтовые иконки font-awesome как показанно ниже, подключить можно и из других хранилищ или с вашего сайта:
Код:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
Код:
.breadcrumb li a:hover{
text-decoration: none;
}
.breadcrumb{
padding: 15px 15px 15px 50px;
margin: 0;
background: #12abb3;
border-radius: 5px;
overflow: hidden;
}
.breadcrumb li{
float: left;
position: relative;
}
.breadcrumb li:first-child{
width: 70px;
height: 70px;
border-radius: 50%;
background: #12abb3;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
top: -10px;
left: -10px;
z-index: 1;
transition: all 0.1s ease 0s;
}
.breadcrumb li:hover:first-child{ transform: scale(1.1); }
.breadcrumb li:first-child a{
font-size: 30px;
line-height: 70px;
}
.breadcrumb > li:first-child + li:before{ display: none; }
.breadcrumb li.active,
.breadcrumb li a{
font-size: 14px;
color: #fff;
}Код:
<ol class="breadcrumb" itemscope itemtуpe="http://schema.org/BreadcrumbList">
{% for loc in location %}
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ loc.url }}" ><span class="text-el" itemprop="name">{{ loc.title }}</span></a>
<meta itemprop="position" content="1" />
<span class="divider">/</span>
</li>
{% endfor %}
{% if (location_last) %}
<li class="active" itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="{{ news.url.full }}">
<span class="text-el" itemprop="name">{{ location_last }}</span></a>
<meta itemprop="position" content="2" />
</li>
{% endif %}
</ol>
Можешь почитать и вот эту статейку " Лайтбокс эффект для Bootstrap"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
