T’anta ch’uñu

Kunan p'anqap maypi kayninta huk puriy jerarquía ukhupi rikuchiy mayqinchus kikinmanta t'aqaqkunata CSS kaqninta yapan.

Kay p'anqapi

Qatina

Huk kamachisqa utaq mana kamachisqa lista llamk'achiy t'inkisqa lista kaqkunawan huk pisi estiloyuq t'antata ruwanapaq. Utilidadesniyku llamk'achiy munasqaykimanhina yapasqa estilokuna yapanaykipaq.

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

Rakiqkuna

Rakiqkuna kikinmanta CSS kaqpi yapasqa kanku ::beforechaymanta content. Paykunaqa huk kiti CSS sapanchasqa kaqninta tikraspa tikrasqa kankuman --bs-breadcrumb-divider, utaq $breadcrumb-dividerSass tikraq kaqnintakama — chaymanta $breadcrumb-divider-flippedRTL kaqninpaq, necesario kaqtin. Sass tikraqniykuman ñawpaqmanta ruwasqayku, mayqinchus sapanchasqa propiedadman huk kutichiy hina churasqa. Kayhina, huk tukuypaq rakiqta tarinki chaymanta mana CSS kaqmanta mayk'aqllapas huñuspa llalliyta atikunki.

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

Sass kaqnintakama tikraspaqa, cita ruwanaqa huk watiqa muyuriqpi citakunata paqarichinanpaqmi mañakun. Ejemplopaq, >rakiq hina llamk'achispa, kayta llamk'achiy atikunki:

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

Huk churasqa SVG siq'itapas llamk'achiyta atikunmi . CSS ruwasqayku kaqnintakama churay, utaq Sass tikraqwan llamk'achiy.

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

Rakiqpa churaynintapas hurquyta atinki --bs-breadcrumb-divider: '';(CSS sapanchasqa kaqninkunapi ch'usaq watiqakuna chani hina yupasqa), icha Sass tikraqta $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;

Accesibilidad nisqa

T'antakuna huk puriyta qun, huk allin yuyay huk significativo etiqueta yapay imaynachus elementopi aria-label="breadcrumb"qusqa puriy laya willaypaq, chaymanta huk huñumanta qhipa kaq elementoman churay kunan p'anqata riqsichin rikuchinanpaq.<nav>aria-current="page"

Aswan willakuypaq, qhaway WAI-ARIA Qillqana Ruwaykuna t'anta mikhuypaq .

Sass

Variables nisqakuna

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