Mofo

Tondroy ny toerana misy ny pejy amin'izao fotoana izao ao anatin'ny ambaratongam-pitaterana izay manampy mpizara ho azy amin'ny alàlan'ny CSS.

Amin'ity pejy ity

OHATRA

Mampiasà lisitra voalamina na tsy misy filaharana miaraka amin'ireo singa lisitra mifamatotra mba hamoronana mofo kely misy endrika. Ampiasao ny fampiasanay mba hanampiana fomba fanampiny araka izay irina.

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

Mpizarazara

Ny mpizara dia ampiana ho azy amin'ny CSS amin'ny alàlan'ny ::beforesy content. Izy ireo dia azo ovaina amin'ny alàlan'ny fanovana ny fananana mahazatra CSS eo an-toerana --bs-breadcrumb-divider, na amin'ny alàlan'ny $breadcrumb-dividerfari-piadidiana Sass - ary $breadcrumb-divider-flippedho an'ny RTL mitovy aminy, raha ilaina. Ny fari-piadidiana Sass dia natao ho toy ny fiverenana amin'ny fananana mahazatra. Amin'izany fomba izany dia mahazo mpanelanelana manerantany ianao izay azonao ovaina nefa tsy mamerina ny CSS amin'ny fotoana rehetra.

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

Rehefa manova amin'ny alalan'ny Sass, dia ilaina ny fiasan'ny quote mba hamoronana ny teny manodidina ny tady. Azonao atao, ohatra, ny mampiasa >ity divider ity:

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

Azo atao koa ny mampiasa kisary SVG mipetaka . Ampiharo amin'ny alàlan'ny fanananay mahazatra CSS, na ampiasao ny fari-piadidiana 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");

Azonao atao ihany koa ny manaisotra ny fizarazarana --bs-breadcrumb-divider: '';(ny tady foana ao amin'ny CSS custom properties dia isaina ho sanda), na mametraka ny fari-piadidiana Sass ho $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;

Accessibility

Satria manome fitetezana ny mofo mofo, dia tsara ny manampy marika manan-danja toy aria-label="breadcrumb"ny fanoritsoritana ny karazana fitetezana omena ao amin'ilay <nav>singa, ary koa ny fampiharana a aria-current="page"amin'ny singa farany amin'ny andiany mba hanondroana ny pejy ankehitriny.

Raha mila fanazavana fanampiny dia jereo ny Fomba Fanoratra WAI-ARIA ho an'ny maodelin'ny mofo .

Sass

hiovaova

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