ברעאַדקרומב

בייַשפּיל

ניצן אַ אָרדערד אָדער אַנאָרדערד רשימה מיט לינגקט רשימה ייטאַמז צו שאַפֿן אַ מינימאַל סטיילד ברעאַדקרומב. ניצן אונדזער יוטילאַטיז צו לייגן נאָך סטיילז ווי איר ווילט.

<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 קאַונץ ווי אַ ווערט), אָדער באַשטעטיקן די סאַסס בייַטעוודיק צו $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"צו די לעצטע נומער פון די גאַנג צו אָנווייַזן אַז עס רעפּראַזענץ די קראַנט בלאַט.

פֿאַר מער אינפֿאָרמאַציע, זען די ARIA Authoring Practices Guide Breadcrumb מוסטער .

CSS

וועריאַבאַלז

ווי אַ טייל פון Bootstrap ס יוואַלווינג CSS וועריאַבאַלז צוגאַנג, ברעאַדקרומבס איצט נוצן היגע CSS וועריאַבאַלז .breadcrumbפֿאַר ימפּרוווד פאַקטיש-צייט קוסטאָמיזאַטיאָן. וואַלועס פֿאַר די CSS וועריאַבאַלז זענען באַשטימט דורך סאַס, אַזוי סאַס קוסטאָמיזאַטיאָן איז נאָך געשטיצט אויך.

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

סאָס וועריאַבאַלז

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