Χρωματιστά

Χρωματιστά

Χρωματίστε το κείμενο με βοηθητικά προγράμματα χρωμάτων. Εάν θέλετε να χρωματίσετε συνδέσμους, μπορείτε να χρησιμοποιήσετε τις .link-*βοηθητικές κλάσεις που έχουν :hoverκαι :focusκαταστάσεις.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Αδιαφάνεια

Από την έκδοση 5.1.0, τα βοηθητικά προγράμματα χρωμάτων κειμένου δημιουργούνται με το Sass χρησιμοποιώντας μεταβλητές CSS. Αυτό επιτρέπει αλλαγές χρωμάτων σε πραγματικό χρόνο χωρίς μεταγλώττιση και δυναμικές αλλαγές διαφάνειας άλφα.

Πως δουλεύει

Εξετάστε το προεπιλεγμένο μας .text-primaryβοηθητικό πρόγραμμα.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Χρησιμοποιούμε μια έκδοση RGB της μεταβλητής CSS --bs-primary(με την τιμή 13, 110, 253) και επισυνάπτουμε μια δεύτερη μεταβλητή CSS, --bs-text-opacity, για τη διαφάνεια άλφα (με μια προεπιλεγμένη τιμή 1χάρη σε μια τοπική μεταβλητή CSS). Αυτό σημαίνει ότι όποτε χρησιμοποιείτε .text-primaryτώρα, η υπολογισμένη colorτιμή σας είναι rgba(13, 110, 253, 1). Η τοπική μεταβλητή CSS μέσα σε κάθε .text-*κλάση αποφεύγει ζητήματα κληρονομικότητας, έτσι ώστε οι ένθετες παρουσίες των βοηθητικών προγραμμάτων να μην έχουν αυτόματα τροποποιημένη διαφάνεια άλφα.

Παράδειγμα

Για να αλλάξετε αυτήν την αδιαφάνεια, παρακάμψτε --bs-text-opacityμέσω προσαρμοσμένων στυλ ή ενσωματωμένων στυλ.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Ή, επιλέξτε από οποιοδήποτε από τα .text-opacityβοηθητικά προγράμματα:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Ιδιαιτερότητα

Μερικές φορές οι κλάσεις συμφραζομένων δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Σε ορισμένες περιπτώσεις, μια επαρκής λύση είναι να αναδιπλώσετε το περιεχόμενο του στοιχείου σας σε ένα <div>ή περισσότερο σημασιολογικό στοιχείο με την επιθυμητή κλάση.

Sass

Εκτός από την παρακάτω λειτουργικότητα Sass, εξετάστε το ενδεχόμενο να διαβάσετε σχετικά με τις προσαρμοσμένες ιδιότητες CSS που περιλαμβάνονται (γνωστές και ως μεταβλητές CSS) για χρώματα και πολλά άλλα.

Μεταβλητές

Τα περισσότερα colorβοηθητικά προγράμματα δημιουργούνται από τα χρώματα του θέματός μας, τα οποία επανατοποθετούνται από τις γενικές μεταβλητές της παλέτας χρωμάτων μας.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Διατίθενται επίσης χρώματα σε κλίμακα του γκρι, αλλά μόνο ένα υποσύνολο χρησιμοποιείται για τη δημιουργία οποιωνδήποτε βοηθητικών προγραμμάτων.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Χάρτης

Στη συνέχεια, τα χρώματα θεμάτων τοποθετούνται σε έναν χάρτη Sass, ώστε να μπορούμε να τα κάνουμε βρόχο για να δημιουργήσουμε τα βοηθητικά προγράμματα, τους τροποποιητές στοιχείων και πολλά άλλα.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Τα χρώματα σε κλίμακα του γκρι είναι επίσης διαθέσιμα ως χάρτης Sass. Αυτός ο χάρτης δεν χρησιμοποιείται για τη δημιουργία βοηθητικών προγραμμάτων.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Τα χρώματα RGB δημιουργούνται από έναν ξεχωριστό χάρτη Sass:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Και οι αδιαφάνειες χρωμάτων βασίζονται σε αυτό με τον δικό τους χάρτη που καταναλώνεται από το API βοηθητικών προγραμμάτων:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Utilities API

Τα βοηθητικά προγράμματα χρώματος δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),