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.
עקיפות משתנים בתוך אותו קובץ 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, ו- מ עבור קישורים, לחצנים ומצבי טופס. החלפת הערכים של המפתחות הללו לא אמורה להציג בעיות, אך הסרתם עלולה לגרום לבעיות הידור של 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לפי הצורך.
אתה יכול למצוא ולהתאים אישית משתנים אלה עבור אפשרויות עיקריות גלובליות _variables.scssבקובץ שלנו.
| מִשְׁתַנֶה | ערכים | תיאור |
|---|---|---|
$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בקובץ שלנו.
קבוצה נרחבת של משתנים אפורים ומפת Sass scss/_variables.scssעבור גוונים עקביים של אפור בכל הפרויקט שלך.
בתוך _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, השינויים שלך יחולו על כל הלולאות החוזרות על המפה הזו.
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);
}אתה יכול גם להשתמש במשתני נקודת השבירה שלנו בשאילתות המדיה שלך:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}