የዳቦ ፍርፋሪ

የአሁኑን ገጽ መገኛ በአሰሳ ተዋረድ ውስጥ ያመልክቱ ፣ ይህም በራስ-ሰር በ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እና በ ውስጥ በራስ-ሰር ይታከላሉ 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ን እንደ ውሂብ አድርጎ ዩአርአይ ማስገባት ከጥቂት ቁምፊዎች ለማምለጥ ዩአርኤል ያስፈልገዋል፣በተለይም <፣ >እና #. ለዚያም ነው ተለዋዋጭው በእኛ Sass ተግባር$breadcrumb-divider ውስጥ ያልፋል . የCSS ብጁ ንብረቱን ሲጠቀሙ፣ ከSVGዎ በራስዎ ለማምለጥ URL ማድረግ ያስፈልግዎታል። ምን ማምለጥ እንዳለብዎ ለዝርዝር መረጃ የኬቨን ዌበርን ማብራሪያ በ CodePen ላይ ያንብቡ ።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 ውስጥ ተጨምሯል

እንደ የ Bootstrap የ 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};

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;