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