Руководство Bootstrap Breadcrumb

View more Tutorials:

Pуководства Bootstrap

Breadcrumb
Breadcrumb Separator

Следуйте за нами на нашей фан-странице, чтобы получать уведомления каждый раз, когда появляются новые статьи.

Facebook

1- Breadcrumb

Breadcrumb это навигационное меню (navigation menu) расположенное по-горизонтали, помогает пользователю представить расположение настоящей страницы, на которую они заходят. Breadcrumb обычно используется в вебсайтах с большим количеством страниц, и имеет иерархию содержания, например такие вебсайты как справочник, поисковик,...

Ниже является изображение вебсайта, использующего Breadcrumb:

Example:

first-breadcrumb-example.html


<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Breadcrumb</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4>Bootstrap Breadcrumb</h4>

         <ul class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Tutorials</li>
         </ul>

         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item active" aria-current="page">Frontend</li>
         </ul>

         <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
            <li class="breadcrumb-item"><a href="#">Frontend</a></li>
            <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
         </ul>

      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

HTML5 представил систему тегов и атрибутов поддерживающих такие устройства как Screen Reader (Скринридер для незрячих). И Bootstrap рекомендует вам использовать его для соответствия со стандартами современного вебсайта.

Тег <nav> это один из тегов поддерживающих такие устройства как Screen Reader, когда эти устройства находят тег <nav>, они понимают что это зона навигации (navigation area). Вы можете использовате другие теги как <div>, <span> вместо <nav>, но нужен еще атрибут role="navigation".

Это простой код, чтобы вы создали Breadcrumb, Примечание: данный код не подходит таким устройствам, как Screen Reader:


<ul class="breadcrumb">
   <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
   <li class="breadcrumb-item"><a href="#">Frontend</a></li>
   <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ul>

И это код создания Breadcrumb и подходящий таким устройствам, как Screen Reader:


<!-- nav -->

<nav aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</nav>

<!-- div -->
<div role= "navigation" aria-label="breadcrumb">
   <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Tutorials</a></li>
      <li class="breadcrumb-item"><a href="#">Frontend</a></li>
      <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
   </ul>
</div>

2- Breadcrumb Separator

По-умолчанию Bootstrap использует знак / для отделения breadcrumb-item. И вы можете заменить его чем-то другим.


.breadcrumb-item + .breadcrumb-item::before         {
   font-family: 'fontAwesome';
   content: "\f101" !important;
}

Испоьзуйте "Base64 SVG Icon":


.breadcrumb-item + .breadcrumb-item::before {
   content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) !important;
}

Используйте Image Icon:


.breadcrumb-item + .breadcrumb-item::before         {
    content: url(../images/right-arrow-16.png) !important;
}

View more Tutorials:

Pуководства Bootstrap