ሕብርታት
ትርጉም ብመንገዲ color
ብኣጻብዕ ዝቑጸሩ ናይ ሕብሪ ዩቲሊቲ ክፍልታት ምትሕልላፍ። ንቅዲ ምትእስሳር ምስ ሆቨር ስቴትስ ዝግበር ደገፍ እውን የጠቓልል።
ሕብርታት
ጽሑፍ ብናይ ሕብሪ ዩቲሊቲታት ሕብሪ ምልካይ። ንመላግቦታት ሕብሪ ክትህቦም እንተደሊኻ፡ እቶም .link-*
ሓጋዚ ክፍልታት ክትጥቀም ትኽእል ኢኻ which have :hover
and :focus
states.
.ጽሑፍ-መባእታ
.ጽሑፍ-ካልኣይ ደረጃ
.ጽሑፍ-ዓወት
.ጽሑፍ-ሓደጋ
.ጽሑፍ-መጠንቀቕታ
.ጽሑፍ-ሓበሬታ
.ጽሑፍ-ብርሃን
.ጽሑፍ-ጸልማት
.ጽሑፍ-ኣካል
.ጽሑፍ-ዝተዓጽወ
.ጽሑፍ-ጻዕዳ
.ጽሑፍ-ጸሊም-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>
ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ
ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .visually-hidden
ክፍሊ ዝተሓብአ።
ፍሉይነት
ሓደ ሓደ ግዜ ብሰንኪ ፍሉይነት ካልእ መምረጺ፡ ዓውደ-ጽሑፋዊ ክፍልታት ኣብ ግብሪ ክውዕሉ ኣይክእሉን። ኣብ ገለ ገለ ኣጋጣሚታት፡ እኹል መፍትሒ፡ ትሕዝቶ ባእታኻ ብሓደ <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
);
ዩቲሊቲስ ኤፒኣይ
ሕብራዊ ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss
. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።
"color": (
property: color,
class: text,
values: map-merge(
$theme-colors,
(
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba($black, .5),
"white-50": rgba($white, .5),
"reset": inherit,
)
)
),