Икмәк

Мисал

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

<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='%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>");

Сез шулай ук ​​бүлүче көйләнүне бетерә аласыз --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"​​хәзерге битне күрсәтүен күрсәтү өчен комплектның соңгы пунктына куллану кебек мәгънәле ярлык өстәү яхшы идея .

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

CSS

Variзгәрешләр

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, икмәк кисәкләре хәзерге вакытта .breadcrumbкөчәйтелгән реальләштерү өчен җирле CSS үзгәрүләрен кулланалар. CSS үзгәрүчәннәре өчен кыйммәтләр Sass аша куела, шуңа күрә Sass көйләү дә ярдәм итә.

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

Сасс үзгәрүләр

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