ब्रेडक्रम्ब

नेभिगेसनल पदानुक्रम भित्र हालको पृष्ठको स्थान संकेत गर्नुहोस् जसले स्वचालित रूपमा CSS मार्फत विभाजकहरू थप्छ।

यस पृष्ठमा

उदाहरण

न्यूनतम स्टाइल गरिएको ब्रेडक्रम्ब सिर्जना गर्न लिङ्क गरिएको सूची वस्तुहरूसँग अर्डर गरिएको वा अक्रमित सूची प्रयोग गर्नुहोस्। चाहना अनुसार थप शैलीहरू थप्न हाम्रो उपयोगिताहरू प्रयोग गर्नुहोस्।

html

<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 चरमा पूर्वनिर्धारित गर्छौं, जुन अनुकूलन गुणमा फलब्याकको रूपमा सेट गरिएको छ। यस तरिकाले, तपाइँ एक ग्लोबल डिभाइडर पाउनुहुन्छ जुन तपाइँ कुनै पनि समयमा CSS पुन: कम्पाइल नगरी ओभरराइड गर्न सक्नुहुन्छ।

html

<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 चर प्रयोग गर्नुहोस्।

इम्बेडेड SVG प्रयोग गर्दै

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

html

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

html

<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"यसले हालको पृष्ठलाई प्रतिनिधित्व गर्छ भनी संकेत गर्न सेटको अन्तिम वस्तुमा लागू गर्ने जस्ता अर्थपूर्ण लेबल थप्नु राम्रो विचार हो।

थप जानकारीको लागि, हेर्नुहोस् ARIA Authoring Practices Guide breadcrumb pattern ।

CSS

चरहरू

v5.2.0 मा थपियो

Bootstrap को विकसित CSS चर दृष्टिकोण को एक भाग को रूप मा, breadcrumbs अब .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};

Sass चरहरू

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