Source

Theming Bootstrap

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

Εισαγωγή

Στο Bootstrap 3, η δημιουργία θεμάτων οδηγήθηκε σε μεγάλο βαθμό από παρακάμψεις μεταβλητών στο LESS, προσαρμοσμένο CSS και ένα ξεχωριστό φύλλο στυλ θέματος που συμπεριλάβαμε στα distαρχεία μας. Με λίγη προσπάθεια, θα μπορούσε κανείς να επανασχεδιάσει πλήρως την εμφάνιση του Bootstrap 3 χωρίς να αγγίξει τα βασικά αρχεία. Το Bootstrap 4 παρέχει μια οικεία, αλλά ελαφρώς διαφορετική προσέγγιση.

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

Sass

Χρησιμοποιήστε τα πηγαία αρχεία Sass για να επωφεληθείτε από μεταβλητές, χάρτες, mixins και πολλά άλλα.

Δομή αρχείου

Όποτε είναι δυνατόν, αποφύγετε την τροποποίηση των βασικών αρχείων του Bootstrap. Για το Sass, αυτό σημαίνει ότι δημιουργείτε το δικό σας φύλλο στυλ που εισάγει το Bootstrap, ώστε να μπορείτε να το τροποποιήσετε και να το επεκτείνετε. Υποθέτοντας ότι χρησιμοποιείτε έναν διαχειριστή πακέτων όπως το npm, θα έχετε μια δομή αρχείου που μοιάζει με αυτό:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

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

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Εισαγωγή

Στο custom.scss, θα εισαγάγετε τα πηγαία αρχεία Sass του Bootstrap. Έχετε δύο επιλογές: να συμπεριλάβετε όλο το Bootstrap ή να επιλέξετε τα εξαρτήματα που χρειάζεστε. Ενθαρρύνουμε το τελευταίο, αν και έχετε υπόψη ότι υπάρχουν ορισμένες απαιτήσεις και εξαρτήσεις στα στοιχεία μας. Θα χρειαστεί επίσης να συμπεριλάβετε κάποια JavaScript για τις προσθήκες μας.

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Με αυτήν τη ρύθμιση, μπορείτε να αρχίσετε να τροποποιείτε οποιαδήποτε από τις μεταβλητές και τους χάρτες Sass στο custom.scss. Μπορείτε επίσης να αρχίσετε να προσθέτετε τμήματα του Bootstrap κάτω από την // Optionalενότητα όπως απαιτείται. Προτείνουμε να χρησιμοποιήσετε την πλήρη στοίβα εισαγωγής από το bootstrap.scssαρχείο μας ως σημείο εκκίνησης.

Μεταβλητές προεπιλογές

Κάθε μεταβλητή Sass στο Bootstrap 4 περιλαμβάνει τη !defaultσημαία που σας επιτρέπει να παρακάμψετε την προεπιλεγμένη τιμή της μεταβλητής στο δικό σας Sass χωρίς να τροποποιήσετε τον πηγαίο κώδικα του Bootstrap. Αντιγράψτε και επικολλήστε μεταβλητές όπως απαιτείται, τροποποιήστε τις τιμές τους και αφαιρέστε τη !defaultσημαία. Εάν μια μεταβλητή έχει ήδη εκχωρηθεί, τότε δεν θα εκχωρηθεί ξανά από τις προεπιλεγμένες τιμές στο Bootstrap.

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

Ακολουθεί ένα παράδειγμα που αλλάζει το background-colorκαι colorγια το <body>κατά την εισαγωγή και τη μεταγλώττιση του Bootstrap μέσω npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

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

Χάρτες και βρόχοι

Το Bootstrap 4 περιλαμβάνει μια χούφτα χαρτών Sass, ζεύγη βασικών τιμών που διευκολύνουν τη δημιουργία οικογενειών σχετικών CSS. Χρησιμοποιούμε χάρτες Sass για τα χρώματά μας, τα σημεία διακοπής πλέγματος και πολλά άλλα. Ακριβώς όπως οι μεταβλητές Sass, όλοι οι χάρτες Sass περιλαμβάνουν τη !defaultσημαία και μπορούν να παρακαμφθούν και να επεκταθούν.

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

