Broodkrummel

Dui die huidige bladsy se ligging binne 'n navigasiehiërargie aan wat outomaties skeiers byvoeg via CSS.

Op hierdie bladsy

Voorbeeld

Gebruik 'n geordende of ongeordende lys met gekoppelde lysitems om 'n minimale styl broodkrummels te skep. Gebruik ons nutsprogramme om bykomende style by te voeg soos jy wil.

html

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

Verdelers

Verdelers word outomaties bygevoeg in CSS deur ::beforeen content. Hulle kan verander word deur 'n plaaslike CSS-pasgemaakte eiendom te wysig --bs-breadcrumb-divider, of deur die $breadcrumb-dividerSass-veranderlike - en $breadcrumb-divider-flippedvir sy RTL-eweknie, indien nodig. Ons gebruik standaard ons Sass-veranderlike, wat gestel is as 'n terugval na die pasgemaakte eiendom. Op hierdie manier kry jy 'n globale verdeler wat jy kan ignoreer sonder om CSS te eniger tyd te hersaamstel.

html

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

Wanneer jy via Sass wysig, word die aanhalingsfunksie vereis om die aanhalings rondom 'n string te genereer. As u byvoorbeeld >as die verdeler gebruik, kan u dit gebruik:

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

Dit is ook moontlik om 'n ingebedde SVG-ikoon te gebruik . Pas dit toe via ons CSS-pasgemaakte eiendom, of gebruik die Sass-veranderlike.

Gebruik ingebedde SVG

Die invoering van SVG as data-URI vereis om 'n paar karakters te URL ontsnap, veral <, >en #. Dit is hoekom die $breadcrumb-dividerveranderlike deur ons escape-svg()Sass-funksie gestuur word . Wanneer u die CSS-gepasmaakte eiendom gebruik, moet u u SVG op u eie URL ontsnap. Lees Kevin Weber se verduidelikings op CodePen vir gedetailleerde inligting oor wat om te ontsnap.

html

<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>");

Jy kan ook die verdelerinstelling verwyder --bs-breadcrumb-divider: '';(leë stringe in CSS-gepasmaakte eienskappe tel as 'n waarde), of die Sass-veranderlike stel na $breadcrumb-divider: none;.

html

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

Toeganklikheid

Aangesien broodkrummels 'n navigasie verskaf, is dit 'n goeie idee om 'n betekenisvolle etiket by te voeg aria-label="breadcrumb"om die tipe navigasie wat in die <nav>element verskaf word te beskryf, asook om 'n aria-current="page"op die laaste item van die stel toe te pas om aan te dui dat dit die huidige bladsy verteenwoordig.

Vir meer inligting, sien die ARIA Authoring Practices Guide broodkrummelpatroon .

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik broodkrummels nou plaaslike CSS-veranderlikes .breadcrumbvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, dus word Sass-aanpassing ook steeds ondersteun.

  --#{$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 veranderlikes

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