نان وردکراو

شوێنی لاپەڕەی ئێستا لە ناو پلەبەندییەکی گەشتکردندا نیشان بدە کە بە شێوەیەکی ئۆتۆماتیکی جیاکەرەوەکان لە ڕێگەی 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(&#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>توخمەکەدا دابین کراوە، هەروەها بەکارهێنانی 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;