Ekikuta ky’omugaati

Laga ekifo omuko oguliwo kati munda mu nsengeka y'okutambuliramu eyongerako ebyawula mu ngeri ey'otoma nga eyitira mu CSS.

Ku muko guno

Eky'okulabirako

Kozesa olukalala olulagirwa oba olutali lutegekeddwa nga luliko ebintu by’olukalala ebiyungiddwa okukola ekikuta ky’omugaati ekitali kya sitayiro ekitono. Kozesa ebikozesebwa byaffe okwongerako emisono emirala nga bw’oyagala.

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>

Abagabanya ebintu

Ebigabanya byongerwako mu CSS mu ngeri ey'otoma okuyita mu ::beforene content. Ziyinza okukyusibwa nga zikyusa ekintu eky’ennono ekya CSS eky’omu kitundu --bs-breadcrumb-divider, oba okuyita mu $breadcrumb-dividernkyukakyuka ya Sass — era $breadcrumb-divider-flippedku munne RTL, bwe kiba kyetaagisa. Tusooka ku Sass variable yaffe, eteekebwawo nga fallback ku custom property. Mu ngeri eno, ofuna ekigabanya eky’ensi yonna ky’osobola okusazaamu nga toddamu kukungaanya CSS ekiseera kyonna.

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>

Nga okyusa ng’oyita mu Sass, omulimu gw’okujuliza gwetaagibwa okukola ebijuliziddwa okwetooloola olunyiriri. Okugeza, ng’okozesa >ng’omugabanya, osobola okukozesa kino:

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

Era kisoboka okukozesa akabonero ka SVG akateekeddwamu . Kikozese ng'oyita mu kintu kyaffe ekya CSS custom, oba kozesa enkyukakyuka ya Sass.

Okukozesa SVG eyingiziddwamu

Okuyingiza SVG nga data URI kyetaagisa URL okutoloka ennukuta ntono, okusinga <, >ne #. Eno y'ensonga lwaki $breadcrumb-dividerenkyukakyuka eyisibwa mu nkola yaffe eya escape-svg()Sass . Nga okozesa ekintu kya CSS eky'ennono, olina okukola URL okutoloka SVG yo ku bubwo. Soma ennyonyola za Kevin Weber ku CodePen okumanya ebisingawo ku by'olina okudduka.

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

Osobola n'okuggyawo ensengeka y'omugabanya --bs-breadcrumb-divider: '';(ennyiriri ekyerere mu CSS custom properties zibalibwa ng'omuwendo), oba okuteeka enkyukakyuka ya Sass ku $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;

Okutuuka ku bantu

Okuva breadcrumbs bwe ziwa navigation, kirungi okwongerako akabonero ak'amakulu nga aria-label="breadcrumb"okunnyonnyola ekika ky'okutambuliramu ekiweereddwa mu <nav>elementi, wamu n'okukozesa an aria-current="page"ku kintu ekisembayo ekya set okulaga nti kikiikirira omuko oguliwo kati.

Okumanya ebisingawo, laba ARIA Authoring Practices Guide breadcrumb pattern .

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, breadcrumbs kati zikozesa enkyukakyuka za CSS ez'omu kitundu ku .breadcrumbfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

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