ពណ៌ & ផ្ទៃខាងក្រោយ

កំណត់ពណ៌ផ្ទៃខាងក្រោយជាមួយនឹងពណ៌ផ្ទៃខាងមុខផ្ទុយគ្នា។

នៅលើទំព័រនេះ។

ទិដ្ឋភាពទូទៅ

បានបន្ថែមនៅក្នុង v5.2.0

អ្នកជំនួយពណ៌ និងផ្ទៃខាងក្រោយរួមបញ្ចូលគ្នានូវថាមពលនៃ .text-*ឧបករណ៍ប្រើប្រាស់ និង .bg-*ឧបករណ៍ ប្រើប្រាស់របស់យើង ក្នុងថ្នាក់តែមួយ។ ដោយប្រើមុខងារ Sass របស់ color-contrast()យើង យើងកំណត់ភាពផ្ទុយគ្នាដោយស្វ័យប្រវត្តិ colorសម្រាប់ជាក់លាក់ណាមួយ background-color។

ព្រឺក្បាល! បច្ចុប្បន្នមិនមានការគាំទ្រសម្រាប់មុខងារ CSS-native 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>