رنگ ها
color
با چند کلاس کاربردی رنگ معنا را از طریق آن منتقل کنید. شامل پشتیبانی از پیوندهای استایل با حالت شناور نیز می شود.
رنگ ها
متن را با ابزارهای رنگی رنگی کنید. اگر میخواهید پیوندها را رنگی کنید، میتوانید از .link-*
کلاسهای کمکی که دارای :hover
و :focus
حالت هستند استفاده کنید.
.text-primary
.text-secondary
.text-موفقیت
.متن خطر
متن هشدار
متن-اطلاعات
.text-light
.text-dark
.text-body
متن قطع شده است
متن-سفید
.text-black-50
.text-white-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 منسوخ می شوند. آنها در نسخه 6.0.0 حذف خواهند شد.
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hidden
کلاس، گنجانده شده است.
کدورت
اضافه شده در نسخه 5.1.0
از نسخه 5.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
اکنون استفاده می کنید، مقدار محاسبه شده شما color
برابر است با rgba(13, 110, 253, 1)
. متغیر CSS محلی در داخل هر .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;
نقشه
سپس رنگهای تم در نقشه Sass قرار میگیرند تا بتوانیم روی آنها حلقه بزنیم تا برنامههای کاربردی، اصلاحکنندههای مؤلفه و موارد دیگر را تولید کنیم.
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
رنگ های خاکستری نیز به عنوان نقشه Sass در دسترس هستند. این نقشه برای تولید هیچ گونه برنامه کاربردی استفاده نمی شود.
$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");
Utilities API
ابزارهای رنگی در API ابزارهای ما در اعلان شده اند scss/_utilities.scss
. با نحوه استفاده از Utilities 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
)
),