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.

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>

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.

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>

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.

Kugwiritsa ntchito SVG yophatikizidwa

Kulowetsa SVG monga URI ya data kumafuna kuti ulalo uthawe zilembo zingapo, makamaka <, >ndi #. Ichi ndichifukwa chake $breadcrumb-dividerkusinthika kumadutsa ntchito yathu ya escape-svg()Sass . Mukamagwiritsa ntchito chikhalidwe cha CSS, muyenera URL kuti muthawe SVG yanu nokha. Werengani mafotokozedwe a Kevin Weber pa CodePen kuti mumve zambiri pazomwe mungathawe.

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

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

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;

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 mudziwe zambiri, onani ARIA Authoring Practices Guide pattern breadcrumb .

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, zinyenyeswazi za mkate tsopano zimagwiritsa ntchito zosintha za CSS zakumaloko .breadcrumbkuti zisinthidwe zenizeni zenizeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Zosintha za 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;