Panpeceto

Indiku la lokon de la nuna paĝo ene de navigacia hierarkio, kiu aŭtomate aldonas apartigilojn per CSS.

Sur ĉi tiu paĝo

Ekzemplo

Uzu ordigitan aŭ neordigitan liston kun ligitaj listeroj por krei minimume stilitan pano. Uzu niajn ilojn por aldoni pliajn stilojn laŭdezire.

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>

Dividiloj

Disigiloj estas aŭtomate aldonitaj en CSS per ::beforekaj content. Ili povas esti ŝanĝitaj modifante lokan CSS kutiman posedaĵon --bs-breadcrumb-divider, aŭ per la $breadcrumb-dividerSass-variablo - kaj $breadcrumb-divider-flippedpor ĝia RTL-ekvivalento, se necese. Ni defaŭlte al nia Sass-variablo, kiu estas agordita kiel rezerva al la kutima posedaĵo. Tiel, vi ricevas tutmondan disigilon, kiun vi povas superregi sen rekompili CSS iam ajn.

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>

Kiam vi modifas per Sass, la citaĵofunkcio estas postulata por generi la citaĵojn ĉirkaŭ ĉeno. Ekzemple, uzante >kiel la disigilon, vi povas uzi ĉi tion:

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

Ankaŭ eblas uzi enigitan SVG-ikonon . Apliku ĝin per nia propra propraĵo CSS, aŭ uzu la variablon Sass.

Uzante enigitan SVG

Enlini SVG kiel datuma URI postulas, ke URL eskapas kelkajn signojn, precipe <, >kaj #. Tial la $breadcrumb-dividervariablo estas trapasita tra nia escape-svg()Sass-funkcio . Kiam vi uzas la kutiman posedaĵon de CSS, vi bezonas URL eskapi de via SVG memstare. Legu la klarigojn de Kevin Weber pri CodePen por detalaj informoj pri kio eskapi.

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

Vi ankaŭ povas forigi la disigilon --bs-breadcrumb-divider: '';(malplenaj ŝnuroj en CSS kutimaj propraĵoj kalkulas kiel valoro), aŭ agordi la Sass-variablon al $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;

Alirebleco

Ĉar panpecetoj provizas navigadon, estas bona ideo aldoni signifan etikedon kiel aria-label="breadcrumb"priskribi la specon de navigado provizita en la <nav>elemento, kaj ankaŭ apliki aria-current="page"al la lasta elemento de la aro por indiki ke ĝi reprezentas la nunan paĝon.

Por pliaj informoj, vidu la Gvidilon pri Praktikoj pri Aŭtorado de ARIA .

CSS

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, panpecetoj nun uzas lokajn CSS .breadcrumb-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

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