ፍርስራስ እንጀራ

ኣብ ውሽጢ ሓደ ብመንገዲ CSS ብኣውቶማቲክ መፍለዪ ዝውስኽ ናይ ምድህሳስ ስርዓተ-መሰረት ናይቲ ሕጂ ዘሎ ገጽ ኣቀማምጣ ኣመልክት።

ኣብዚ ገጽ

ኣብነት

ብውሑድ ቅዲ ዘለዎ ፍርስራስ ባኒ ንምፍጣር ዝተኣሳሰሩ ናይ ዝርዝር ነገራት ዘለዎ ስርዓት ዘለዎ ወይ ዘይተሰርዐ ዝርዝር ተጠቐም። ከም ድላይካ ተወሳኺ ቅዲታት ንምውሳኽ ዩቲሊቲታትና ተጠቐም።

html ዝብል ጽሑፍ ኣሎ።

<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 ዳግማይ ከይተጠርነፍካዮ ክትሽፍኖ እትኽእል ዓለማዊ መከፋፈልቲ ትረክብ።

html ዝብል ጽሑፍ ኣሎ።

<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 ተለዋዋጢ ተጠቐም።

ዝተሰረተ SVG ምጥቃም

SVG ከም ዳታ URI ምእታው URL ንውሑዳት ፊደላት ምህዳም ይሓትት፣ ብፍላይ <ድማ ፣ >ከምኡውን #. ስለዚ ድማ እዩ እቲ ተለዋዋጢ ብመንገዲ Sass function$breadcrumb-divider ናትና ዝሓልፍ ። ነቲ ናይ CSS ብሕታዊ ንብረት ክትጥቀመሉ ከለኻ፡ ካብ SVGካ ብውልቅኻ URL ክትሃድም ኣለካ። እንታይ ከም እትሃድም ዝርዝር ሓበሬታ ንምርካብ ኣብ ኮድፐን ዝሃቦ መግለጺታት ኬቪን ዌበር ኣንብብ ።escape-svg()

html ዝብል ጽሑፍ ኣሎ።

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

html ዝብል ጽሑፍ ኣሎ።

<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 breadcrumb pattern ርአ ።

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ Bootstrap ዝምዕብል ዘሎ CSS ተለዋዋጢ ኣቀራርባ፡ breadcrumbs ሕጂ .breadcrumbንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ local CSS variables on ይጥቀሙ። ክብርታት ናይ 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;