פירורי לחם

ציין את מיקום הדף הנוכחי בתוך היררכיית ניווט שמוסיפה אוטומטית מפרידים באמצעות 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>

מְחוּגָה

מחלקים מתווספים אוטומטית ב-CSS דרך ::beforeו content. ניתן לשנות אותם על ידי שינוי מאפיין CSS מותאם אישית מקומי --bs-breadcrumb-divider, או דרך $breadcrumb-dividerהמשתנה Sass - $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>

בעת שינוי דרך Sass, פונקציית הציטוט נדרשת כדי ליצור את המירכאות סביב מחרוזת. לדוגמה, באמצעות >כמחלק, אתה יכול להשתמש בזה:

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

אפשר גם להשתמש בסמל SVG מוטבע . החל אותו דרך מאפיין ה-CSS המותאם אישית שלנו, או השתמש במשתנה Sass.

שימוש ב-SVG מוטבע

הטבעת SVG כ-URI של נתונים דורשת כתובת URL escape של כמה תווים, בעיקר <, >ו #. זו הסיבה $breadcrumb-dividerשהמשתנה מועבר דרך escape-svg()הפונקציה Sass שלנו . בעת שימוש במאפיין ה-CSS המותאם אישית, עליך לבצע escape URL ל-SVG שלך בעצמך. קרא את ההסברים של קווין וובר על CodePen לקבלת מידע מפורט על מה לברוח.

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

משתנים

נוסף בגרסה 5.2.0

כחלק מגישת משתני ה-CSS המתפתחת של Bootstrap, פירורי לחם משתמשים כעת במשתני 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;