Borotho bja go kgaola

Bontšha lefelo la letlakala la bjale ka gare ga tlhatlagano ya go sepelasepela yeo ka go iketla e oketšago dikaroganyo ka CSS.

Letlakaleng le

Mohlala

Šomiša lenaneo leo le laetšwego goba leo le sa rulaganywago ka diaetheme tša lenaneo tše di kgokagantšwego go hlama breadcrumb ya setaele se senyenyane. Diriša didirišwa tša rena go oketša mekgwa ya tlaleletšo ka moo o nyakago.

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

Dikaroganyo

Dikaroganyo di tlaleletšwa ka go iketla ka go CSS ka ::beforele content. Di ka fetolwa ka go fetoša thepa ya tlwaelo ya CSS ya selegae --bs-breadcrumb-divider, goba ka $breadcrumb-dividerphetogo ya Sass — le $breadcrumb-divider-flippedbakeng sa molekane wa yona wa RTL, ge go nyakega. Re default go phetogo ya rena ya Sass, yeo e beilwego bjalo ka fallback go thepa ya tlwaelo. Ka tsela ye, o hwetša karoganyo ya lefase ka bophara yeo o ka e fedišago ntle le go kgoboketša gape CSS ka nako efe goba efe.

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

Ge o fetoša ka Sass, mošomo wa ditsopolwa o a nyakega go tšweletša ditsopolwa go dikologa thapo. Go fa mohlala, go šomiša >bjalo ka karoganyo, o ka šomiša se:

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

Gape go a kgonega go diriša leswao la SVG leo le tsentšwego . E diriše ka thepa ya rena ya tlwaelo ya CSS, goba o šomiše phetogo ya Sass.

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

O ka tloša gape peakanyo ya karoganyo --bs-breadcrumb-divider: '';(dithapo tše di se nago selo ka go dithoto tša tlwaelo tša CSS di bala bjalo ka boleng), goba go beakanya phetogo ya Sass go $breadcrumb-divider: none;.

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

Phihlelelo

Ka ge di-breadcrumb di fa go sepelasepela, ke kgopolo ye botse go oketša leina leo le nago le mohola go swana le aria-label="breadcrumb"go hlaloša mohuta wa go sepelasepela wo o filwego ka go <nav>elemente, gammogo le go diriša aria-current="page"go ya go selo sa mafelelo sa sete go laetša gore e emela letlakala la bjale.

Bakeng sa tshedimošo ye ntši, bona Mekgwa ya go Ngwala ya WAI-ARIA bakeng sa paterone ya breadcrumb .

Sass

Diphetogo

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