ਬਰੈੱਡਕ੍ਰੰਬ

ਉਦਾਹਰਨ

ਇੱਕ ਘੱਟੋ-ਘੱਟ ਸਟਾਈਲ ਵਾਲਾ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਬਣਾਉਣ ਲਈ ਲਿੰਕਡ ਸੂਚੀ ਆਈਟਮਾਂ ਦੇ ਨਾਲ ਇੱਕ ਆਰਡਰਡ ਜਾਂ ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ ਸੂਚੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਲੋੜ ਅਨੁਸਾਰ ਵਾਧੂ ਸ਼ੈਲੀਆਂ ਜੋੜਨ ਲਈ ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

ਡਿਵਾਈਡਰ

ਡਿਵਾਈਡਰ ਆਪਣੇ ਆਪ CSS ਵਿੱਚ ::beforeਅਤੇ ਦੁਆਰਾ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ 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='%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;.

<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"

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, ਏਆਰਆਈਏ ਆਥਰਿੰਗ ਪ੍ਰੈਕਟਿਸ ਗਾਈਡ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਪੈਟਰਨ ਦੇਖੋ ।

CSS

ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਿਤ ਹੋ ਰਹੀ 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;