පාන් කුඩු

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. දේශීය 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 ඇතුළත් කිරීම සඳහා අක්ෂර කිහිපයක් ගැලවීමට URL අවශ්‍ය වේ, විශේෂයෙන් <, >සහ #. විචල්‍යය අපගේ Sass ශ්‍රිතය$breadcrumb-divider හරහා ගමන් කරන්නේ එබැවිනි . CSS අභිරුචි දේපල භාවිතා කරන විට, ඔබ විසින්ම ඔබගේ SVG වෙතින් ගැලවීමට URL අවශ්‍ය වේ. පැන යා යුතු දේ පිළිබඳ සවිස්තරාත්මක තොරතුරු සඳහා CodePen හි Kevin Weber ගේ පැහැදිලි කිරීම් කියවන්න .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 විචල්‍ය ප්‍රවේශයේ කොටසක් ලෙස, 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;