in English

Non bo'laklari

Joriy sahifaning joylashuvini CSS orqali avtomatik ravishda ajratuvchi qo'shadigan navigatsiya ierarxiyasida ko'rsating.

Ushbu sahifada

Misol

Minimal uslubdagi non bo'laklarini yaratish uchun bog'langan ro'yxat elementlari bilan tartiblangan yoki tartibsiz ro'yxatdan foydalaning. Istagancha qo'shimcha uslublar qo'shish uchun bizning yordamchi dasturlarimizdan foydalaning.

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

Ajratuvchilar

::beforeAjratuvchilar CSS-ga va orqali avtomatik ravishda qo'shiladi content. Ular mahalliy CSS xususiy xususiyatini o'zgartirish --bs-breadcrumb-divideryoki $breadcrumb-dividerSass o'zgaruvchisi orqali va $breadcrumb-divider-flippedkerak bo'lganda uning RTL hamkasbi uchun o'zgartirilishi mumkin. Biz Sass o'zgaruvchimizga sukut bo'yicha o'rnatamiz, u maxsus xususiyatga zaxira sifatida o'rnatiladi. Shunday qilib, siz istalgan vaqtda CSS-ni qayta kompilyatsiya qilmasdan bekor qilishingiz mumkin bo'lgan global ajratgichga ega bo'lasiz.

<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 orqali o'zgartirilganda, kotirovka funktsiyasi satr atrofida tirnoqlarni yaratish uchun talab qilinadi. Misol uchun, >ajratuvchi sifatida foydalanib, buni ishlatishingiz mumkin:

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

Bundan tashqari, o'rnatilgan SVG belgisidan foydalanish mumkin . Uni CSS maxsus xususiyatimiz orqali qo'llang yoki Sass o'zgaruvchisidan foydalaning.

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

Shuningdek, siz ajratuvchi sozlamasini olib tashlashingiz mumkin --bs-breadcrumb-divider: '';(CSS maxsus xususiyatlaridagi boʻsh satrlar qiymat sifatida hisoblanadi) yoki Sass oʻzgaruvchisini ga oʻrnatishingiz mumkin $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;

Foydalanish imkoniyati

aria-label="breadcrumb"Non parchalari navigatsiyani ta'minlaganligi sababli, elementda taqdim etilgan navigatsiya turini tavsiflash kabi mazmunli yorliqni qo'shish <nav>, shuningdek aria-current="page", joriy sahifani ifodalash uchun to'plamning oxirgi elementiga belgi qo'yish yaxshi bo'ladi.

Qo'shimcha ma'lumot olish uchun WAI-ARIA Authoring Practices bo'limiga qarang .

Sass

O'zgaruvchilar

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