Φρυγανιά

Παράδειγμα

Χρησιμοποιήστε μια ταξινομημένη ή μη ταξινομημένη λίστα με συνδεδεμένα στοιχεία λίστας για να δημιουργήσετε μια μινιμαλιστική σύνθεση. Χρησιμοποιήστε τα βοηθητικά προγράμματα μας για να προσθέσετε επιπλέον στυλ όπως θέλετε.

<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-dividerμεταβλητής Sass — και $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, απαιτείται η συνάρτηση quote για τη δημιουργία των εισαγωγικών γύρω από μια συμβολοσειρά. Για παράδειγμα, χρησιμοποιώντας >ως διαχωριστικό, μπορείτε να χρησιμοποιήσετε αυτό:

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

Προσιτότητα

Δεδομένου ότι το breadcrumbs παρέχει μια πλοήγηση, είναι καλή ιδέα να προσθέσετε μια ετικέτα με νόημα, όπως aria-label="breadcrumb"να περιγράφει τον τύπο πλοήγησης που παρέχεται στο <nav>στοιχείο, καθώς και να εφαρμόσετε ένα aria-current="page"στο τελευταίο στοιχείο του συνόλου για να υποδείξετε ότι αντιπροσωπεύει την τρέχουσα σελίδα.

Για περισσότερες πληροφορίες, ανατρέξτε στον Οδηγό πρακτικών συγγραφής ARIA για το μοτίβο φρυγανιάς .

CSS

Μεταβλητές

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα breadcrumbs χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .breadcrumbγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές 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;