Tsibela kumxholo oyintloko Tsibela kukhangelo lwamaxwebhu
in English

Iqhekeza lesonka

Bonisa indawo yephepha langoku ngaphakathi koluhlu lolawulo lolwandle olongeza ngokuzenzekelayo izahluli ngeCSS.

Umzekelo

Sebenzisa uluhlu olucwangcisiweyo okanye olungacwangciswanga olunezinto zoluhlu oludityanisiweyo ukwenza i-breadcrumb enesitayile esincinci. Sebenzisa izixhobo zethu ukongeza izitayile ezongezelelweyo njengoko ufuna.

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

Abahluli

Izahluli zongezwa ngokuzenzekelayo kwiCSS ::beforenge content. Zingatshintshwa ngokuguqula ipropathi yendawo yeCSS yendawo --bs-breadcrumb-divider, okanye ngokusebenzisa i- $breadcrumb-dividerSass variable - kunye $breadcrumb-divider-flippedne-RTL iqabane layo, ukuba kuyimfuneko. Asigqibekanga kuguquguquko lwethu lwe-Sass, olusetwa njengokubuyela umva kwipropati yesiko. Ngale ndlela, ufumana isahluli sehlabathi onokuthi usikhuphe ngaphandle kokubuyisela i-CSS nangaliphi na ixesha.

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

Xa ulungisa nge-Sass, umsebenzi wocaphulo uyafuneka ukuvelisa ucaphulo malunga nomtya. Umzekelo, usebenzisa >njengesahluli, ungasebenzisa oku:

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

Kuyenzeka kwakhona ukusebenzisa i icon elungisiweyo yeSVG . Yisebenzise ngepropathi yethu yeCSS, okanye usebenzise iSass variable.

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

Unako kwakhona ukususa isicwangciso sesahluli --bs-breadcrumb-divider: '';(iintambo ezingenanto kwiipropati zesiko le-CSS zibala njengexabiso), okanye ukuseta i-Sass variables ukuya $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;

Ukufikeleleka

Kuba i-breadcrumbs ibonelela ngokujonga, luluvo oluhle ukongeza ileyibhile enentsingiselo efana aria-label="breadcrumb"nokuchaza uhlobo lokukhangela olunikezelweyo <nav>kwinto, kunye nokusebenzisa into aria-current="page"yokugqibela yeseti ukubonisa ukuba imele iphepha langoku.

Ngolwazi oluthe kratya, bona i- WAI-ARIA yokuBhalisa ipateni ye-breadcrumb .

Sass

Izinto eziguquguqukayo

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