Duonos trupiniai

Nurodykite dabartinio puslapio vietą naršymo hierarchijoje, kuri automatiškai prideda skyriklius per CSS.

Šiame puslapyje

Pavyzdys

Naudokite sutvarkytą arba nerūšiuotą sąrašą su susietais sąrašo elementais, kad sukurtumėte minimalaus stiliaus naršymo kelią. Norėdami pridėti papildomų stilių, kaip norite, naudokite mūsų paslaugas.

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>

Skirstytuvai

Skirstytuvai automatiškai pridedami CSS naudojant ::beforeir content. Juos galima pakeisti modifikuojant vietinę CSS tinkintą ypatybę --bs-breadcrumb-dividerarba naudojant $breadcrumb-dividerSass kintamąjį ir $breadcrumb-divider-flipped, jei reikia, jo RTL atitikmenį. Pagal numatytuosius nustatymus taikome mūsų Sass kintamąjį, kuris nustatytas kaip pasirinktinės nuosavybės atsarginis variantas. Tokiu būdu jūs gaunate visuotinį skirstytuvą, kurį galite nepaisyti bet kuriuo metu nekompiliuodami CSS.

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>

Keičiant naudojant Sass, citatos funkcija reikalinga kabutėms aplink eilutę sugeneruoti. Pavyzdžiui, naudodami >kaip skirstytuvą, galite naudoti tai:

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

Taip pat galima naudoti įterptąją SVG piktogramą . Taikykite jį naudodami tinkintą CSS nuosavybę arba naudokite kintamąjį Sass.

Naudojant įterptąjį SVG

SVG įtraukimas kaip duomenų URI reikalauja, kad URL pašalintų kelis simbolius, ypač <, >ir #. Štai kodėl $breadcrumb-dividerkintamasis perduodamas per mūsų escape-svg()Sass funkciją . Kai naudojate tinkintą CSS ypatybę, turite patys pašalinti URL iš SVG. Perskaitykite Kevino Weberio paaiškinimus „CodePen “, kad gautumėte išsamios informacijos apie tai, ko pabėgti.

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

Taip pat galite pašalinti skirstytuvo nustatymą --bs-breadcrumb-divider: '';(tuščios eilutės tinkintose CSS ypatybėse laikomos verte) arba nustatyti kintamąjį Sass į $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;

Prieinamumas

Kadangi naršymas suteikia naršymą, verta pridėti prasmingą etiketę, aria-label="breadcrumb"kuri apibūdintų elemente pateiktą naršymo tipą, <nav>taip pat pritaikyti aria-current="page"paskutiniam rinkinio elementui, kad būtų nurodyta, jog jis atstovauja dabartiniam puslapiui.

Norėdami gauti daugiau informacijos, žr. ARIA kūrimo praktikos vadovo naršymo šabloną .

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, dabar naršymo keliuose naudojami vietiniai CSS kintamieji, .breadcrumbkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

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