Χρώμα & φόντο

Ορίστε ένα χρώμ�� φόντου με αντίθεση χρώματος προσκηνίου.

Σε αυτήν την σελίδα

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Προστέθηκε στην έκδοση 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>