Ფერები
გამოხატეთ მნიშვნელობა color
რამდენიმე ფერის სასარგებლო კლასებით. ასევე მოიცავს სტილის ბმულების მხარდაჭერას hover მდგომარეობებთან ერთად.
Ფერები
ტექსტის გაფერადება ფერადი კომუნალური საშუალებებით. თუ გსურთ ბმულების შეღებვა, შეგიძლიათ გამოიყენოთ .link-*
დამხმარე კლასები , რომლებსაც აქვთ :hover
და :focus
მდგომარეობები.
.ტექსტი-პირველადი
.ტექსტი-მეორადი
.ტექსტი-წარმატება
.ტექსტი-საშიშროება
.ტექსტ-გაფრთხილება
.ტექსტი-ინფორმაცია
.ტექსტი-სინათლე
.ტექსტი-ბნელი
.ტექსტი-სხეული
.ტექსტი დადუმდა
.ტექსტი-თეთრი
.ტექსტი-შავი-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-*
ტექსტური კომუნალური პროგრამებისთვის
.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;
}
--bs-primary
ჩვენ ვიყენებთ ჩვენი (მნიშვნელობით ) CSS ცვლადის RGB ვერსიას 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 პერსონალური თვისებების შესახებ (aka 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");
და ფერების გამჭვირვალობა ეფუძნება მას საკუთარი რუქით, რომელსაც იყენებს Utilities 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
ფერადი უტილიტები გამოცხადებულია ჩვენს Utilities 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
)
),