Drobtina

Primer

Uporabite urejen ali neurejen seznam s povezanimi elementi seznama, da ustvarite minimalistično oblikovano pot. Uporabite naše pripomočke za dodajanje dodatnih slogov po želji.

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

Razdelilniki

Razdelilniki so samodejno dodani v CSS prek ::beforein content. Lahko jih spremenite tako, da spremenite lokalno lastnost CSS po meri --bs-breadcrumb-dividerali prek $breadcrumb-dividerspremenljivke Sass — in $breadcrumb-divider-flippedza njen dvojnik RTL, če je potrebno. Privzeto uporabljamo spremenljivko Sass, ki je nastavljena kot nadomestna lastnost po meri. Na ta način dobite globalni delilnik, ki ga lahko kadar koli preglasite brez ponovnega prevajanja 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>

Pri spreminjanju prek Sass je potrebna funkcija narekovajev za ustvarjanje narekovajev okoli niza. Na primer, če uporabite >kot delilnik, lahko uporabite to:

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

Možna je tudi uporaba vdelane ikone SVG . Uporabite ga prek naše lastnosti CSS po meri ali uporabite spremenljivko 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>");

Prav tako lahko odstranite nastavitev delilnika --bs-breadcrumb-divider: '';(prazni nizi v lastnostih po meri CSS štejejo kot vrednost) ali nastavite spremenljivko 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;

Dostopnost

Ker drobtinice zagotavljajo navigacijo, je dobro dodati smiselno oznako, kot aria-label="breadcrumb"je opis vrste navigacije, ki je na voljo v <nav>elementu, in uporabiti aria-current="page"za zadnji element nabora, ki označuje, da predstavlja trenutno stran.

Za več informacij si oglejte ARIA Authoring Practices Guide vzorec poti .

CSS

Spremenljivke

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS, drobtinice zdaj uporabljajo lokalne spremenljivke CSS .breadcrumbza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje 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 spremenljivke

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