Halluuwwan
Hiika karaa colorgita faayidaa halluu harka muraasaan dabarsuu. Deeggarsa walqabsiisota akkaataa haalawwan hover waliin of keessatti qabata, akkasumas.
Halluuwwan
Faayidaa halluutiin barruu halluu itti godhi. Yoo hidhannoo halluu itti gochuu barbaadde, .link-*gita gargaaraa kanneen qaban :hoverfi :focusstates fayyadamuu dandeessa.
.barreeffama-jalqabaa
.barreeffama-lammaffaa
.barreeffama-milkaa'ina
.barreeffama-balaa
.barreeffama-akeekkachiisa
.odeeffannoo-barreeffamaa
.barreeffama-ifa
.barreeffama-dukkana
.barreeffama-qaama
.barreeffama-kan dhaamfame
.barreeffama-adii
.barreeffama-gurraacha-50
.barreeffama-adii-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-* Faayidaa barruudhaaf
dabalamuu fi jijjiiramoota CSS waliin
, .text-black-50fi
.text-white-50akka v5.1.0tti hin barbaachifne. Isaanis v6.0.0 keessatti ni haqamu.
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.
Opaasitii
v5.1.0 keessatti dabalameera
v5.1.0 irraa eegalee, faayidaan halluu barruu jijjiiramoota CSS fayyadamuun Sass waliin uumamu. Kunis jijjiirama halluu yeroo dhugaa qindeessaa fi jijjiirama iftoomina alfaa daayinamikii malee hayyama.
Akkaataa itti hojjetu
.text-primaryMee faayidaa keenya durtii ilaali .
.text-primary {
--bs-text-opacity: 1;
color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
Jijjiiramaa CSS keenyaa --bs-primary(gatii 13, 110, 253) gosa RGB fayyadamnee jijjiiramaa CSS lammaffaa, --bs-text-opacity, iftoomina alfaadhaaf (gatii durtii waliin 1galata jijjiiramaa CSS naannoo) walitti qabsiifna. Kana jechuun yeroo kamiyyuu amma fayyadamtu , gatii .text-primaryshallagame kee . Jijjiiramaan CSS naannoo tokkoon tokkoo gita keessaa dhimmoota dhaalaa irraa fagaata kanaaf fakkeenyonni faayilii ofumaan iftoomina alfaa fooyya'e hin qabaatan.colorrgba(13, 110, 253, 1).text-*
Fakkeenya
Opaasitii sana jijjiiruuf, --bs-text-opacitykaraa akkaataa amala ykn akkaataa sarara keessaa irra darbi.
<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>Yookiin, faayidaa kamiyyuu keessaa filadhu .text-opacity:
<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>Addaa ta’uu
Yeroo tokko tokko gitaawwan haalata (contextual classes) sababa adda ta'uu filannoo biraatiin hojiirra ooluu hin danda'an. Haala tokko tokko keessatti, furmaanni gahaan qabiyyee qaama keetii qaama <div>hiikaa ykn isaa ol gita barbaadame waliin marsuudha.
Sass jedhama
Dalagaa Sass armaan gadii dabalatee, waa'ee amaloota amala CSS keenya hammataman (aka jijjiiramoota CSS) halluuwwanii fi kkf dubbisuu yaadaa.
Jijjiiramoota
Faayidaaleen baay'een colorhalluuwwan mata duree keenyaatiin kan uumaman yoo ta'u, jijjiiramoota paaletii halluu waliigalaa keenyaa irraa irra deebi'amee ramadama.
$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;
Halluuwwan halluu diimaas ni jiru, garuu tuuta xiqqaa qofti faayidaa kamiyyuu uumuuf fayyadama.
$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;
Kaartaa
Halluuwwan mata duree sana booda kaartaa Sass keessa kaa'amu kanaaf isaan irratti loop gochuun faayidaa keenya, fooyyessitoota qaamaa fi kkf maddisiisuu dandeenya.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
Halluuwwan halluu diimaa akka kaartaa Sass ttis ni argamu. Kaartaan kun faayidaa kamiyyuu maddisiisuudhaaf hin oolu.
$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
);
Halluuwwan RGB kaartaa Sass adda ta'e irraa uumamu:
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
Akkasumas halluu opacities sana irratti kaartaa mataa isaanii kan utilities API fayyadame waliin ijaaru:
$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");
API faayidaa
Faayidaaleen halluu API faayidaa keenya keessatti labsamu bara scss/_utilities.scss. Akkaataa API faayilii itti fayyadamtu baradhu.
"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
)
),