Utility API

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

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

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

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

Επιλογή	Τύπος	Περιγραφή
`property`	Απαιτείται	Το όνομα της ιδιότητας, αυτό μπορεί να είναι μια συμβολοσειρά ή μια σειρά από συμβολοσειρές (π.χ. οριζόντιες επενδύσεις ή περιθώρια).
`values`	Απαιτείται	Λίστα τιμών ή χάρτης εάν δεν θέλετε το όνομα της τάξης να είναι ίδιο με την τιμή. Εάν `null`χρησιμοποιείται ως κλειδί χάρτη, δεν γίνεται μεταγλώττιση.
`class`	Προαιρετικός	Μεταβλητή για το όνομα της κλάσης εάν δεν θέλετε να είναι ίδιο με την ιδιότητα. Σε περίπτωση που δεν παρέχετε το `class`κλειδί και το `property`κλειδί είναι ένας πίνακας συμβολοσειρών, το όνομα της κλάσης θα είναι το πρώτο στοιχείο του `property`πίνακα.
`state`	Προαιρετικός	Λίστα παραλλαγών ψευδο-κλάσης όπως `:hover`ή `:focus`για δημιουργία για το βοηθητικό πρόγραμμα. Καμία προεπιλεγμένη τιμή.
`responsive`	Προαιρετικός	Boolean που υποδεικνύει εάν πρέπει να δημιουργηθούν κλάσεις απόκρισης. `false`από προεπιλογή.
`rfs`	Προαιρετικός	Boolean για να επιτρέψει την επανακλιμάκωση υγρού. Ρίξτε μια ματιά στη σελίδα RFS για να μάθετε πώς λειτουργεί αυτό. `false`από προεπιλογή.
`print`	Προαιρετικός	Boolean που υποδεικνύει εάν πρέπει να δημιουργηθούν κλάσεις εκτύπωσης. `false`από προεπιλογή.
`rtl`	Προαιρετικός	Boolean που υποδεικνύει εάν το βοηθητικό πρόγραμμα πρέπει να διατηρηθεί σε RTL. `true`από προεπιλογή.

Το API εξηγείται

Όλες οι μεταβλητές βοηθητικού προγράμματος προστίθενται στη $utilitiesμεταβλητή στο _utilities.scssφύλλο στυλ μας. Κάθε ομάδα βοηθητικών προγραμμάτων μοιάζει με αυτό:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Το οποίο βγάζει τα εξής:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Προσαρμοσμένο πρόθεμα κλάσης

Χρησιμοποιήστε την classεπιλογή για να αλλάξετε το πρόθεμα κλάσης που χρησιμοποιείται στο μεταγλωττισμένο CSS:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Παραγωγή:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

κράτη

Χρησιμοποιήστε την stateεπιλογή για να δημιουργήσετε παραλλαγές ψευδο-κλάσης. Παραδείγματα ψευδο-τάξεων είναι :hoverκαι :focus. Όταν παρέχεται μια λίστα καταστάσεων, δημιουργούνται ονόματα κλάσεων για αυτήν την ψευδο-κλάση. Για παράδειγμα, για να αλλάξετε την αδιαφάνεια στο δείκτη του ποντικιού, προσθέστε state: hoverκαι θα μεταβείτε .opacity-hover:hoverστο μεταγλωττισμένο CSS.

Χρειάζεστε πολλαπλές ψευδο-τάξεις; Χρησιμοποιήστε μια λίστα καταστάσεων διαχωρισμένη με διάστημα: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Παραγωγή:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Αποκριτικά βοηθητικά προγράμματα

Προσθέστε το responsiveboolean για να δημιουργήσετε βοηθητικά προγράμματα με απόκριση (π.χ. .opacity-md-25) σε όλα τα σημεία διακοπής .

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Παραγωγή:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Αλλαγή βοηθητικών προγραμμάτων

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

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Βοηθητικά προγράμματα εκτύπωσης

