нонреза

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

Дар ин саҳифа

Мисол

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

<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 дар вақти дилхоҳ бекор кунед.

<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-ро истифода баред.

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

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

Дастрасӣ

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

Барои маълумоти бештар, ба таҷрибаи муаллифии WAI-ARIA барои намунаи нонреза нигаред .

Сасс

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

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