Ιστορικό
Μεταφέρετε νόημα 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);.
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
);
Μίξεις
Δεν χρησιμοποιούνται μίξεις για τη δημιουργία βοηθητικών προγραμμάτων στο παρασκήνιο , αλλά έχουμε κάποια πρόσθετα μίξη για άλλες περιπτώσεις όπου θα θέλατε να δημιουργήσετε τις δικές σας διαβαθμίσεις.
@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,
values: map-merge(
$theme-colors,
(
"body": $body-bg,
"white": $white,
"transparent": transparent
)
)
),