Τροποποίηση χάρτη

Για να τροποποιήσετε ένα υπάρχον χρώμα στον $theme-colorsχάρτη μας, προσθέστε τα ακόλουθα στο προσαρμοσμένο αρχείο Sass:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Προσθήκη στον χάρτη

Για να προσθέσετε ένα νέο χρώμα στο $theme-colors, προσθέστε το νέο κλειδί και την τιμή:

$theme-colors: (
  "custom-color": #900
);

Αφαίρεση από τον χάρτη

Για να αφαιρέσετε χρώματα από $theme-colors, ή οποιονδήποτε άλλο χάρτη, χρησιμοποιήστε map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Απαιτούμενα κλειδιά

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

Για παράδειγμα, χρησιμοποιούμε τα κλειδιά primary, success, και dangerαπό $theme-colorsγια συνδέσμους, κουμπιά και καταστάσεις φόρμας. Η αντικατάσταση των τιμών αυτών των κλειδιών δεν θα πρέπει να παρουσιάζει προβλήματα, αλλά η κατάργησή τους μπορεί να προκαλέσει προβλήματα με τη συλλογή του Sass. Σε αυτές τις περιπτώσεις, θα χρειαστεί να τροποποιήσετε τον κώδικα Sass που χρησιμοποιεί αυτές τις τιμές.

Λειτουργίες

Το Bootstrap χρησιμοποιεί πολλές λειτουργίες Sass, αλλά μόνο ένα υποσύνολο μπορεί να εφαρμοστεί σε γενικό θέμα. Έχουμε συμπεριλάβει τρεις συναρτήσεις για τη λήψη τιμών από τους χρωματικούς χάρτες:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Αυτά σας επιτρέπουν να επιλέξετε ένα χρώμα από έναν χάρτη Sass όπως ακριβώς θα χρησιμοποιούσατε μια μεταβλητή χρώματος από το v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Έχουμε επίσης μια άλλη λειτουργία για τη λήψη ενός συγκεκριμένου επιπέδου χρώματος από τον $theme-colorsχάρτη. Οι τιμές αρνητικού επιπέδου θα φωτίσουν το χρώμα, ενώ τα υψηλότερα επίπεδα θα σκουρύνουν.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Στην πράξη, θα καλούσατε τη συνάρτηση και θα περάσατε σε δύο παραμέτρους: το όνομα του χρώματος από $theme-colors(π.χ. πρωτεύον ή επικίνδυνο) και ένα αριθμητικό επίπεδο.

.custom-element {
  color: theme-color-level(primary, -10);
}

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

Αντίθεση χρώματος

