පාන් කුඩු

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>

බෙදුම්කරුවන්

::beforeසහ හරහා CSS හි බෙදුම් ස්වයංක්‍රීයව එකතු වේ content. දේශීය CSS අභිරුචි දේපලක් වෙනස් කිරීමෙන් --bs-breadcrumb-dividerහෝ $breadcrumb-dividerSass විචල්‍යය හරහා - සහ $breadcrumb-divider-flippedඅවශ්‍ය නම් එහි RTL සහකරු සඳහා ඒවා වෙනස් කළ හැක. අපි අපගේ Sass විචල්‍යයට පෙරනිමි කරන්නෙමු, එය අභිරුචි දේපල වෙත පසුබැසීමක් ලෙස සකසා ඇත. මේ ආකාරයෙන්, ඔබට ඕනෑම වේලාවක CSS නැවත සම්පාදනය නොකර අභිබවා යා හැකි ගෝලීය බෙදුම්කරුවෙකු ලැබේ.

<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 විචල්‍යය භාවිතා කරන්න.

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

ඔබට බෙදුම්කරු සැකසීම ඉවත් කළ හැකිය --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"

වැඩි විස්තර සඳහා, බ්‍රෙඩ්ක්‍රම්බ් රටාව සඳහා WAI-ARIA Authoring Practices බලන්න .

සාස්

විචල්යයන්

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