Breadcrumb

Onyesha eneo la ukurasa wa sasa ndani ya daraja la urambazaji ambalo huongeza vitenganishi kiotomatiki kupitia CSS.

Katika ukurasa huu

Mfano

Tumia orodha iliyoagizwa au isiyoagizwa na orodha iliyounganishwa ili kuunda mkate wa mkate ulio na muundo mdogo. Tumia huduma zetu kuongeza mitindo ya ziada unavyotaka.

html

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

Wagawanyaji

Vigawanyiko huongezwa kiotomatiki katika CSS kupitia ::beforena content. Zinaweza kubadilishwa kwa kurekebisha mali maalum ya CSS ya ndani --bs-breadcrumb-divider, au kupitia utofauti wa $breadcrumb-dividerSass — na $breadcrumb-divider-flippedkwa mwenzake wa RTL, ikihitajika. Tunaweka chaguo-msingi kwa utofauti wetu wa Sass, ambao umewekwa kama njia mbadala kwa mali maalum. Kwa njia hii, unapata kigawanyiko cha kimataifa ambacho unaweza kubatilisha bila kurejesha CSS wakati wowote.

html

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

Wakati wa kurekebisha kupitia Sass, kazi ya kunukuu inahitajika ili kutoa nukuu karibu na kamba. Kwa mfano, kwa kutumia >kama kigawanyaji, unaweza kutumia hii:

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

Pia inawezekana kutumia ikoni ya SVG iliyopachikwa . Itumie kupitia mali yetu maalum ya CSS, au tumia utofauti wa Sass.

Kwa kutumia SVG iliyopachikwa

Kuingiza SVG kama URI ya data inahitaji ili URL kuepuka herufi chache, haswa <, >na #. Ndio maana $breadcrumb-dividerutofauti hupitishwa kupitia escape-svg()kazi yetu ya Sass . Unapotumia kipengele maalum cha CSS, unahitaji URL kuepuka SVG yako peke yako. Soma maelezo ya Kevin Weber kwenye CodePen kwa maelezo ya kina kuhusu mambo ya kuepuka.

html

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

Unaweza pia kuondoa mpangilio wa kigawanyaji --bs-breadcrumb-divider: '';(kamba tupu katika hesabu za sifa maalum za CSS kama thamani), au kuweka kigezo cha Sass kuwa $breadcrumb-divider: none;.

html

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

Ufikivu

Kwa kuwa breadcrumbs hutoa urambazaji, ni vyema kuongeza lebo yenye maana kama vile aria-label="breadcrumb"kuelezea aina ya urambazaji iliyotolewa katika <nav>kipengele, pamoja na kutumia aria-current="page"kipengee cha mwisho cha seti ili kuonyesha kuwa inawakilisha ukurasa wa sasa.

Kwa maelezo zaidi, angalia Mwongozo wa Mazoezi ya Uandishi wa ARIA .

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigezo vya CSS ya Bootstrap, mikate ya mkate sasa hutumia viwezo vya kawaida vya CSS .breadcrumbili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

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

Vigezo vya 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;