Strouhanka

Příklad

Použijte uspořádaný nebo neuspořádaný seznam s propojenými položkami seznamu k vytvoření minimálně stylizované strouhanky. Použijte naše nástroje k přidání dalších stylů podle potřeby.

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

Děliče

Oddělovače se do CSS přidávají automaticky prostřednictvím ::beforea content. Lze je změnit úpravou místní vlastní vlastnosti CSS --bs-breadcrumb-dividernebo prostřednictvím $breadcrumb-dividerproměnné Sass – a $breadcrumb-divider-flippedv případě potřeby pro její protějšek RTL. Výchozí proměnnou Sass, která je nastavena jako záložní pro vlastní vlastnost. Tímto způsobem získáte globální oddělovač, který můžete přepsat, aniž byste museli kdykoli znovu kompilovat 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>

Při úpravách přes Sass je vyžadována funkce uvozovek pro generování uvozovek kolem řetězce. Například při použití >jako oddělovač můžete použít toto:

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

Je také možné použít vnořenou ikonu SVG . Použijte jej prostřednictvím naší vlastní vlastnosti CSS nebo použijte proměnnou 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>");

Můžete také odstranit nastavení oddělovače --bs-breadcrumb-divider: '';(prázdné řetězce ve vlastních vlastnostech CSS se počítají jako hodnota) nebo nastavit proměnnou Sass na $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;

Přístupnost

Vzhledem k tomu, že navigaci poskytují drobky, je vhodné přidat smysluplný štítek, aria-label="breadcrumb"který popisuje typ navigace v <nav>prvku, a také použít aria-current="page"na poslední položku sady a označit, že představuje aktuální stránku.

Další informace najdete v průvodci postupy vytváření ARIA vzor drobečkové navigace .

CSS

Proměnné

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS, drobečková navigace nyní používá místní proměnné CSS .breadcrumbpro lepší přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$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 proměnné

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