Daabboo

Bakka fuula ammaa sadarkaa qajeelchaa keessaa kan ofumaan adda baastoota karaa CSS dabalu agarsiisi.

Fuula kana irratti

Fakkeenya

Tarree tartiiba qabu ykn hin tartiibamin wantoota tarree walqabsiisan waliin fayyadamii daabboo akkaataa xiqqaa uumuuf. Akka barbaaddetti akkaataa dabalataa itti dabaluuf faayidaa keenya fayyadami.

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>

Qoqqoodduu

Qoodtoonni ofumaan CSS keessatti karaa ::beforefi content. Isaan qabeentaa amala CSS naannoo fooyyessuudhaan jijjiiramuu danda'u --bs-breadcrumb-divider, ykn karaa $breadcrumb-dividerjijjiiramaa Sass — fi $breadcrumb-divider-flippedgita isaa RTL tiif, yoo barbaachise. Jijjiiramaa Sass keenyaatti durtii goona, kunis akka kufaatii gara qabeentaa amalaatti saaga. Haala kanaan, qoqqoodduu addunyaa kan yeroo barbaaddetti CSS irra deebitee osoo hin qindeessin irra darbuu dandeessu argatta.

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>

Yeroo karaa Sass fooyyessitu, faankishiniin caqasaa caqasoota naannoo tarree tokkoo uumuuf barbaachisaadha. Fakkeenyaaf, >akka qoqqoodduutti fayyadamuun, kana fayyadamuu dandeessa:

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

Akkasumas mallattoo SVG uumame fayyadamuun ni danda'ama . Karaa qabeentaa amala CSS keenyaa hojiirra oolchi, ykn jijjiiramaa Sass fayyadami.

SVG uumame fayyadamuu

SVG akka URI deetaa sararuun URL arfiilee muraasa miliquu barbaada, keessattuu <, >fi #. Kanaafidha jijjiiramaan faankishinii Sass$breadcrumb-divider keenyaan kan darbu . Yeroo qabeentaa amala CSS fayyadamtu, URL SVG kee ofii keetiin miliquu qabda. Maal miliquu akka qabdu odeeffannoo bal'aa argachuuf ibsa Kevin Weber CodePen irratti kenne dubbisi .escape-svg()

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

Akkasumas qindaa'ina qoqqoodduu haquu dandeessa --bs-breadcrumb-divider: '';(tarreewwan duwwaa qabeentota amala CSS keessatti akka gatiitti lakkaa'amu), ykn jijjiiramaa Sass gara $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;

Dhaqqabummaa

Daabboon naanna'uu waan kennuuf, asxaa hiika qabu kan akka aria-label="breadcrumb"gosa qajeelcha elementii keessatti kenname ibsuu dabaluu <nav>, akkasumas aria-current="page"fuula ammaa bakka bu'uu isaa agarsiisuuf wanta dhumaa tuuta irratti hojii irra oolchuun gaariidha.

Odeeffannoo dabalataaf, Qajeelfama Shaakala Barreessuu ARIA breadcrumb pattern ilaali .

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, breadcrumbs amma jijjiiramoota CSS naannoo on fayyadama .breadcrumbdhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

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

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