T’anta ch’uñu
Kunan p'anqap maypi kayninta huk puriy jerarquía ukhupi rikuchiy mayqinchus kikinmanta t'aqaqkunata CSS kaqninta yapan.
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 ::before
chaymanta content
. Paykunaqa huk kiti CSS sapanchasqa kaqninta tikraspa tikrasqa kankuman --bs-breadcrumb-divider
, utaq $breadcrumb-divider
Sass tikraq kaqnintakama — chaymanta $breadcrumb-divider-flipped
RTL 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("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");" 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;