rīvmaize

Piemērs

Izmantojiet sakārtotu vai nesakārtotu sarakstu ar saistītajiem saraksta vienumiem, lai izveidotu minimāli veidotu rīvceļu. Izmantojiet mūsu utilītprogrammas, lai pēc vajadzības pievienotu papildu stilus.

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

Dalītāji

Dalītāji tiek automātiski pievienoti CSS, izmantojot ::beforeun content. Tos var mainīt, mainot vietējo CSS pielāgoto rekvizītu --bs-breadcrumb-dividervai izmantojot $breadcrumb-dividerSass mainīgo — un $breadcrumb-divider-flippedtā RTL ekvivalentu, ja nepieciešams. Pēc noklusējuma tiek izmantots mūsu Sass mainīgais, kas ir iestatīts kā pielāgotā rekvizīta rezerves. Tādā veidā jūs iegūstat globālo dalītāju, kuru varat ignorēt, jebkurā laikā nepārkompilējot 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>

Veicot izmaiņas, izmantojot Sass, pēdiņu funkcija ir nepieciešama, lai ģenerētu pēdiņas ap virkni. Piemēram, izmantojot >kā dalītāju, varat izmantot šo:

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

Ir iespējams izmantot arī iegultu SVG ikonu . Lietojiet to, izmantojot mūsu pielāgoto CSS rekvizītu, vai izmantojiet mainīgo 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>");

Varat arī noņemt dalītāja iestatījumu --bs-breadcrumb-divider: '';(tukšas virknes CSS pielāgotajos rekvizītos tiek uzskatītas par vērtību) vai iestatīt mainīgo Sass uz $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;

Pieejamība

Tā kā hierarhiskā navigācija nodrošina navigāciju, ir ieteicams pievienot jēgpilnu iezīmi, piemēram, aria-label="breadcrumb"lai aprakstītu <nav>elementā sniegtās navigācijas veidu, kā arī aria-current="page"pievienot pēdējam kopas vienumam, lai norādītu, ka tas apzīmē pašreizējo lapu.

Lai iegūtu papildinformāciju, skatiet ARIA autorēšanas prakses rokasgrāmatas hierarhijas modeli .

CSS

Mainīgie

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas, rīvmaiņas tagad izmanto vietējos CSS mainīgos, .breadcrumblai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

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

Sass mainīgie

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