in English

Xiphemu xa xinkwa

Kombisa ndhawu ya tluka ra sweswi endzeni ka xiyimo xa ku famba-famba lexi hi xoxe xi engetelaka swihambanisi hi ku tirhisa CSS.

Eka tluka leri

Xikombiso

Tirhisa nxaxamelo lowu odaweke kumbe lowu nga odawangiki lowu nga ni swilo swa nxaxamelo leswi hlanganisiweke ku endla xiphemu xa xinkwa lexi nga ni xitayili lexitsongo. Tirhisa switirhisiwa swa hina ku engetela switayele leswi engetelekeke hilaha u lavaka hakona.

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>

Swihambanisi

Swihambanisi swi engeteriwa hi ku tisungulela eka CSS hi ku tirhisa ::beforena content. Swi nga cinciwa hi ku cinca nhundzu ya ntolovelo ya CSS ya laha kaya --bs-breadcrumb-divider, kumbe hi ku tirhisa $breadcrumb-dividerxihlawulekisi xa Sass — na $breadcrumb-divider-flippedle ka mutirhisani wa yona wa RTL, loko swi laveka. Hi default eka Sass variable ya hina, leyi vekiweke tanihi fallback eka custom property. Hi ndlela leyi, u kuma xihambanisi xa misava hinkwayo lexi u nga xi tlulaka handle ko hlengeleta nakambe CSS nkarhi wihi na wihi.

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>

Loko u cinca hi ku tirhisa Sass, ntirho wa swikombo wu laveka ku tumbuluxa swikombo ku rhendzela ntambhu. Hi xikombiso, hi ku tirhisa >tanihi xihambanisi, u nga tirhisa leswi:

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

Swi tlhela swi koteka ku tirhisa xifaniso xa SVG lexi nghenisiweke . Yi tirhise hi ku tirhisa nhundzu ya hina ya ntolovelo ya CSS, kutani u tirhisa xihlawulekisi xa Sass.

Ku tirhisa SVG leyi nghenisiweke

Ku nghenisa SVG tanihi data URI swi lava ku URL ku balekela swihlawulekisi swi nga ri swingani, ngopfu-ngopfu <, >na #. Hi yona mhaka leyi $breadcrumb-dividerxihlawulekisi xi hundziseriwaka eka escape-svg()ntirho wa hina wa Sass . Loko u tirhisa nhundzu ya ntolovelo ya CSS, u fanele ku baleka URL ya SVG ya wena hi wexe. Hlaya tinhlamuselo ta Kevin Weber eka CodePen ku kuma vuxokoxoko bya vuxokoxoko bya leswi u nga swi balekelaka.

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

U nga ha tlhela u susa xiyimiso xa xihambanisi --bs-breadcrumb-divider: '';(tintambhu leti nga riki na nchumu eka swihlawulekisi swa ntolovelo swa CSS ti hlayiwa tanihi ntikelo), kumbe u veka xihlawulekisi xa Sass eka $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;

Ku fikelela

Leswi ti breadcrumbs ti nyikaka ku fambafamba, i mhaka ya kahle ku engetela lebula leyi nga na nhlamuselo yo fana na aria-label="breadcrumb"ku hlamusela muxaka wa ku fambafamba loku nyikiweke eka <nav>elemente, xikan’we na ku tirhisa an aria-current="page"eka nchumu wo hetelela wa sete ku kombisa leswaku yi yimela tluka ra sweswi.

Ku kuma vuxokoxoko byo tala, vona ARIA Authoring Practices Guide breadcrumb pattern .

CSS

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa Bootstrap’s evolving CSS variables approach, breadcrumbs sweswi yi tirhisa swilo swa laha kaya swa CSS on .breadcrumbfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

  --#{$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 swilo leswi cinca-cincaka

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