ሕብርታት

ትርጉም ብመንገዲ colorብኣጻብዕ ዝቑጸሩ ናይ ሕብሪ ዩቲሊቲ ክፍልታት ምትሕልላፍ። ንቅዲ ምትእስሳር ምስ ሆቨር ስቴትስ ዝግበር ደገፍ እውን የጠቓልል።

ኣብዚ ገጽ

ሕብርታት

ጽሑፍ ብናይ ሕብሪ ዩቲሊቲታት ሕብሪ ምልካይ። ንመላግቦታት ሕብሪ ክትገብረሎም እንተደሊኻ፡ እቶም .link-*ሓጋዚ ክፍልታት ክትጥቀም ትኽእል ኢኻ which have :hoverand :focusstates.

.ጽሑፍ-መባእታ

.ጽሑፍ-ካልኣይ ደረጃ

.ጽሑፍ-ዓወት

.ጽሑፍ-ሓደጋ

.ጽሑፍ-መጠንቀቕታ

.ጽሑፍ-ሓበሬታ

.ጽሑፍ-ብርሃን

.ጽሑፍ-ጸልማት

.ጽሑፍ-ኣካል

.ጽሑፍ-ዝተዓጽወ

.ጽሑፍ-ጻዕዳ

.ጽሑፍ-ጸሊም-50

.ጽሑፍ-ጻዕዳ-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

ምቁራጽ: ምስ ምውሳኽ .text-opacity-*ዩቲሊቲታትን CSS ተለዋዋጢ ንጽሑፍ ዩቲሊቲታትን፣ .text-black-50ከምኡውን .text-white-50ካብ v5.1.0 ጀሚሮም ምቁራጽ ይርከቡ። ኣብ v6.0.0 ክእለዩ እዮም።

ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ

ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .visually-hiddenክፍሊ ዝተሓብአ።

ዘይግሉጽነት

ኣብ v5.1.0 ተወሰኸ

ካብ v5.1.0 ጀሚሩ፡ ናይ ጽሑፍ ሕብሪ ዩቲሊቲታት ምስ Sass ብ CSS ተለዋዋጢ ረቛሒታት ተጠቒሞም ይፍጠሩ። እዚ ድማ ብዘይ ምጥርናፍን ዳይናሚክ ኣልፋ ግሉጽነትን ለውጢ ኣብ ሓቀኛ ግዜ ሕብሪ ምቕያር የኽእል።

ከመይ ይሰርሕ

ነባሪ ዩቲሊቲና ንርአ .text-primary።

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

ንሕና RGB ስሪት ናይ ናትና --bs-primary(ምስ ዋጋ 13, 110, 253) CSS ተለዋዋጢ ንጥቀምን ካልኣይ CSS ተለዋዋጢ, --bs-text-opacity, ንኣልፋ ግሉጽነት (ምስ ነባሪ ዋጋ 1ሳላ ሓደ ሎካል CSS ተለዋዋጢ) ኣተሓሒዝናዮ። እዚ ማለት ሕጂ ኣብ ዝኾነ እዋን ትጥቀመሉ .text-primaryእዋን፡ እቲ ዝተቖጽረ colorዋጋኻ rgba(13, 110, 253, 1). ኣብ ውሽጢ ነፍሲ ወከፍ ክፍሊ ዘሎ ሎካል CSS ተለዋዋጢ .text-*ንጉዳያት ውርሻ የወግድ ስለዚ ዝተሰረቱ ኣጋጣሚታት ናይቶም ዩቲሊቲታት ብኣውቶማቲክ ዝተመሓየሸ ኣልፋ ግሉጽነት የብሎምን።

ኣብነት

ነቲ ዘይግሉጽነት ንምቕያር --bs-text-opacity፡ ብመንገዲ ብሕታዊ ቅዲታት ወይ ኣብ ውሽጢ መስመር ቅዲታት ኣቢልካ ምግዳፍ።

እዚ ነባሪ ቀዳማይ ጽሑፍ እዩ።

እዚ 50% ዘይንጹርነት ዘለዎ መባእታዊ ጽሑፍ እዩ።

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

ወይ ድማ፡ ካብ ዝኾነ ካብቶም .text-opacityዩቲሊቲታት ምረጽ፤

እዚ ነባሪ ቀዳማይ ጽሑፍ እዩ።

እዚ 75% ዘይንጹርነት ቀዳማይ ጽሑፍ እዩ።

እዚ 50% ዘይንጹርነት ዘለዎ መባእታዊ ጽሑፍ እዩ።

እዚ 25% ዘይንጹርነት ቀዳማይ ጽሑፍ እዩ።

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

ፍሉይነት

ሓደ ሓደ ግዜ ብሰንኪ ፍሉይነት ካልእ መምረጺ፡ ዓውደ-ጽሑፋዊ ክፍልታት ኣብ ግብሪ ክውዕሉ ኣይክእሉን እዮም። ኣብ ገለ ገለ ኣጋጣሚታት፡ እኹል መፍትሒ፡ ትሕዝቶ ባእታኻ ብሓደ <div>ወይ ልዕሊኡ ትርጉማዊ ባእታ ምስቲ እትደልዮ ክፍሊ ምጥቕላል እዩ።

ሳስ

ብዘይካ እዚ ዝስዕብ ናይ ሳስ ተግባር፡ ብዛዕባ እቶም ዝተሓወሱ ናይ CSS ብሕታዊ ባህርያትና (aka CSS variables) ንሕብርታትን ካልእን ምንባብ ኣብ ግምት ኣእትዉ።

ተለዋዋጢ ረቛሒታት

መብዛሕትኦም colorዩቲሊቲታት ብናይ ቴማ ሕብርታትና እዮም ዝፍጠሩ፣ ካብ ሓፈሻዊ ናይ ሕብሪ ፓለቲ ተለዋዋጢታትና ዳግማይ ተመዲቦም።

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

ግራጭ ሕብርታት እውን ኣለዉ፣ ግን ዝኾነ ይኹን ዩቲሊቲ ንምፍጣር ንኡስ ስብስብ ጥራይ እዩ ዝጥቀም።

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

ካርታ

ብድሕሪኡ ሕብርታት ቴማ ኣብ ካርታ ሳስ ይቕመጡ እሞ ኣብ ልዕሊኦም ሉፕ ብምግባር ዩቲሊቲታትና፣ ናይ ኣካላት መቐየሪታትን ካልእን ክንፈጥር ንኽእል።

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ግራጭ ሕብርታት ከም ካርታ ሳስ እውን ይርከቡ። እዚ ካርታ እዚ ዝኾነ ይኹን ዩቲሊቲ ንምፍራይ ዝውዕል ኣይኮነን።

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB ሕብርታት ካብ ዝተፈለየ Sass ካርታ ይፍጠሩ፤

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

ከምኡ ውን ሕብራዊ ዘይንጹርነት ኣብኡ ብናይ ገዛእ ርእሶም ካርታ ዝሃንጹ ብናይ ዩቲሊቲስ ኤፒኣይ ዝሃልኽ፤

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

ዩቲሊቲስ ኤፒኣይ

ሕብራዊ ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),