பிரட்தூள்

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>

சாஸ் மூலம் மாற்றியமைக்கும்போது, ஒரு சரத்தைச் சுற்றி மேற்கோள்களை உருவாக்க மேற்கோள் செயல்பாடு தேவைப்படுகிறது. எடுத்துக்காட்டாக, >பிரிப்பானாகப் பயன்படுத்தி, நீங்கள் இதைப் பயன்படுத்தலாம்:

$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 ஆதரிங் நடைமுறைகளைப் பார்க்கவும் .

சாஸ்

மாறிகள்

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