مانيءَ جو ٽڪر

ظاهر ڪريو موجوده صفحي جي جڳھ ھڪڙي نيويگيشنل hierarchy جي اندر جيڪو خودڪار طور تي 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-dividerSass variable ذريعي - ۽ $breadcrumb-divider-flippedان جي RTL هم منصب لاءِ، جيڪڏھن ضرورت ھجي. اسان اسان جي Sass variable کي ڊفالٽ ڪريون ٿا، جيڪو ڪسٽم پراپرٽي ڏانهن واپسي جي طور تي مقرر ڪيو ويو آهي. هن طريقي سان، توهان هڪ گلوبل ورهائيندڙ حاصل ڪري سگهو ٿا جيڪو توهان بغير ڪنهن به وقت 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 variable.

<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: '';(سي ايس ايس ڪسٽم پراپرٽيز ۾ خالي اسٽرنگ ھڪڙي قيمت جي طور تي شمار ڪن ٿا)، يا سيٽنگ کي سيٽ ڪرڻ لاء Sass variable $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;

پهچ

جيئن ته breadcrumbs هڪ نيويگيشن مهيا ڪري ٿو، اهو هڪ سٺو خيال آهي هڪ بامعني ليبل شامل ڪرڻ جهڙوڪ عنصر aria-label="breadcrumb"۾ مهيا ڪيل نيويگيشن جي قسم کي بيان ڪرڻ ، انهي سان گڏ هڪ لاڳو ڪرڻ لاء سيٽ جي آخري شيء کي ظاهر ڪرڻ لاء اهو ظاهر ڪرڻ لاء اهو موجوده صفحي جي نمائندگي ڪري ٿو.<nav>aria-current="page"

وڌيڪ معلومات لاءِ، ڏسو WAI-ARIA تصنيف جي مشقن لاءِ breadcrumb pattern .

ساس

متغير

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