رنگ
معنى کي هٿي وٺرائڻ color
سان گڏ رنگين يوٽيلٽي ڪلاس جي ذريعي. هور رياستن سان اسٽائلنگ لنڪس لاءِ سپورٽ پڻ شامل آهي.
رنگ
رنگن جي استعمال سان متن کي رنگ ڏيو. جيڪڏهن توهان لنڪس کي رنگ ڏيڻ چاهيو ٿا، توهان .link-*
مددگار طبقن کي استعمال ڪري سگهو ٿا جيڪي آهن :hover
۽ :focus
رياستون.
متن- پرائمري
متن-ثانوي
.text-ڪاميابي
.text-خطرو
متن جي خبرداري
متن جي ڄاڻ
.text-light
متن- اونداهو
.text-body
متن-خاموش
متن-اڇو
متن-ڪارو-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
5.1.0 جي طور تي ختم ٿيل آھن. اهي v6.0.0 ۾ ختم ڪيا ويندا.
مددگار ٽيڪنالاجي جي معني کي پهچائڻ
معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .visually-hidden
ڪلاس سان لڪايو ويو آهي.
اوپيسيٽي
v5.1.0 ۾ شامل ڪيو ويو
v5.1.0 جي طور تي، ٽيڪسٽ رنگ جي افاديت سي ايس ايس متغير استعمال ڪندي Sass سان ٺاهيا ويا آهن. هي بغير تاليف ۽ متحرڪ الفا شفافيت تبديلين جي حقيقي وقت رنگ تبديلين جي اجازت ڏئي ٿو.
اهو ڪيئن ڪم ڪري ٿو
اسان جي ڊفالٽ .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-*
طبقي جي اندر وراثت جي مسئلن کان بچي ٿو، تنهنڪري يوٽيلٽيز جي nested مثالن ۾ خودڪار طريقي سان تبديل ٿيل الفا شفافيت نه هوندي آهي.
مثال
ان اوپيسيٽي کي تبديل ڪرڻ لاءِ، --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
);
آر بي بي رنگ هڪ الڳ ساس نقشي مان ٺاهيا ويا آهن:
$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
)
),