Breadcrumb

Onetsani komwe tsamba lapano lili mkati mwautsogoleri wapanyanja womwe umangowonjezera olekanitsa kudzera pa CSS.

Patsamba ili

Chitsanzo

Gwiritsani ntchito mndandanda wosankhidwa kapena wosasankhidwa wokhala ndi mndandanda wazinthu zolumikizidwa kuti mupange mkate wocheperako. Gwiritsani ntchito zida zathu kuti muwonjezere masitayelo owonjezera momwe mukufunira.

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

Ogawanitsa

Zogawa zimawonjezedwa mu CSS kudzera ::beforendi content. Zitha kusinthidwa mwa kusintha katundu wa CSS wamba --bs-breadcrumb-divider, kapena kudzera mumtundu wa $breadcrumb-dividerSass - ndi $breadcrumb-divider-flippedmnzake wa RTL, ngati pakufunika. Timasinthasintha kumtundu wathu wa Sass, womwe umayikidwa ngati kubwereranso ku katundu wamba. Mwanjira iyi, mumapeza gawo lapadziko lonse lapansi lomwe mutha kuwongolera popanda kubweza CSS nthawi iliyonse.

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

Mukasintha kudzera pa Sass, ntchito ya quote ikufunika kuti mupange mawu ozungulira chingwe. Mwachitsanzo, pogwiritsa >ntchito chogawaniza, mutha kugwiritsa ntchito izi:

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

Ndikothekanso kugwiritsa ntchito chizindikiro cha SVG chophatikizidwa . Igwiritseni ntchito kudzera m'malo athu a CSS, kapena gwiritsani ntchito kusintha kwa 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='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");

Mukhozanso kuchotsa zogawanitsa --bs-breadcrumb-divider: '';(zingwe zopanda kanthu mu CSS custom properties zimawerengedwa ngati mtengo), kapena kukhazikitsa kusintha kwa Sass ku $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;

Kufikika

Popeza breadcrumbs amapereka navigation, ndi bwino kuwonjezera chizindikiro chatanthauzo monga aria-label="breadcrumb"kufotokoza mtundu wa navigation woperekedwa mu <nav>element, komanso kugwiritsa ntchito aria-current="page"chinthu chomaliza cha seti kusonyeza kuti ikuyimira tsamba panopa.

Kuti mumve zambiri, onani Njira Zolemba za WAI-ARIA za pateni ya breadcrumb .

Sass

Zosintha

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