ekmek kırıntısı

Örnek

Minimal tarzda bir içerik haritası oluşturmak için bağlantılı liste öğelerine sahip sıralı veya sırasız bir liste kullanın. İstediğiniz şekilde ek stiller eklemek için yardımcı programlarımızı kullanın.

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

Bölücüler

::beforeBölücüler, CSS'de ve aracılığıyla otomatik olarak eklenir content. Yerel bir CSS özel özelliği değiştirilerek --bs-breadcrumb-dividerveya $breadcrumb-dividerSass değişkeni aracılığıyla ve $breadcrumb-divider-flippedgerekirse RTL karşılığı için değiştirilebilirler. Özel özelliğe geri dönüş olarak ayarlanan Sass değişkenimizi varsayılan olarak ayarlıyoruz. Bu şekilde, herhangi bir zamanda CSS'yi yeniden derlemeden geçersiz kılabileceğiniz global bir ayırıcı elde edersiniz.

<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 aracılığıyla değişiklik yaparken, bir dize etrafında tırnak işaretleri oluşturmak için alıntı işlevi gerekir. Örneğin, >bölücü olarak şunu kullanabilirsiniz:

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

Gömülü bir SVG simgesi kullanmak da mümkündür . Bunu CSS özel özelliğimiz aracılığıyla uygulayın veya Sass değişkenini kullanın.

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

Ayırıcı ayarını da kaldırabilirsiniz --bs-breadcrumb-divider: '';(CSS özel özelliklerindeki boş dizeler bir değer olarak sayılır) veya Sass değişkenini olarak ayarlayabilirsiniz $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;

Ulaşılabilirlik

İçerik haritaları bir gezinme sağladığından, öğede aria-label="breadcrumb"sağlanan gezinme türünü açıklayan gibi anlamlı bir etiket eklemek ve kümenin geçerli sayfayı temsil ettiğini belirtmek için son öğeye bir uygulamak iyi bir fikirdir .<nav>aria-current="page"

Daha fazla bilgi için ARIA Yazma Uygulamaları Kılavuzu içerik haritası düzenine bakın .

CSS

Değişkenler

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, içerik kırıntıları artık .breadcrumbgelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

  --#{$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};
  

Sas değişkenleri

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