in English

Theming Bootstrap

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

מבוא

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

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

סאס

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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 כולל את !defaultהדגל המאפשר לך לעקוף את ערך ברירת המחדל של המשתנה ב-Sass משלך מבלי לשנות את קוד המקור של Bootstrap. העתק והדבק משתנים לפי הצורך, שנה את הערכים שלהם והסר את !defaultהדגל. אם משתנה כבר הוקצה, אז הוא לא יוקצה מחדש על ידי ערכי ברירת המחדל ב-Bootstrap.

תוכל למצוא את הרשימה המלאה של המשתנים של Bootstrap ב scss/_variables.scss. משתנים מסוימים מוגדרים ל- null, משתנים אלה אינם מוציאים את המאפיין אלא אם כן הם מוחקים בתצורה שלך.

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

להלן דוגמה שמשנה את ה- background-colorו colorעבור <body>בעת ייבוא ​​והידור Bootstrap באמצעות npm:

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

חזור לפי הצורך עבור כל משתנה ב-Bootstrap, כולל האפשרויות הגלובליות למטה.

התחל עם Bootstrap דרך npm עם פרויקט ההתחלה שלנו! עבור אל מאגר התבניות twbs/bootstrap-npm-starter כדי לראות כיצד לבנות ולהתאים אישית את Bootstrap בפרויקט npm משלך. כולל מהדר Sass, Autoprefixer, Stylelint, PurgeCSS וסמלים של 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`
}

בריחה מ-SVG

אנו משתמשים escape-svgבפונקציה כדי להימלט מה- <, >והתווים #עבור תמונות רקע SVG. יש צורך ב-escape של תווים אלה כדי להציג כראוי את תמונות הרקע ב-IE. בעת שימוש escape-svgבפונקציה, יש לצטט כתובות URI של נתונים.

פונקציות הוספה וחיסור

אנו משתמשים בפונקציות addו subtractכדי לעטוף את calcפונקציית ה-CSS. המטרה העיקרית של פונקציות אלו היא למנוע שגיאות כאשר 0ערך "יחידה" מועבר calcלביטוי. ביטויים כמו calc(10px - 0)יחזירו שגיאה בכל הדפדפנים, למרות שהם נכונים מבחינה מתמטית.

דוגמה שבה החשבון תקף:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

דוגמה שבה ה-calc אינו חוקי:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

אפשרויות סאס

התאם אישית את 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סגנונות דקורטיביים מוגדרים מראש על רכיבים שונים. לא משפיע על box-shadows המשמש למצבי מיקוד.
$enable-gradients trueאו false(ברירת מחדל) מאפשר מעברי צבע מוגדרים מראש באמצעות background-imageסגנונות ברכיבים שונים.
$enable-transitions true(ברירת מחדל) אוfalse מאפשר transitions מוגדרים מראש ברכיבים שונים.
$enable-prefers-reduced-motion-media-query true(ברירת מחדל) אוfalse מפעיל את prefers-reduced-motionשאילתת המדיה , המדכאת אנימציות/מעברים מסוימים בהתבסס על העדפות הדפדפן/מערכת ההפעלה של המשתמשים.
$enable-hover-media-query trueאו false(ברירת מחדל) הוצא משימוש
$enable-grid-classes true(ברירת מחדל) אוfalse מאפשר יצירת מחלקות CSS עבור מערכת הרשת (למשל, .container, .row, .col-md-1וכו').
$enable-caret true(ברירת מחדל) אוfalse מפעיל אלמנט פסאודו ב- .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(ברירת מחדל) אוfalse הוסף סמן "יד" לרכיבי כפתור שאינם מושבתים.
$enable-print-styles true(ברירת מחדל) אוfalse מאפשר סגנונות לייעול הדפסה.
$enable-responsive-font-sizes trueאו false(ברירת מחדל) מאפשר גדלי גופנים רספונסיביים .
$enable-validation-icons true(ברירת מחדל) אוfalse מאפשר background-imageסמלים בתוך קלט טקסטואלי וכמה טפסים מותאמים אישית למצבי אימות.
$enable-deprecation-messages true(ברירת מחדל) אוfalse הגדר כדי falseלהסתיר אזהרות בעת שימוש בכל אחד מהמיקסים והפונקציות שהוצאו משימוש שמתוכננים להסיר ב v5.

צֶבַע

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

כל הצבעים

כל הצבעים הזמינים ב-Bootstrap 4, זמינים כמשתני Sass ומפת Sass scss/_variables.scssבקובץ. זה יורחב במהדורות קטנות שלאחר מכן כדי להוסיף גוונים נוספים, בדומה לפלטת גווני האפור שאנו כבר כוללים.

$כחול #007bff
$אינדיגו #6610f2
$סגול #6f42c1
$ורוד #e83e8c
$אדום #dc3545
כתום $ #fd7e14
$ צהוב #ffc107
$ירוק #28a745
$teal #20c997
$ציאן #17a2b8

כך תוכל להשתמש באלו ב-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בקובץ של Bootstrap.

$primary #007bff
$ משני #6c757d
$הצלחה #28a745
$סכנה #dc3545
$ אזהרה #ffc107
$מידע #17a2b8
$אור #f8f9fa
$כהה #343a40

אפורים

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

$ אפור-100 #f8f9fa
$ אפור-200 #e9ecef
$ אפור-300 #dee2e6
$ אפור-400 #ced4da
$ אפור-500 #adb5bd
$ אפור-600 #6c757d
$ אפור-700 #495057
$ אפור-800 #343a40
$ אפור-900 #212529

בתוך 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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --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);
  }
}