Μια επιπλέον λειτουργία που περιλαμβάνουμε στο Bootstrap είναι η λειτουργία αντίθεσης χρωμάτων, color-yiq. Χρησιμοποιεί τον χρωματικό χώρο YIQ για να επιστρέψει αυτόματα ένα ανοιχτό ( #fff) ή σκούρο ( #111) χρώμα αντίθεσης με βάση το καθορισμένο βασικό χρώμα. Αυτή η λειτουργία είναι ιδιαίτερα χρήσιμη για μίξεις ή βρόχους όπου δημιουργείτε πολλές κλάσεις.

Για παράδειγμα, για τη δημιουργία χρωματικών δειγμάτων από τον $theme-colorsχάρτη μας:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Μπορεί επίσης να χρησιμοποιηθεί για εφάπαξ ανάγκες αντίθεσης:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Μπορείτε επίσης να καθορίσετε ένα βασικό χρώμα με τις λειτουργίες χρωματικού χάρτη μας:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass επιλογές

Προσαρμόστε το Bootstrap 4 με το ενσωματωμένο αρχείο προσαρμοσμένων μεταβλητών μας και αλλάξτε εύκολα τις καθολικές προτιμήσεις CSS με νέες $enable-*μεταβλητές Sass. Αντικαταστήστε την τιμή μιας μεταβλητής και μεταγλωττίστε ξανά npm run testόπως απαιτείται.

Μπορείτε να βρείτε και να προσαρμόσετε αυτές τις μεταβλητές για βασικές καθολικές επιλογές στο _variables.scssαρχείο μας.

Μεταβλητός	Αξίες	Περιγραφή
`$spacer`	`1rem`(προεπιλογή) ή οποιαδήποτε τιμή > 0	Καθορίζει την προεπιλεγμένη τιμή διαχωριστή για τη δημιουργία προγραμματικών προγραμμάτων διαχωρισμού .
`$enable-rounded`	`true`(προεπιλογή) ή`false`	Ενεργοποιεί προκαθορισμένα `border-radius`στυλ σε διάφορα στοιχεία.
`$enable-shadows`	`true`ή `false`(προεπιλογή)	Ενεργοποιεί προκαθορισμένα `box-shadow`στυλ σε διάφορα στοιχεία.
`$enable-gradients`	`true`ή `false`(προεπιλογή)	Ενεργοποιεί προκαθορισμένες διαβαθμίσεις μέσω `background-image`στυλ σε διάφορα στοιχεία.
`$enable-transitions`	`true`(προεπιλογή) ή`false`	Ενεργοποιεί προκαθορισμένα `transition`s σε διάφορα στοιχεία.
`$enable-hover-media-query`	`true`ή `false`(προεπιλογή)	Καταργήθηκε
`$enable-grid-classes`	`true`(προεπιλογή) ή`false`	Επιτρέπει τη δημιουργία κλάσεων CSS για το σύστημα πλέγματος (π.χ., `.container`, `.row`, `.col-md-1`, κ.λπ.).
`$enable-caret`	`true`(προεπιλογή) ή`false`	Ενεργοποιεί το ψευδοστοιχείο στο `.dropdown-toggle`.
`$enable-print-styles`	`true`(προεπιλογή) ή`false`	Ενεργοποιεί στυλ για βελτιστοποίηση της εκτύπωσης.

Χρώμα

Πολλά από τα διάφορα στοιχεία και βοηθητικά προγράμματα του Bootstrap δημιουργούνται μέσω μιας σειράς χρωμάτων που ορίζονται σε έναν χάρτη Sass. Αυτός ο χάρτης μπορεί να επαναληφθεί στο Sass για να δημιουργήσει γρήγορα μια σειρά από σύνολα κανόνων.

Ολα τα ΧΡΩΜΑΤΑ

Όλα τα χρώματα που είναι διαθέσιμα στο Bootstrap 4, είναι διαθέσιμα ως μεταβλητές Sass και ως χάρτης Sass στο scss/_variables.scssαρχείο μας. Αυτό θα επεκταθεί σε επόμενες μικρές εκδόσεις για να προσθέσετε επιπλέον αποχρώσεις, όπως η παλέτα κλίμακας του γκρι που ήδη περιλαμβάνουμε.

Μπλε

Ινδικό

Μωβ

Ροζ

το κόκκινο

Πορτοκάλι

Κίτρινος

Πράσινος

Βάσκας

κυανό

Δείτε πώς μπορείτε να τα χρησιμοποιήσετε στο Sass σας:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Διατίθενται επίσης κατηγορίες βοηθητικών χρωμάτωνcolor για ρύθμιση και background-color.

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

Χρώματα θέματος

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

Πρωταρχικός

Δευτερεύων

Επιτυχία

Κίνδυνος

Προειδοποίηση

Πληροφορίες

Φως

Σκοτάδι

Γκρι

Ένα εκτεταμένο σύνολο γκρι μεταβλητών και ένας χάρτης Sass scss/_variables.scssγια σταθερές αποχρώσεις του γκρι σε όλο το έργο σας.

100

200

300

400

500

600

700

800

900

Μέσα _variables.scssστο , θα βρείτε τις μεταβλητές χρώματος και τον χάρτη Sass. Ακολουθεί ένα παράδειγμα του $colorsχάρτη Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Προσθέστε, αφαιρέστε ή τροποποιήστε τιμές εντός του χάρτη για να ενημερώσετε τον τρόπο χρήσης τους σε πολλά άλλα στοιχεία. Δυστυχώς αυτή τη στιγμή, δεν χρησιμοποιούν όλα τα στοιχεία αυτόν τον χάρτη Sass. Οι μελλοντικές ενημερώσεις θα προσπαθήσουν να το βελτιώσουν. Μέχρι τότε, σχεδιάστε να χρησιμοποιήσετε τις ${color}μεταβλητές και αυτόν τον χάρτη Sass.

Συστατικά

Πολλά από τα στοιχεία και τα βοηθητικά προγράμματα του Bootstrap είναι χτισμένα με @eachβρόχους που επαναλαμβάνονται σε έναν χάρτη Sass. Αυτό είναι ιδιαίτερα χρήσιμο για τη δημιουργία παραλλαγών ενός στοιχείου από εμάς $theme-colorsκαι τη δημιουργία παραλλαγών που αποκρίνονται για κάθε σημείο διακοπής. Καθώς προσαρμόζετε αυτούς τους χάρτες Sass και κάνετε εκ νέου μεταγλώττιση, θα βλέπετε αυτόματα τις αλλαγές σας να αντικατοπτρίζονται σε αυτούς τους βρόχους.

Τροποποιητές

Πολλά από τα στοιχεία του Bootstrap είναι κατασκευασμένα με μια προσέγγιση κλάσης βασικού τροποποιητή. Αυτό σημαίνει ότι το μεγαλύτερο μέρος του στυλ περιέχεται σε μια βασική κλάση (π.χ., .btn) ενώ οι παραλλαγές στυλ περιορίζονται σε κατηγορίες τροποποιητών (π.χ., .btn-danger). Αυτές οι κατηγορίες τροποποιητών δημιουργούνται από τον $theme-colorsχάρτη για να προσαρμόσουν τον αριθμό και το όνομα των κατηγοριών τροποποιητών μας.

Ακολουθούν δύο παραδείγματα του τρόπου με τον οποίο κάνουμε βρόχο στον $theme-colorsχάρτη για να δημιουργήσουμε τροποποιητές στο .alertστοιχείο και σε όλα τα .bg-*βοηθητικά προγράμματα στο παρασκήνιο.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Ευαίσθητος

Αυτοί οι βρόχοι Sass δεν περιορίζονται επίσης στους έγχρωμους χάρτες. Μπορείτε επίσης να δημιουργήσετε παραλλαγές απόκρισης των στοιχείων ή των βοηθητικών προγραμμάτων σας. Πάρτε για παράδειγμα τα βοηθητικά προγράμματα ευθυγράμμισης κειμένου που αποκρίνονται, όπου αναμιγνύουμε έναν @eachβρόχο για τον $grid-breakpointsχάρτη Sass με ένα ερώτημα πολυμέσων που περιλαμβάνει.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Εάν χρειαστεί να τροποποιήσετε το $grid-breakpoints, οι αλλαγές σας θα εφαρμοστούν σε όλους τους βρόχους που επαναλαμβάνονται σε αυτόν τον χάρτη.

Μεταβλητές CSS

Το Bootstrap 4 περιλαμβάνει περίπου δύο δωδεκάδες προσαρμοσμένες ιδιότητες (μεταβλητές) CSS στο μεταγλωττισμένο CSS του. Αυτά παρέχουν εύκολη πρόσβαση σε τιμές που χρησιμοποιούνται συνήθως, όπως τα χρώματα θέματος, τα σημεία διακοπής και οι κύριες στοίβες γραμματοσειρών όταν εργάζεστε στο Inspector του προγράμματος περιήγησής σας, σε ένα sandbox κώδικα ή γενικά πρωτότυπα.

Διαθέσιμες μεταβλητές

Εδώ είναι οι μεταβλητές που συμπεριλαμβάνουμε (σημειώστε ότι :rootαπαιτείται). Βρίσκονται στο _root.scssαρχείο μας.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Παραδείγματα

Οι μεταβλητές CSS προσφέρουν παρόμοια ευελιξία με τις μεταβλητές του Sass, αλλά χωρίς την ανάγκη μεταγλώττισης πριν από την προβολή τους στο πρόγραμμα περιήγησης. Για παράδειγμα, εδώ επαναφέρουμε τη γραμματοσειρά και τα στυλ συνδέσμων της σελίδας μας με μεταβλητές CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Μπορείτε επίσης να χρησιμοποιήσετε τις μεταβλητές του σημείου διακοπής στα ερωτήματά σας για τα μέσα:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}