பிரட்தூள்

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>

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

$breadcrumb-divider: quote(">");

உட்பொதிக்கப்பட்ட SVG ஐகானைப் பயன்படுத்துவதும் சாத்தியமாகும் . எங்கள் CSS தனிப்பயன் சொத்து வழியாக அதைப் பயன்படுத்தவும் அல்லது Sass மாறியைப் பயன்படுத்தவும்.

உட்பொதிக்கப்பட்ட SVG ஐப் பயன்படுத்துதல்

SVG ஐ தரவு URI ஆக உள்ளிடுவதற்கு, URL சில எழுத்துகளிலிருந்து தப்பிக்க வேண்டும், குறிப்பாக <, >மற்றும் #. அதனால்தான் நமது சாஸ் செயல்பாட்டின்$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 இல் சேர்க்கப்பட்டது

பூட்ஸ்டார்ப்பின் வளர்ந்து வரும் 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;