ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
Check
in English

బ్రెడ్ క్రంబ్

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>

డివైడర్లు

::beforeమరియు ద్వారా CSSలో డివైడర్లు స్వయంచాలకంగా జోడించబడతాయి content. --bs-breadcrumb-dividerస్థానిక CSS కస్టమ్ ప్రాపర్టీని సవరించడం ద్వారా లేదా $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ని ఉపయోగించడం

SVGని డేటా URIగా ఇన్‌లైన్ చేయడానికి URLకి కొన్ని అక్షరాలు తప్పించుకోవడం అవసరం, ముఖ్యంగా <, >మరియు #. అందుకే వేరియబుల్ మన సాస్ ఫంక్షన్$breadcrumb-divider ద్వారా పంపబడుతుంది . CSS అనుకూల ప్రాపర్టీని ఉపయోగిస్తున్నప్పుడు, మీరు మీ స్వంతంగా మీ SVG నుండి తప్పించుకోవడానికి URL అవసరం. ఏమి తప్పించుకోవాలనే దానిపై వివరణాత్మక సమాచారం కోసం కోడ్‌పెన్‌పై కెవిన్ వెబర్ వివరణలను చదవండి .escape-svg()

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 ఆథరింగ్ ప్రాక్టీసెస్ గైడ్ బ్రెడ్‌క్రంబ్ నమూనాను చూడండి .

CSS

వేరియబుల్స్

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;