Ogi birrindua

Adierazi uneko orriaren kokapena CSS bidez bereizleak automatikoki gehitzen dituen nabigazio-hierarkia baten barruan.

Orrialde honetan

Adibidea

Erabili estekatutako zerrendako elementuak dituen ordenatutako edo ordenatu gabeko zerrenda bat gutxieneko estiloa sortzeko. Erabili gure utilitateak nahi duzun moduan estilo gehigarriak gehitzeko.

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>

Banatzaileak

Banatzaileak automatikoki gehitzen dira CSS-n ::beforeeta content. --bs-breadcrumb-dividerCSS tokiko propietate pertsonalizatu bat aldatuz edo $breadcrumb-dividerSass aldagaiaren bidez alda daitezke , eta $breadcrumb-divider-flippedbere RTL parekoa, behar izanez gero. Gure Sass aldagaia lehenesten dugu, propietate pertsonalizatuaren ordezko gisa ezartzen dena. Horrela, edozein unetan CSS birkonpilatu gabe gainidatzi dezakezun banatzaile global bat lortuko duzu.

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>

Sass bidez aldatzean, komatxo funtzioa behar da kate baten inguruan komatxoak sortzeko. Adibidez, >zatitzaile gisa erabiliz, hau erabil dezakezu:

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

Kapsulatutako SVG ikono bat ere erabil daiteke . Aplikatu gure CSS propietate pertsonalizatuaren bidez edo erabili Sass aldagaia.

Kapsulatutako SVG erabiliz

SVG datu-URI gisa sartzeak URLak karaktere batzuk ihes egitea eskatzen du, batez ere <, >eta #. Horregatik aldagaia gure Sass funtziotik$breadcrumb-divider pasatzen da . CSS propietate pertsonalizatua erabiltzen duzunean, zure SVG URL-ak ihes egin behar duzu zure kabuz. Irakurri Kevin Weberren azalpenak CodePen -en ihes egin behar duzunari buruzko informazio zehatza lortzeko.escape-svg()

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

Banatzailearen ezarpena ere kendu dezakezu --bs-breadcrumb-divider: '';(CSS propietate pertsonalizatuetako kate hutsak balio gisa zenbatzen dira) edo Sass aldagaia ezar dezakezu $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;

Irisgarritasuna

Ogi-mamiek nabigazioa ematen dutenez, komeni da etiketa esanguratsu bat gehitzea, hala nola elementuan aria-label="breadcrumb"ematen den nabigazio mota deskribatzeko, <nav>baita aria-current="page"multzoko azken elementuari bat aplikatzea uneko orrialdea adierazten duela adierazteko.

Informazio gehiago lortzeko, ikus ARIA Egile Praktiken Gida ogi-mamiaren eredua .

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren zati gisa, ogi-biribilak orain CSS aldagai lokalak erabiltzen .breadcrumbditu denbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 aldagaiak

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