ፍርስራስ እንጀራ

ኣብ ውሽጢ ሓደ ብመንገዲ 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>

ብመንገዲ ሳስ ክትቅይር ከለኻ፡ እቲ ናይ ጥቕሲ ተግባር ኣብ ዙርያ ሓደ ሕብረ ቃላት ዝርከቡ ጥቕስታት ንምፍጣር የድሊ። ንኣብነት >ከም መከፋፈልቲ ብምጥቃም ነዚ ክትጥቀመሉ ትኽእል ኢኻ፤

$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 ንናይ ቅጫ ቅጥዒ ርአ ።

ሳስ

ተለዋዋጢ ረቛሒታት

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