in English

rīvmaize

Norādiet pašreizējās lapas atrašanās vietu navigācijas hierarhijā, kas automātiski pievieno atdalītājus, izmantojot CSS.

Šajā lapā

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

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 WAI-ARIA autorēšanas praksi par hierarhiskās navigācijas modeli .

Sass

Mainīgie lielumi

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