Икмәк

CSS аша сепараторларны автоматик рәвештә өстәгән навигацион иерархия эчендә хәзерге битнең урнашкан урынын күрсәтегез.

Бу биттә

Мисал

Минималь стильдәге икмәк пешерү өчен бәйләнгән исемлек әйберләре белән заказланган яки тәртипсез исемлекне кулланыгыз. Өстәмә стильләр теләгәнчә өстәү өчен безнең коммуналь хезмәтләрне кулланыгыз.

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

Бүләкләүчеләр

Бүләкләүчеләр автоматик рәвештә CSS аша ::beforeөстәләләр content. Алар җирле CSS махсус милеген үзгәртеп --bs-breadcrumb-divider, яки $breadcrumb-dividerSass үзгәрүчесе аша - һәм $breadcrumb-divider-flippedкирәк булса, аның RTL хезмәттәше өчен үзгәртелергә мөмкин. Без Sass үзгәрүчесе өчен килешү ясыйбыз, ул махсус милеккә кире кайту итеп куелган. Шул рәвешле, сез глобаль бүлүчене аласыз, аны CSS-ны теләсә кайсы вакытта кабатламыйча кире кагарга мөмкин.

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

Sass аша үзгәрткәндә , цитаталар цитаталар ясау өчен цитаталар функциясе таләп ителә. Мәсәлән >, бүлүче итеп кулланып, сез моны куллана аласыз:

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

Шулай ук урнаштырылган SVG иконасын кулланырга мөмкин . Аны безнең CSS махсус милеге аша кулланыгыз, яки 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");

Сез шулай ук бүлүче көйләнүне бетерә аласыз --bs-breadcrumb-divider: '';(CSS махсус характеристикаларындагы буш сызыклар кыйммәт санала), яки Sass үзгәрүчесен куя аласыз $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;

Уңайлык

aria-label="breadcrumb"Икмәк кисәкләре навигация тәэмин иткәнгә , элементта күрсәтелгән навигация төрен тасвирлау <nav>, шулай ук aria-current="page"хәзерге битне күрсәтүен күрсәтү өчен комплектның соңгы пунктына куллану кебек мәгънәле ярлык өстәү яхшы идея .

Күбрәк мәгълүмат алу өчен, икмәк пешерү үрнәге өчен WAI-ARIA авторлык практикасын карагыз .

Сасс

Variзгәрешләр

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