ಬಣ್ಣ ಮತ್ತು ಹಿನ್ನೆಲೆ

ವ್ಯತಿರಿಕ್ತ ಮುಂಭಾಗದ ಬಣ್ಣದೊಂದಿಗೆ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಹೊಂದಿಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಅವಲೋಕನ

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>