Breadcrumb

Qhia rau nplooj ntawv tam sim no qhov chaw nyob hauv ib qho kev taw qhia hierarchy uas cia li ntxiv cov cais ntawm CSS.

Ntawm nplooj ntawv no

Piv txwv

Siv ib daim ntawv xaj lossis tsis tau txiav txim nrog cov khoom sib txuas los tsim kom muaj qhov tsawg kawg nkaus styled breadcrumb. Siv peb cov khoom siv los ntxiv cov qauv ntxiv raws li qhov xav tau.

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>

Sib faib

Dividers tau txais ntxiv hauv CSS los ntawm ::beforethiab content. Lawv tuaj yeem hloov pauv los ntawm kev hloov kho CSS cov cuab yeej hauv zos --bs-breadcrumb-divider, lossis los ntawm $breadcrumb-dividerSass hloov pauv - thiab $breadcrumb-divider-flippedrau nws tus khub RTL, yog tias xav tau. Peb default rau peb Sass variable, uas yog teem raws li ib tug fallback rau cov kev cai khoom. Txoj kev no, koj tau txais kev faib thoob ntiaj teb uas koj tuaj yeem hla tsis tau rov ua dua CSS txhua lub sijhawm.

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>

Thaum hloov kho ntawm Sass, qhov kev tsocai muaj nuj nqi yuav tsum tsim kom muaj cov quotes nyob ib ncig ntawm ib txoj hlua. Piv txwv li, siv >los ua tus faib, koj tuaj yeem siv qhov no:

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

Nws tseem tuaj yeem siv lub cim SVG embedded . Thov nws ntawm peb cov cuab yeej CSS kev cai, lossis siv Sass sib txawv.

Siv embedded SVG

Inlining SVG raws li cov ntaub ntawv URI xav kom URL khiav tawm ob peb lub cim, tshwj xeeb tshaj yog <, >thiab #. Tias yog vim li cas qhov $breadcrumb-dividerhloov pauv tau dhau los ntawm peb txoj escape-svg()haujlwm Sass . Thaum siv CSS kev cai cuab yeej, koj yuav tsum tau URL khiav koj SVG ntawm koj tus kheej. Nyeem Kevin Weber cov lus piav qhia ntawm CodePen kom paub meej txog dab tsi yuav khiav tawm.

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

Koj tuaj yeem tshem tawm qhov kev faib tawm --bs-breadcrumb-divider: '';(cov hlua khoob hauv CSS cov khoom siv suav nrog tus nqi), lossis teeb tsa Sass hloov pauv rau $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;

Kev siv tau

Txij li thaum breadcrumbs muab ib qho kev taw qhia, nws yog ib lub tswv yim zoo los ntxiv cov ntawv tseem ceeb xws li aria-label="breadcrumb"piav qhia txog hom kev taw qhia nyob rau hauv lub <nav>caij, nrog rau kev siv ib qho aria-current="page"rau cov khoom kawg ntawm lub teeb los qhia tias nws sawv cev rau nplooj ntawv tam sim no.

Yog xav paub ntxiv, saib ARIA Authoring Practices Guide breadcrumb pattern .

CSS

Hloov pauv

Ntxiv hauv v5.2.0

Raws li ib feem ntawm Bootstrap qhov hloov pauv CSS hloov pauv mus kom ze, breadcrumbs tam sim no siv cov CSS hauv zos hloov pauv rau .breadcrumbkev txhim kho lub sijhawm hloov kho. Cov txiaj ntsig rau CSS qhov sib txawv tau teeb tsa ntawm Sass, yog li Sass customization tseem txhawb nqa, ib yam nkaus.

  --#{$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 variables

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