نان وردکراو

نموونە

لیستێکی ڕێکخراو یان ڕێکنەخراو بەکاربهێنە لەگەڵ شتەکانی لیستی بەستراو بۆ دروستکردنی نانێکی کەمترین ستایل. سوودمەندیەکانمان بەکاربهێنە بۆ زیادکردنی ستایلی زیادە بەپێی ئارەزووی خۆت.

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

هەروەها دەتوانیت ڕێکخستنی دابەشکەرەکە لاببەیت --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"بۆ دوا بابەتی کۆمەڵەکە بۆ ئەوەی ئاماژە بەوە بکات کە نوێنەرایەتی لاپەڕەی ئێستا دەکات.

بۆ زانیاری زیاتر، سەیری ڕێبەری شێوازەکانی نووسینی ARIA بکە نەخشی نانە وردکراوەکان .

CSS

گۆڕاوەکان

وەک بەشێک لە نزیکبوونەوەی گۆڕاوە CSS پەرەسەندووەکانی Bootstrap، ئێستا نانە وردکراوەکان گۆڕاوە ناوخۆییەکانی CSS بەکاردەهێنن .breadcrumbبۆ بەرزکردنەوەی خۆکارکردنی کاتی ڕاستەقینە. بەهاکان بۆ گۆڕاوەکانی CSS لە ڕێگەی Sass دادەنرێت، بۆیە هێشتا پشتگیری لە خۆکارکردنی Sass دەکرێت، هەروەها.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

گۆڕاوەکانی ساس

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