ڕەنگەکان
color
بە مشتێک پۆلی سوودمەندی ڕەنگ لە ڕێگەیەوە مانا بگەیەنە . پشتگیری بۆ ستایلکردنی بەستەرەکان لەگەڵ دۆخی هۆڤەر لەخۆدەگرێت، هەروەها.
ڕەنگەکان
ڕەنگکردنی دەق بە سوودمەندییەکانی ڕەنگکردن. ئەگەر بتەوێت بەستەرەکان ڕەنگ بکەیت، دەتوانیت .link-*
پۆلەکانی یارمەتیدەر بەکاربهێنیت کە 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>
.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 ی گۆڕاوەی CSS ی خۆمان بەکاردەهێنین --bs-primary
(بە بەهای 13, 110, 253
) و گۆڕاوەی دووەمی CSSمان هاوپێچ دەکەین، --bs-text-opacity
, بۆ شەفافیەتی ئەلفا (بە بەهای پێشوەختە 1
بەهۆی گۆڕاوێکی CSSی ناوخۆیی). واتە هەر کاتێک ئێستا بەکاری بهێنیت ، بەهای .text-primary
حیسابکراوەکەت بریتییە لە . گۆڕاوەی CSSی ناوخۆیی لە ناو هەر پۆلێکدا خۆی لە کێشەکانی میرات دەپارێزێت بۆیە نموونە هێلانەییەکانی سوودمەندەکان بە شێوەیەکی ئۆتۆماتیکی شەفافیەتی ئەلفا دەستکاریکراویان نییە.color
rgba(13, 110, 253, 1)
.text-*
نموونە
بۆ گۆڕینی ئەو ناڕوونییە، --bs-text-opacity
لە ڕێگەی ستایلە تایبەتەکان یان ستایلە ناو هێڵەکانەوە سەرپێچی بکە.
<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
خزمەتگوزارییەکان هەڵبژێرە:
<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>
توخمێکی مانادار یان زیاتر بە پۆلی دڵخوازدا بپێچیتەوە.
ساس
جگە لەم کاراییانەی خوارەوەی Sass، بیر لە خوێندنەوە بکەرەوە دەربارەی تایبەتمەندییە تایبەتمەندەکانی CSS ی ئێمە (بە ناوی گۆڕاوە CSS) بۆ ڕەنگەکان و زۆر شتی تر.
گۆڕاوەکان
زۆربەی 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");
وە ناڕوونی ڕەنگەکان لەسەر ئەوە بنیات دەنرێت بە نەخشەی تایبەت بە خۆیان کە لەلایەن API سوودمەندییەکانەوە بەکاردەهێنرێت:
$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 ی سوودمەندیەکان
سوودمەندییەکانی ڕەنگ لە APIی سوودمەندیەکانمان لە scss/_utilities.scss
. فێربە چۆن API ی سوودمەندیەکان بەکاربهێنیت.
"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
)
),