Breadcrumb

Cihê rûpela heyî di nav hiyerarşiyek navîgasyonî de destnîşan bikin ku bixweber bi riya CSS veqetankeran zêde dike.

Li ser vê rûpelê

Mînak

Lîsteyek rêzkirî an nerêkûpêk bi hêmanên navnîşa pêvekirî bikar bînin da ku nanek bi şêweya hindiktirîn biafirînin. Karûbarên me bikar bînin ku li gorî xwestinê şêwazên din lê zêde bikin.

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>

Dividers

Dabeş bixweber di nav CSS de têne zêdekirin ::beforeû bi content. Ew dikarin bi guheztina taybetmendiyek xwerû ya CSS-ê ya herêmî --bs-breadcrumb-divider, an bi $breadcrumb-dividerguhêrbara Sass ve werin guheztin - û $breadcrumb-divider-flippedheke hewce be ji bo hevtayê wê RTL. Em guhêrbara xweya Sass-ê ya ku wekî paşvekêşana taybetmendiya xwerû hatî danîn vedihewînin. Bi vî rengî, hûn dabeşkerek gerdûnî digirin ku hûn dikarin di her kêliyê de bêyî ji nû ve berhevkirina CSS-ê bişopînin.

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>

Dema ku bi riya Sass ve tê guheztin, fonksiyona quote hewce ye ku li dor rêzek nîgaran çêbike. Mînakî, >wekî dabeşker bikar bînin, hûn dikarin vê bikar bînin:

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

Di heman demê de gengaz e ku meriv îkonek SVG-ya pêvekirî bikar bîne . Wê bi navgîniya taybetmendiya meya xwerû ya CSS-ê bicîh bikin, an guhêrbar Sass bikar bînin.

Bikaranîna SVG-ya pêvekirî

Binavkirina SVG-ê wekî URI-ya daneyê hewce dike ku URL-ya çend tîpan birevîne, bi taybetî <, >û #. Ji ber vê yekê guhêrbar di fonksiyona meya Sass re$breadcrumb-divider derbas dibe . Dema ku taybetmendiya xwerû ya CSS-ê bikar bînin, hûn hewce ne ku URL-ya SVG-ya xwe bixwe birevin. Daxuyanên Kevin Weber li ser CodePen bixwînin da ku agahdariya berfireh li ser çi birevin.escape-svg()

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

Her weha hûn dikarin mîhenga dabeşkerê rakin --bs-breadcrumb-divider: '';(rêzikên vala yên di taybetmendiyên xwerû yên CSS de wekî nirxek têne hesibandin), an guhêrbar Sass li ser $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;

Gihîştina

Ji ber ku nanpêj navîgasyonek peyda dike, fikrek baş e ku meriv etîketek watedar lê zêde bike wekî aria-label="breadcrumb"celebê navîgasyon ku di <nav>hêmanê de hatî peyda kirin rave bike, û her weha an aria-current="page"li ser xala paşîn a setê bicîh bike da ku nîşan bide ku ew rûpela heyî temsîl dike.

Ji bo bêtir agahdarî, li ser Rêbernameya Pratîkên Nivîsbarî ya ARIA-ya nimûneya nanê bibînin .

CSS

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, naha naha guhêrbarên CSS-ê yên herêmî li ser .breadcrumbji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Guherbarên 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;