Buruburuba

A’ ye ɲɛ min bɛ yen sisan, o yɔrɔ jira navigatiɔn-yɔrɔ dɔ kɔnɔ min bɛ danfaralanw fara a yɛrɛma CSS fɛ.

Nin ɲɛ in kan

Misaliya

Baara kɛ ni lisi ye min labɛnna walima min ma labɛn ni lisi fɛnw ye minnu bɛ ɲɔgɔn kan walasa ka buruburu dɔ dilan min cogoya ka dɔgɔn. Baara kɛ ni an ka nafamafɛnw ye walasa ka cogoya wɛrɛw fara a kan i n’a fɔ i b’a fɛ cogo min na.

html ye

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

Tila-tilabagaw

Tilayɔrɔw bɛ fara u yɛrɛma CSS kan ::beforeni ani content. U bɛ se ka Changé ni sigida CSS ladamu nafolo dɔ ladilanni ye --bs-breadcrumb-divider, walima $breadcrumb-dividerSass fɛn caman sɛgɛsɛgɛli fɛ — ani $breadcrumb-divider-flippeda RTL ɲɔgɔndan kama, ni mago bɛ a la. An bɛ default (dafalen) Kɛ an ka Sass variable (dafalen) ye, o min bɛ Sìgi i n’a fɔ fallback (fɔli) ka Kɛ custom property (laada-yɔrɔ) ye. O cogo la, i bɛ diɲɛ tilayɔrɔ sɔrɔ min bɛ se ka wuli ka bɔ a nɔ na k’a sɔrɔ i ma CSS lajɛ kokura waati o waati.

html ye

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

Ni bεε bε bεn Sass fɛ, quotation (daɲɛw) baarakɛcogo de wajibiyalen don ka quotes (daɲɛw) Labɔ sɛrɛ dɔ lamini na. Misali la, baara kɛli >i n’a fɔ tilayɔrɔba, i bɛ se ka baara kɛ ni nin ye:

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

A fana bɛ se ka baara kɛ ni SVG taamasiyɛn ye min bɛ don a kɔnɔ . Aw bɛ a waleya an ka CSS custom property fɛ, walima ka baara kɛ ni Sass variable ye.

Baara kɛ ni SVG min bɛ don a kɔnɔ

SVG inlining i n’a fɔ data URI bɛ ɲini ka URL boli taamasiyɛn damadɔw la, kɛrɛnkɛrɛnnenya la <, >ani #. O de y'a To $breadcrumb-dividerfɛn caman bɛ Tɛmɛ an ka escape-svg()Sass baarakɛcogo fɛ . Ni i bɛ baara kɛ ni CSS ladamu nafolo ye, i ka kan ka URL boli i ka SVG kan i yɛrɛ ma. Kevin Weber ka ɲɛfɔliw kalan CodePen kan walasa ka kunnafoni caman sɔrɔ i ka kan ka boli min kan.

html ye

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

Aw bɛ se fana ka tilayɔrɔba sigicogo bɔ --bs-breadcrumb-divider: '';(sɛbɛn lankolonw CSS ladamucogo la, olu jate bɛ kɛ nafa ye), walima ka Sass sɛgɛsɛgɛli kɛ $breadcrumb-divider: none;.

html ye

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

Seko ni dɔnko

Komin buruburuw bɛ navigatiɔn Di, a ka ɲi ka taamasiyɛn kɔrɔ dɔ Fàra a kan i n’a fɔ aria-label="breadcrumb"ka navigatiɔn sugu min Dilen bɛ <nav>element (yɔrɔ) la o ɲɛfɔ, ka Fàra an (fɔlikan) aria-current="page"kan ka Kɛ set (yɔrɔ) fɛn laban ye walasa k’a Jira ko a bɛ ɲɛ min bɛ yen sisan, o jira.

Walasa ka kunnafoni wɛrɛw sɔrɔ, aw ye gafe ɲɛ ARIA sɛbɛnnikɛlan kɛcogo gafe lajɛ buruburu cogoya .

CSS ye

Yɛlɛma-yɛlɛmaw

A farala a kan v5.2.0 kɔnɔ

Bootstrap ka CSS fɛn caman sɛgɛsɛgɛli fɛɛrɛ min bɛ ka wuli ka bɔ a nɔ na, o hukumu kɔnɔ, buruburuw bɛ baara kɛ sisan ni sigida CSS fɛn caman sɛgɛsɛgɛli ye on .breadcrumbwalasa ka waati yɛrɛyɛrɛ ladamucogo ɲɛ. Nafa minnu bɛ CSS fɛn caman sɛgɛsɛgɛli la, olu bɛ sigi Sass fɛ, o la Sass ka ladamuni bɛ dɛmɛ hali bi, o fana.

  --#{$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 bεε bε bεn

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