Лебна трошка

Пример

Користете подредена или неподредена листа со поврзани ставки од списокот за да создадете минимално стилизирана презла. Користете ги нашите алатки за да додадете дополнителни стилови по желба.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Разделувачи

Разделувачите автоматски се додаваат во CSS преку ::beforeи content. Тие можат да се променат со менување на локалната сопствена CSS --bs-breadcrumb-dividerили преку $breadcrumb-dividerпроменливата Sass - и $breadcrumb-divider-flippedза нејзиниот RTL пандан, доколку е потребно. Стандардно ја поставуваме нашата Sass променлива, која е поставена како резервна копија на приспособеното својство. На овој начин, добивате глобален делител што можете да го отфрлите без повторно компајлирање CSS во секое време.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

Кога се менувате преку Sass, функцијата quote е потребна за генерирање на наводници околу низа. На пример, користејќи >како делител, можете да го користите ова:

$breadcrumb-divider: quote(">");

Исто така, можно е да се користи вградена икона SVG . Применете го преку нашата сопствена приспособена CSS или користете ја променливата Sass.

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Можете исто така да ја отстраните поставката за делител --bs-breadcrumb-divider: '';(празни низи во сопствените својства на CSS се бројат како вредност) или да ја поставите променливата Sass на $breadcrumb-divider: none;.

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: none;

Пристапност

Бидејќи лебните трошки обезбедуваат навигација, добра идеја е да додадете значајна етикета како што е aria-label="breadcrumb"да се опише типот на навигација обезбедена во <nav>елементот, како и да се примени знак aria-current="page"на последната ставка од сетот за да се покаже дека ја претставува тековната страница.

За повеќе информации, видете го Водичот за практики за авторизација на ARIA шаблон за презла .

CSS

Променливи

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, breadcrumbs сега користат локални CSS променливи .breadcrumbза подобрено прилагодување во реално време. Вредностите за променливите CSS се поставени преку Sass, така што прилагодувањето на Sass сè уште е поддржано.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

Sass променливи

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;