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.

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

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

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

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

<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 cov teeb los qhia tias nws sawv cev rau nplooj ntawv tam sim no.

Yog xav paub ntxiv, saib WAI-ARIA Authoring Practices for the breadcrumb pattern .

Sass

Hloov pauv

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