T’anta ch’uñu

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='%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>");

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 ARIA Qillqana Ruwaykunamanta Yanapakuy t'anta miski patrón .

CSS nisqa

Variables nisqakuna

Bootstrap kaqpa wiñachkaq CSS tikraqkuna asuykuyninmanta huknin hina, t'antakuna kunan llaqta CSS tikraqkunata llamk'achinku .breadcrumballinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

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