API של כלי שירות

ה-API של השירות הוא כלי מבוסס Sass ליצירת מחלקות שירות.

בעמוד זה

כלי עזר Bootstrap נוצרים עם ה-API של השירות שלנו וניתן להשתמש בהם כדי לשנות או להרחיב את ערכת ברירת המחדל שלנו של מחלקות שירות באמצעות Sass. ה-API של השירות שלנו מבוסס על סדרה של מפות ופונקציות של Sass ליצירת משפחות של מחלקות עם אפשרויות שונות. אם אינך מכיר את מפות Sass, קרא את המסמכים הרשמיים של Sass כדי להתחיל.

המפה מכילה את $utilitiesכל כלי השירות שלנו ומתמזגת מאוחר יותר עם $utilitiesהמפה המותאמת אישית שלך, אם קיימת. מפת השירות מכילה רשימה מסודרת של קבוצות שירות המקבלות את האפשרויות הבאות:

אוֹפְּצִיָה	סוּג	תיאור
`property`	נדרש	שם המאפיין, זה יכול להיות מחרוזת או מערך של מחרוזות (למשל, ריפודים או שוליים אופקיים).
`values`	נדרש	רשימת ערכים, או מפה אם אינך רוצה ששם המחלקה יהיה זהה לערך. אם `null`הוא משמש כמפתח מפה, הוא אינו מורכב.
`class`	אופציונאלי	משתנה עבור שם המחלקה אם אינך רוצה שהוא יהיה זהה למאפיין. במקרה שלא תספק את `class`המפתח `property`והמפתח הוא מערך של מחרוזות, שם המחלקה יהיה האלמנט הראשון של `property`המערך.
`state`	אופציונאלי	רשימה של גרסאות פסאודו-קלאס כמו `:hover`או `:focus`ליצירת עבור כלי השירות. אין ערך ברירת מחדל.
`responsive`	אופציונאלי	בוליאנית המציינת אם יש ליצור מחלקות רספונסיביות. `false`כברירת מחדל.
`rfs`	אופציונאלי	בוליאנית כדי לאפשר שינוי קנה מידה של נוזל. עיין בדף RFS כדי לגלות איך זה עובד. `false`כברירת מחדל.
`print`	אופציונאלי	בוליאנית המציינת אם יש ליצור מחלקות הדפסה. `false`כברירת מחדל.
`rtl`	אופציונאלי	בוליאנית המציינת אם יש לשמור את השירות ב-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-*כלי השירות ל-oldish .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כלי השירות שלנו, צור a $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 .