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.

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>

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.

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>

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.

Go diriša SVG yeo e tsentšwego

Inlining SVG e le ya data URI hloka ho URL baleha litlhaku tse seng kae, haholo-holo <, >le #. Ke ka lebaka leo $breadcrumb-dividerphetogo e fetišwago ka escape-svg()mošomo wa rena wa Sass . Ge o šomiša thepa ya tlwaelo ya CSS, o swanetše go tšhaba URL ya SVG ya gago ka bowena. Bala ditlhaloso tša Kevin Weber go CodePen bakeng sa tshedimošo e feletšego mabapi le seo o swanetšego go se tšhaba.

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

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

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;

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 ARIA Authoring Practices Guide paterone ya breadcrumb .

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya go batamela ga diphetogo tša CSS tša Bootstrap tšeo di tšwelelago, di-breadcrumb bjale di diriša diphetogo tša CSS tša lefelong leo go .breadcrumbbakeng sa go tlwaetša mo go kaonefaditšwego ga nako ya kgonthe. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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;