Source

Theming Bootstrap

התאם אישית את Bootstrap 4 עם משתני Sass המובנים החדשים שלנו להעדפות סגנון גלובליות לעיצוב קל ושינויי רכיבים.

מבוא

ב-Bootstrap 3, עיצוב הנושא הונע בעיקר על ידי עקיפות משתנות ב- LESS, CSS מותאם אישית וגיליון סגנונות נפרד שכללנו distבקבצים שלנו. עם קצת מאמץ, אפשר לעצב מחדש לחלוטין את המראה של Bootstrap 3 מבלי לגעת בקבצי הליבה. Bootstrap 4 מספק גישה מוכרת, אך מעט שונה.

כעת, עיצוב הנושא מתבצע על ידי משתני Sass, מפות Sass ו-CSS מותאם אישית. אין עוד גיליון סגנונות ייעודי בנושא; במקום זאת, תוכל להפעיל את ערכת הנושא המובנית כדי להוסיף מעברי צבע, צללים ועוד.

סאס

השתמש בקובצי המקור של Sass כדי לנצל משתנים, מפות, מיקסים ועוד.

מבנה הקובץ

במידת האפשר, הימנע משינוי קבצי הליבה של 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.

תוכל למצוא את הרשימה המלאה של המשתנים של Bootstrap ב scss/_variables.scss.

עקיפות משתנים בתוך אותו קובץ 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. שים לב שעליך להכניס אותו בין הדרישות והאפשרויות שלנו:

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

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

מפתחות נדרשים

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

לדוגמה, אנו משתמשים במקשים primary, success, ו- מ עבור קישורים, לחצנים ומצבי טופס. החלפת הערכים של המפתחות הללו לא אמורה להציג בעיות, אך הסרתם עלולה לגרום לבעיות הידור של Sass. במקרים אלה, תצטרך לשנות את קוד Sass שעושה שימוש בערכים אלה.danger$theme-colors

פונקציות

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) בהתבסס על צבע הבסיס שצוין. פונקציה זו שימושית במיוחד עבור mixins או לולאות שבהן אתה יוצר מחלקות מרובות.

לדוגמה, כדי ליצור דוגמיות צבע $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`
}

אפשרויות סאס

התאם אישית את Bootstrap 4 עם קובץ המשתנים המותאמים אישית המובנה שלנו והחלף בקלות העדפות CSS גלובליות עם $enable-*משתני Sass חדשים. עוקף ערך של משתנה והידור מחדש npm run testלפי הצורך.

אתה יכול למצוא ולהתאים אישית משתנים אלה עבור אפשרויות עיקריות גלובליות scss/_variables.scssבקובץ של Bootstrap.

מִשְׁתַנֶה ערכים תיאור
$spacer 1rem(ברירת מחדל), או כל ערך > 0 מציין את ערך ה-spacer המוגדר כברירת מחדל ליצירת תוכניות ה- spacer שלנו .
$enable-rounded true(ברירת מחדל) אוfalse מאפשר border-radiusסגנונות מוגדרים מראש ברכיבים שונים.
$enable-shadows trueאו false(ברירת מחדל) מאפשר box-shadowסגנונות מוגדרים מראש ברכיבים שונים.
$enable-gradients trueאו false(ברירת מחדל) מאפשר מעברי צבע מוגדרים מראש באמצעות background-imageסגנונות ברכיבים שונים.
$enable-transitions true(ברירת מחדל) אוfalse מאפשר transitions מוגדרים מראש ברכיבים שונים.
$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בקובץ של Bootstraps.

יְסוֹדִי
מִשׁנִי
הַצלָחָה
סַכָּנָה
אַזהָרָה
מידע
אוֹר
אפל

אפורים

קבוצה נרחבת של משתנים אפורים ומפת Sass scss/_variables.scssעבור גוונים עקביים של אפור בכל הפרויקט שלך.

100
200
300
400
500
600
700
800
900

בתוך scss/_variables.scss, תמצאו את משתני הצבע של Bootstrap ואת מפת 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 של הדפדפן, ארגז חול של קוד או אב טיפוס כללי.

משתנים זמינים

להלן המשתנים שאנו כוללים (שימו לב שה- :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);
}

משתני נקודת שבירה

אמנם כללנו במקור נקודות עצירה במשתני ה-CSS שלנו (למשל, --breakpoint-md), אלה אינם נתמכים בשאילתות מדיה , אך עדיין ניתן להשתמש בהן בתוך ערכות כללים בשאילתות מדיה. משתני נקודת עצירה אלו נשארים ב-CSS המהודר עבור תאימות לאחור בהינתן שניתן להשתמש בהם על ידי JavaScript. למידע נוסף במפרט.

הנה דוגמה למה שלא נתמך:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

והנה דוגמה למה שנתמך:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}