Umugati

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 yose igabanije ushobora kurenga utabanje 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 igishushanyo cya SVG cyashyizwemo . 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='%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>");

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 ARIA Yandika Imyitozo Yayobora imigati yimigati .

CSS

Ibihinduka

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, imigati noneho ikoresha CSS yaho ihinduka .breadcrumbkugirango yongere igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

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

Ibihinduka bya Sass

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