Thërrim buke

Shembull

Përdorni një listë të renditur ose të parregulluar me artikuj të lidhur të listës për të krijuar një copë buke të stiluar minimalisht. Përdorni shërbimet tona për të shtuar stile shtesë sipas dëshirës.

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

Ndarësit

Ndarësit shtohen automatikisht në CSS përmes ::beforedhe content. Ato mund të ndryshohen duke modifikuar një pronë lokale të personalizuar të CSS --bs-breadcrumb-divider, ose përmes $breadcrumb-dividerndryshores Sass - dhe $breadcrumb-divider-flippedpër homologun e saj RTL, nëse është e nevojshme. Ne e paracaktojmë variablin tonë Sass, i cili vendoset si një kthim prapa në vetinë e personalizuar. Në këtë mënyrë, ju merrni një ndarës global që mund ta anashkaloni pa e rikompiluar CSS në çdo kohë.

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

Kur modifikoni nëpërmjet Sass, funksioni i kuotës kërkohet për të gjeneruar thonjëza rreth një vargu. Për shembull, duke përdorur >si ndarës, mund të përdorni këtë:

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

Është gjithashtu e mundur të përdoret një ikonë e integruar SVG . Aplikojeni atë nëpërmjet pronës sonë të personalizuar CSS ose përdorni variablin 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>");

Ju gjithashtu mund të hiqni cilësimin e ndarësit --bs-breadcrumb-divider: '';(vargjet e zbrazëta në vetitë e personalizuara të CSS llogariten si vlerë) ose të vendosni ndryshoren Sass në $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;

Aksesueshmëria

Meqenëse breadcrumbs ofrojnë një lundrim, është një ide e mirë të shtoni një etiketë kuptimplotë aria-label="breadcrumb"për të përshkruar llojin e navigimit të dhënë në <nav>element, si dhe të aplikoni një aria-current="page"në artikullin e fundit të grupit për të treguar se ai përfaqëson faqen aktuale.

Për më shumë informacion, shihni Udhëzuesin e Praktikave të Autorizimit të ARIA-s, modeli i grimcave të bukës .

CSS

Variablat

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, breadcrumbs tani përdorin variabla lokale CSS .breadcrumbpër personalizim të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

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