Ιστορικό
Μεταφέρετε νόημα background-colorκαι προσθέστε διακόσμηση με διαβαθμίσεις.
Χρώμα του φόντου
Παρόμοια με τις κατηγορίες χρωμάτων κειμένου με βάση τα συμφραζόμενα, ορίστε το φόντο ενός στοιχείου σε οποιαδήποτε κλάση με βάση τα συμφραζόμενα. Τα βοηθητικά προγράμματα φόντου δεν ορίζονταιcolor , επομένως σε ορισμένες περιπτώσεις θα θέλετε να χρησιμοποιήσετε .text-* βοηθητικά προγράμματα χρώματος .
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Κλίση φόντου
Με την προσθήκη μιας .bg-gradientκλάσης, μια γραμμική κλίση προστίθεται ως εικόνα φόντου στα φόντο. Αυτή η κλίση ξεκινά με ένα ημιδιαφανές λευκό που ξεθωριάζει προς τα κάτω.
Χρειάζεστε μια κλίση στο προσαρμοσμένο CSS σας; Απλώς προσθέστε background-image: var(--bs-gradient);.
Αδιαφάνεια
Προστέθηκε στην έκδοση 5.1.0
Από την έκδοση 5.1.0, background-colorτα βοηθητικά προγράμματα δημιουργούνται με το Sass χρησιμοποιώντας μεταβλητές CSS. Αυτό επιτρέπει αλλαγές χρωμάτων σε πραγματικό χρόνο χωρίς μεταγλώττιση και δυναμικές αλλαγές διαφάνειας άλφα.
Πως δουλεύει
Εξετάστε το προεπιλεγμένο μας .bg-successβοηθητικό πρόγραμμα.
.bg-success {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
Χρησιμοποιούμε μια έκδοση RGB της μεταβλητής CSS --bs-success(με την τιμή 25, 135, 84) και επισυνάπτουμε μια δεύτερη μεταβλητή CSS, --bs-bg-opacity, για τη διαφάνεια άλφα (με μια προεπιλεγμένη τιμή 1χάρη σε μια τοπική μεταβλητή CSS). Αυτό σημαίνει ότι όποτε χρησιμοποιείτε .bg-successτώρα, η υπολογισμένη colorτιμή σας είναι rgba(25, 135, 84, 1). Η τοπική μεταβλητή CSS μέσα σε κάθε .bg-*κλάση αποφεύγει ζητήματα κληρονομικότητας, έτσι ώστε οι ένθετες παρουσίες των βοηθητικών προγραμμάτων να μην έχουν αυτόματα τροποποιημένη διαφάνεια άλφα.
Παράδειγμα
Για να αλλάξετε αυτήν την αδιαφάνεια, παρακάμψτε --bs-bg-opacityμέσω προσαρμοσμένων στυλ ή ενσωματωμένων στυλ.
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>Ή, επιλέξτε από οποιοδήποτε από τα .bg-opacityβοηθητικά προγράμματα:
<div class="bg-success p-2 text-white">This is default success background</div>
<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>Sass
Εκτός από την παρακάτω λειτουργικότητα Sass, εξετάστε το ενδεχόμενο να διαβάσετε σχετικά με τις προσαρμοσμένες ιδιότητες CSS που περιλαμβάνονται (γνωστές και ως μεταβλητές CSS) για χρώματα και πολλά άλλα.
Μεταβλητές
Τα περισσότερα background-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;
$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
Διατίθενται επίσης χρώματα σε κλίμακα του γκρι, αλλά μόνο ένα υποσύνολο χρησιμοποιείται για τη δημιουργία οποιωνδήποτε βοηθητικών προγραμμάτων.
$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-bg: map-merge(
$utilities-colors,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-bg)
)
);
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg");
Μίξεις
Δεν χρησιμοποιούνται μίξεις για τη δημιουργία βοηθητικών προγραμμάτων στο παρασκήνιο , αλλά έχουμε κάποια πρόσθετα μίξη για άλλες περιπτώσεις όπου θα θέλατε να δημιουργήσετε τις δικές σας διαβαθμίσεις.
@mixin gradient-bg($color: null) {
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
}
}
// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}
// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}
@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
background-image: linear-gradient($deg, $start-color, $end-color);
}
@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}
@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
background-image: radial-gradient(circle, $inner-color, $outer-color);
}
@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
Utilities API
Τα βοηθητικά προγράμματα παρασκηνίου δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
)
),