Umugati

Erekana urupapuro rwubu aho ruherereye murwego rwo kugendana uhita wongera abatandukanya ukoresheje CSS.

Kuriyi page

Urugero

Koresha urutonde rwateganijwe cyangwa rudafite gahunda hamwe nurutonde rwibintu kugirango ukore umutsima muto. Koresha ibikorwa byacu kugirango wongere ubundi buryo nkuko ubyifuza.

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

Abatandukanya

Abatandukanya bahita bongerwaho muri CSS binyuze ::beforena content. Bashobora guhinduka muguhindura imitungo yihariye ya CSS --bs-breadcrumb-divider, cyangwa binyuze muri $breadcrumb-dividerSass ihinduka - no $breadcrumb-divider-flippedkuri mugenzi wayo wa RTL, nibiba ngombwa. Mburabuzi kuri Sass ihinduka, yashizweho nkigaruka kumitungo yihariye. Ubu buryo, urabona isi igabanya ibice ushobora kurenga utarinze gusubiramo CSS umwanya uwariwo wose.

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

Iyo uhinduye ukoresheje Sass, imikorere ya cote irasabwa kubyara imirongo ikikije umugozi. Kurugero, ukoresheje >nkigabana, urashobora gukoresha ibi:

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

Birashoboka kandi gukoresha ishusho ya SVG yashyizwemo . Koresha ukoresheje umutungo wihariye wa CSS, cyangwa ukoreshe impinduka ya 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='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");

Urashobora kandi kuvanaho igabana --bs-breadcrumb-divider: '';(imirongo yubusa muri CSS yihariye yibara nkigiciro), cyangwa gushiraho Sass ihinduka kuri $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;

Kuboneka

Kubera ko imigati itanga kugendagenda, nibyiza ko wongeraho ikirango gifatika nko aria-label="breadcrumb"gusobanura ubwoko bwubwikorezi butangwa <nav>mubintu, kimwe no gukoresha ikintu aria-current="page"cyanyuma cyashizweho kugirango werekane ko gihagarariye page iriho.

Kubindi bisobanuro, reba imyitozo ya WAI-ARIA yo kwandikisha imigati .

Sass

Ibihinduka

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