קאָליר & הינטערגרונט

שטעלן אַ הינטערגרונט פֿאַרב מיט קאַ��טראַסטינג פאָרגראַונד קאָלירן.

אויף דעם בלאַט

איבערבליק

צוגעגעבן אין וו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>