ब्रेडक्रम्ब

उदाहरण

न्यूनतम शैली कें ब्रेडक्रम्ब बनावा कें लेल लिंक कैल गेल सूची आइटम कें साथ क्रमबद्ध या अक्रमित सूची कें उपयोग करूं. इच्छानुसार अतिरिक्त शैली जोड़बाक लेल हमर उपयोगिताक उपयोग करू।

<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 चर कें माध्यम सं — आ $breadcrumb-divider-flippedओकर RTL समकक्ष कें लेल, यदि जरूरत होय. हम अपनऽ Sass चर क॑ डिफ़ॉल्ट रूप स॑ देखै छियै, जे कस्टम प्रॉपर्टी म॑ फॉलबैक के रूप म॑ सेट करलऽ गेलऽ छै । एहि तरहें, अहां कें एकटा ग्लोबल डिवाइडर मिलतय जेकरा अहां कोनों समय सीएसएस कें बिना पुनः संकलित केने ओवरराइड कयर सकय छी.

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

एकटा एम्बेडेड एसवीजी आइकन क उपयोग करब सेहो संभव अछि . एकरा हमर 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>aria-current="page"

अधिक जानकारी कें लेल, देखू एआरआईए लेखन प्रथाक गाइड ब्रेडक्रंब पैटर्न .

सीएसएस

चर

बूटस्ट्रैप कें विकसित CSS चर दृष्टिकोण कें हिस्सा कें रूप मे, ब्रेडक्रंब आब .breadcrumbबढ़ल वास्तविक समय अनुकूलन कें लेल स्थानीय CSS चर पर उपयोग करय छै. 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;