نان وردکراو
شوێنی لاپەڕەی ئێستا لە ناو پلەبەندییەکی گەشتکردندا نیشان بدە کە بە شێوەیەکی ئۆتۆماتیکی جیاکەرەوەکان لە ڕێگەی 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 ـمان دەخەینە سەر کە وەکو fallback بۆ تایبەتمەندی custom دانراوە. بەم شێوەیە، دابەشکەرێکی جیهانیت دەست دەکەوێت کە دەتوانیت لە هەر کاتێکدا بەبێ ئەوەی 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، فەنکشنی quote پێویستە بۆ دروستکردنی quotes لە دەوری ڕستەیەک. بۆ نموونە بە بەکارهێنانی >
وەک دابەشکەر، دەتوانیت ئەمە بەکاربهێنیت:
$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>
توخمەکەدا دابین کراوە، هەروەها بەکارهێنانی an 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;