رنگ و پس زمینه

رنگ پس زمینه را با رنگ پیش زمینه متضاد تنظیم کنید.

در این صفحه

بررسی اجمالی

اضافه شده در نسخه 5.2.0

کمک‌کنندگان رنگ و پس‌زمینه قدرت ابزارها و ابزارهای ما را .text-*در یک .bg-*کلاس ترکیب می‌کنند. با استفاده از تابع Sass color-contrast()، ما به طور خودکار یک کنتراست colorرا برای یک خاص مشخص background-colorمی کنیم.

سر بالا! در حال حاضر هیچ پشتیبانی برای یک color-contrastتابع بومی CSS وجود ندارد، بنابراین ما از تابع خود از طریق 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>