ब्रेडक्रंब के बा

वर्तमान पन्ना के स्थान के एगो नेविगेशनल हायरर्की के भीतर बताईं जे 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 चर के माध्यम से — आ $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 चर के इस्तेमाल करीं।

एम्बेडेड एसवीजी के इस्तेमाल कइल जा रहल बा

एसवीजी के डेटा यूआरआई के रूप में इनलाइनिंग करे खातिर यूआरएल के कुछ वर्ण से बचल जरूरी बा, सभसे खास बा <, >आ #. एही से $breadcrumb-dividerचर के हमनी के escape-svg()Sass फंक्शन के माध्यम से पास कईल जाला . CSS कस्टम प्रॉपर्टी के इस्तेमाल करत घरी, रउआँ के अपना SVG के यूआरएल से अपना दम पर एस्केप करे के पड़ी। का से बचल जाव एह बारे में विस्तृत जानकारी खातिर कोडपेन पर केविन वेबर के सफाई पढ़ीं .

एचटीएमएल के बा

<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"

अधिक जानकारी खातिर, एरिया ऑथरिग प्रैक्टिस गाइड ब्रेडक्रंब पैटर्न देखल जाय ।

सीएसएस के बा

चर के बारे में बतावल गइल बा

v5.2.0 में जोड़ल गइल बा

बूटस्ट्रैप के बिकसित होखे वाला 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;