Η ενεργοποίηση της printεπιλογής θα δημιουργήσει επίσης κατηγορίες βοηθητικών προγραμμάτων για εκτύπωση, οι οποίες εφαρμόζονται μόνο στο @media print { ... }ερώτημα πολυμέσων.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

Παραγωγή:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Σημασια

Όλα τα βοηθητικά προγράμματα που δημιουργούνται από το API περιλαμβάνουν !importantτη διασφάλιση ότι παρακάμπτουν τα στοιχεία και τις κατηγορίες τροποποιητών όπως προβλέπεται. Μπορείτε να αλλάξετε αυτήν τη ρύθμιση καθολικά με τη $enable-important-utilitiesμεταβλητή (προεπιλογή σε true).

Χρησιμοποιώντας το API

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

Προσθήκη βοηθητικών προγραμμάτων

Μπορούν να προστεθούν νέα βοηθητικά προγράμματα στον προεπιλεγμένο $utilitiesχάρτη με ένα map-merge. Βεβαιωθείτε ότι τα απαιτούμενα αρχεία Sass _utilities.scssέχουν εισαχθεί πρώτα και, στη συνέχεια, χρησιμοποιήστε το map-mergeγια να προσθέσετε τα πρόσθετα βοηθητικά προγράμματα. Για παράδειγμα, δείτε πώς μπορείτε να προσθέσετε ένα cursorβοηθητικό πρόγραμμα που αποκρίνεται με τρεις τιμές.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Τροποποίηση βοηθητικών προγραμμάτων

Τροποποιήστε τα υπάρχοντα βοηθητικά προγράμματα στον προεπιλεγμένο $utilitiesχάρτη με map-getκαι map-mergeλειτουργίες. Στο παρακάτω παράδειγμα, προσθέτουμε μια επιπλέον αξία στα widthβοηθητικά προγράμματα. Ξεκινήστε με ένα αρχικό map-mergeκαι, στη συνέχεια, καθορίστε ποιο βοηθητικό πρόγραμμα θέλετε να τροποποιήσετε. Από εκεί, ανακτήστε τον ένθετο "width"χάρτη με map-getγια να αποκτήσετε πρόσβαση και να τροποποιήσετε τις επιλογές και τις τιμές του βοηθητικού προγράμματος.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

Ενεργοποίηση απόκρισης

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

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

Αυτό θα δημιουργήσει τώρα παραλλαγές απόκρισης .borderκαι .border-0για κάθε σημείο διακοπής. Το CSS που δημιουργήσατε θα μοιάζει με αυτό:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Μετονομασία βοηθητικών προγραμμάτων

Λείπουν βοηθητικά προγράμματα v4 ή έχετε συνηθίσει σε άλλη σύμβαση ονομασίας; Το API βοηθητικών προγραμμάτων μπορεί να χρησιμοποιηθεί για να παρακάμψει το αποτέλεσμα classενός δεδομένου βοηθητικού προγράμματος—για παράδειγμα, για να μετονομάσετε .ms-*τα βοηθητικά προγράμματα σε παλιό .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

Κατάργηση βοηθητικών προγραμμάτων

Καταργήστε οποιοδήποτε από τα προεπιλεγμένα βοηθητικά προγράμματα ρυθμίζοντας το κλειδί ομάδας σε null. Για παράδειγμα, για να καταργήσετε όλα τα widthβοηθητικά προγράμματα, δημιουργήστε ένα $utilities map-mergeκαι προσθέστε "width": nullμέσα.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

Κατάργηση βοηθητικού προγράμματος στο RTL

Ορισμένες θήκες άκρων κάνουν το στυλ RTL δύσκολο , όπως οι αλλαγές γραμμής στα αραβικά. Έτσι, τα βοηθητικά προγράμματα μπορούν να διαγραφούν από την έξοδο RTL ορίζοντας την rtlεπιλογή σε false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Παραγωγή:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Αυτό δεν βγάζει τίποτα στο RTL, χάρη στην οδηγία ελέγχου RTLCSSremove .