нонреза

Ҷойгиршавии саҳифаи ҷориро дар доираи иерархияи навигатсионӣ, ки ба таври худкор ҷудокунандаҳоро тавассути CSS илова мекунад, нишон диҳед.

Дар ин саҳифа

Мисол

Рӯйхати тартибдодашуда ё номураттабро бо ҷузъҳои рӯйхат алоқаманд истифода баред, то нонрезаи ҳадди ақали услубӣ эҷод кунед. Утилитҳои моро барои илова кардани сабкҳои иловагӣ мувофиқи хоҳиш истифода баред.

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>

Тақсимкунандагон

Тақсимкунандагон ба таври худкор дар CSS тавассути ::beforeва илова карда мешаванд content. Онҳоро тавассути тағир додани амволи фармоишии маҳаллии CSS --bs-breadcrumb-dividerё тавассути $breadcrumb-dividerтағирёбандаи Sass - ва $breadcrumb-divider-flippedбарои ҳамтои RTL-и он, агар лозим бошад, тағир додан мумкин аст. Мо тағирёбандаи Sass-и худро пешфарз мекунем, ки он ҳамчун бозгашт ба моликияти фармоишӣ муқаррар шудааст. Бо ин роҳ, шумо як тақсимкунандаи глобалӣ мегиред, ки шумо метавонед онро бе аз нав тартиб додани 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>

Ҳангоми тағир додан тавассути Sass, функсияи иқтибос барои тавлиди нохунакҳо дар атрофи сатр лозим аст. Масалан, бо истифода >аз тақсимкунанда, шумо метавонед инро истифода баред:

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

Инчунин мумкин аст, ки тасвири дарунсохташудаи SVG -ро истифода баред . Онро тавассути моликияти фармоишии CSS-и мо татбиқ кунед ё тағирёбандаи Sass-ро истифода баред.

Истифодаи SVG дарунсохташуда

Дохил кардани SVG ҳамчун URI додаҳо талаб мекунад, ки URL гурезад чанд аломат, махсусан <, >ва #. Аз ин рӯ, $breadcrumb-dividerтағирёбанда тавассути escape-svg()функсияи Sass мо мегузарад . Ҳангоми истифодаи амволи фармоишии CSS, шумо бояд URL-и SVG-и худро мустақилона гурезед. Тавзеҳоти Кевин Веберро дар CodePen хонед, то маълумоти муфассалро дар бораи чӣ фирор кардан лозим аст.

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

Шумо инчунин метавонед танзимоти тақсимкуниро хориҷ кунед --bs-breadcrumb-divider: '';(сатрҳои холӣ дар хосиятҳои фармоишии CSS ҳамчун арзиш ҳисоб карда мешаванд) ё танзим кардани тағирёбандаи 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;

Дастрасӣ

Азбаски нонрезаҳо паймоишро таъмин мекунанд, хуб аст, ки илова кардани тамғаи пурмазмун ба монанди aria-label="breadcrumb"тавсифи навъи навигатсия дар <nav>элемент ва инчунин aria-current="page"ба банди охирини маҷмӯа барои нишон додани он, ки он саҳифаи ҷориро муаррифӣ мекунад, истифода баред.

Барои маълумоти иловагӣ, ба дастури ARIA Authoring Practices Lokanta нонреза нигаред .

CSS

Тағйирёбандаҳо

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, нонрезаҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .breadcrumbбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

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

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