ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

වර්ණය සහ පසුබිම

ප්‍රතිවිරුද්ධ පෙරබිම් වර්ණය සමඟ පසුබිම් වර්ණයක් සකසන්න.

මෙම පිටුවේ

දළ විශ්ලේෂණය

v5.2.0 හි එකතු කරන ලදී

වර්ණ සහ පසුබිම් සහායකයින් එක් පන්තියක අපගේ .text-*උපයෝගිතා සහ .bg-*උපයෝගිතා වල බලය ඒකාබද්ධ කරයි. අපගේ Sass ශ්‍රිතය භාවිතයෙන් , අපි ස්වයංක්‍රීයව විශේෂිත එකක් සඳහා color-contrast()ප්‍රතිවිරෝධතාවක් තීරණය කරමු .colorbackground-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>