Бреадцрумб

Означите локацију тренутне странице унутар хијерархије навигације која аутоматски додаје сепараторе преко ЦСС-а.

На овој страници

Пример

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

хтмл

<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>

Разделници

Разделници се аутоматски додају у ЦСС преко ::beforeи content. Могу се променити модификацијом локалног ЦСС прилагођеног својства --bs-breadcrumb-dividerили преко $breadcrumb-dividerСасс променљиве — и $breadcrumb-divider-flippedза њен РТЛ пар, ако је потребно. Подразумевано користимо нашу променљиву Сасс, која је постављена као резервни део прилагођеног својства. На овај начин добијате глобални разделник који можете заменити без поновног компајлирања ЦСС-а у било ком тренутку.

хтмл

<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: quote(">");

Такође је могуће користити уграђену СВГ икону . Примените га преко нашег ЦСС прилагођеног својства или користите променљиву Сасс.

Коришћење уграђеног СВГ-а

Уметање СВГ-а као УРИ-ја података захтева да УРЛ избегне неколико знакова, пре свега <, >и #. Зато се $breadcrumb-dividerпроменљива преноси кроз нашу escape-svg()Сасс функцију . Када користите ЦСС прилагођено својство, потребно је да УРЛ избегнете свој СВГ сами. Прочитајте објашњења Кевина Вебера о ЦодеПен- у за детаљне информације о томе шта да побегнете.

хтмл

<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: '';(празни низови у ЦСС прилагођеним својствима се рачунају као вредност) или да подесите променљиву Сасс на $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"на последњу ставку скупа да бисте назначили да она представља тренутну страницу.

За више информација, погледајте образац АРИА-овог водича за ауторске праксе .

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, бреадцрумбс сада користе локалне ЦСС променљиве .breadcrumbза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$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};

Сасс варијабле

$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;