Breadcrumb

Учурдагы барактын жайгашкан жерин 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>

Бөлүүчүлөр

::beforeБөлгүчтөр жана аркылуу CSS автоматтык түрдө кошулат content. Аларды жергиликтүү CSS ыңгайлаштырылган касиетин өзгөртүү --bs-breadcrumb-dividerаркылуу же $breadcrumb-dividerSass өзгөрмөсү аркылуу өзгөртүүгө болот - жана $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 автордук практикасын караңыз .

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;