Өнгө ба дэвсгэр

Урд талын өнгөөр ялгаатай дэвсгэр өнгө тохируулна уу.

Энэ хуудсан дээр

Тойм

5.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>