Serbuk roti

Nyatakan lokasi halaman semasa dalam hierarki navigasi yang secara automatik menambah pemisah melalui CSS.

Pada halaman ini

Contoh

Gunakan senarai tersusun atau tidak tersusun dengan item senarai terpaut untuk mencipta serbuk roti gaya minimum. Gunakan utiliti kami untuk menambah gaya tambahan seperti yang dikehendaki.

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>

Pembahagi

Pembahagi ditambah secara automatik dalam CSS melalui ::beforedan content. Ia boleh diubah dengan mengubah suai sifat tersuai CSS setempat --bs-breadcrumb-divider, atau melalui $breadcrumb-dividerpembolehubah Sass — dan $breadcrumb-divider-flippeduntuk rakan sejawatannya RTL, jika perlu. Kami lalai kepada pembolehubah Sass kami, yang ditetapkan sebagai sandaran kepada sifat tersuai. Dengan cara ini, anda mendapat pembahagi global yang boleh anda ganti tanpa menyusun semula CSS pada bila-bila masa.

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>

Apabila mengubah suai melalui Sass, fungsi petikan diperlukan untuk menjana petikan di sekeliling rentetan. Sebagai contoh, menggunakan >sebagai pembahagi, anda boleh menggunakan ini:

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

Anda juga boleh menggunakan ikon SVG terbenam . Gunakannya melalui sifat tersuai CSS kami atau gunakan pembolehubah Sass.

Menggunakan SVG terbenam

Sebaris SVG sebagai URI data memerlukan URL melarikan beberapa aksara, terutamanya <, >dan #. Itulah sebabnya $breadcrumb-dividerpembolehubah dihantar melalui escape-svg()fungsi Sass kami . Apabila menggunakan sifat tersuai CSS, anda perlu URL melarikan diri dari SVG anda sendiri. Baca penjelasan Kevin Weber pada CodePen untuk mendapatkan maklumat terperinci tentang perkara yang perlu dilepaskan.

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

Anda juga boleh mengalih keluar tetapan pembahagi --bs-breadcrumb-divider: '';(rentetan kosong dalam sifat tersuai CSS dikira sebagai nilai), atau menetapkan pembolehubah Sass kepada $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;

Kebolehcapaian

Memandangkan serbuk roti menyediakan navigasi, adalah idea yang baik untuk menambah label yang bermakna seperti aria-label="breadcrumb"untuk menerangkan jenis navigasi yang disediakan dalam <nav>elemen, serta menggunakan aria-current="page"item terakhir set untuk menunjukkan bahawa ia mewakili halaman semasa.

Untuk maklumat lanjut, lihat corak serbuk roti Panduan Amalan Pengarangan ARIA .

CSS

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, serbuk roti kini menggunakan pembolehubah CSS tempatan .breadcrumbuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

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

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