ფერი და ფონი

დააყენეთ ფონის ფერი კონტრასტული წინა პლანზე.

ამ გვერდზე

მიმოხილვა

დამატებულია v5.2.0-ში

ფერისა და ფონის დამხმარეები აერთიანებს ჩვენი .text-*კომუნალური და .bg-*კომუნალური საშუალებების ძალას ერთ კლასში. ჩვენი Sass color-contrast()ფუნქციის გამოყენებით, ჩვენ ავტომატურად ვადგენთ კონტრასტს colorკონკრეტულისთვის background-color.

Თავები მაღლა! ამჟამად არ არის მხარდაჭერა CSS-ის მშობლიური color-contrastფუნქციისთვის, ამიტომ ჩვენ ვიყენებთ საკუთარს Sass-ის საშუალებით. ეს ნიშნავს, რომ ჩვენი თემის ფერების მორგება CSS ცვლადების საშუალებით შეიძლება გამოიწვიოს ფერების კონტრასტის პრობლემები ამ უტილიტებთან.

პირველადი კონტრასტული ფერით

მეორადი კონტრასტული ფერით

წარმატება კონტრასტული ფერით

საფრთხე კონტრასტული ფერებით

გაფრთხილება კონტრასტული ფერებით

ინფორმაცია კონტრასტული ფერებით

მსუბუქი კონტრასტული ფერით

მუქი კონტრასტული ფერით

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

კომპონენტებით

გამოიყენეთ ისინი კომბინირებული .text-*და .bg-*კლასების ნაცვლად, მაგალითად, ბეჯებზე :

პირველადი ინფორმაცია

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

ან ბარათებზე :

სათაური

რამდენიმე სწრაფი მაგალითი ტექსტი, რომელიც დაეყრდნობა ბარათის სათაურს და შეადგინოს ბარათის შიგთავსის ძირითადი ნაწილი.

სათაური

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>