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. Istaganingizcha qo'shimcha uslublar qo'shish uchun bizning yordamchi dasturlarimizdan foydalaning.

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>

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.

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

O'rnatilgan SVG dan foydalanish

SVG-ni ma'lumotlar URI sifatida kiritish URL bir nechta belgilardan qochishni talab qiladi, ayniqsa <, >va #. Shuning uchun $breadcrumb-dividero'zgaruvchi bizning escape-svg()Sass funksiyamiz orqali uzatiladi . CSS-ning maxsus xususiyatidan foydalanganda, SVG-dan mustaqil ravishda URL-dan qochishingiz kerak. Nimadan qochish kerakligi haqida batafsil ma'lumot olish uchun Kevin Weberning CodePen-dagi tushuntirishlarini o'qing .

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

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

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;

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 ARIA Mualliflik Amaliyotlari Qo'llanmasiga qarang .

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida, non sindirishlari endi .breadcrumbreal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$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 o'zgaruvchilari

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