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.
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 ::before
thiab content
. Lawv tuaj yeem hloov pauv los ntawm kev hloov kho CSS cov cuab yeej hauv zos --bs-breadcrumb-divider
, lossis los ntawm $breadcrumb-divider
Sass hloov pauv - thiab $breadcrumb-divider-flipped
rau 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("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");" 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;