דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

רכיבים

למד כיצד ומדוע אנו בונים כמעט את כל הרכיבים שלנו בצורה רספונסיבית ועם מחלקות בסיס ושינויים.

שיעורי בסיס

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

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

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

משנה

רבים מהרכיבים של Bootstrap בנויים בגישת מחלקה של בסיס-שינוי. משמעות הדבר היא שחלק הארי של הסגנון כלול במחלקה בסיסית (למשל, .btn) בעוד שווריאציות בסגנון מוגבלות למחלקות משנה (למשל, .btn-danger). מחלקות השינוי הללו בנויות $theme-colorsמהמפה כדי לבצע התאמה אישית של המספר והשם של מחלקות השינוי שלנו.

הנה שתי דוגמאות לאופן שבו אנו בלולאה על $theme-colorsהמפה כדי ליצור שינויים לרכיבים .alertו ..list-group

// Generate contextual modifier classes for colorizing the alert.

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);

  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));
  }
  .alert-#{$state} {
    @include alert-variant($alert-background, $alert-border, $alert-color);
  }
}
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

תגובה

לולאות Sass אלה אינן מוגבלות גם למפות צבעוניות. אתה יכול גם ליצור וריאציות רספונסיביות של הרכיבים שלך. קחו למשל את היישור הרספונסיבי שלנו של התפריטים הנפתחים שבהם אנו מערבבים @eachלולאה עבור $grid-breakpointsמפת Sass עם שאילתת מדיה כוללת.

// We deliberately hardcode the `bs-` prefix because we check
// this custom property in JS to determine Popper's positioning

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .dropdown-menu#{$infix}-start {
      --bs-position: start;

      &[data-bs-popper] {
        right: auto;
        left: 0;
      }
    }

    .dropdown-menu#{$infix}-end {
      --bs-position: end;

      &[data-bs-popper] {
        right: 0;
        left: auto;
      }
    }
  }
}

אם תשנה את $grid-breakpoints, השינויים שלך יחולו על כל הלולאות החוזרות על המפה הזו.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

יצירת משלך

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

זהו הסבר. בנינו אותו מותאם אישית עבור המסמכים שלנו כך שהמסרים שלנו אליך בולטים. יש לו שלוש גרסאות באמצעות מחלקות משנה.
<div class="callout">...</div>

ב-CSS שלך, יהיה לך משהו כמו הבא שבו עיקר העיצוב נעשה באמצעות .callout. לאחר מכן, הסגנונות הייחודיים בין כל וריאציה נשלטים באמצעות מחלקה משנה.

// Base class
.callout {}

// Modifier classes
.callout-info {}
.callout-warning {}
.callout-danger {}

עבור הסברים, הסטיילינג הייחודי הזה הוא רק border-left-color. כאשר אתה משלב את המחלקה הבסיסית הזו עם אחת ממחלקות השינוי האלה, אתה מקבל את משפחת הרכיבים השלמה שלך:

זהו הסבר מידע. טקסט לדוגמה כדי להציג אותו בפעולה.
זהו הסבר אזהרה. טקסט לדוגמה כדי להציג אותו בפעולה.
זהו הסבר סכנה. טקסט לדוגמה כדי להציג אותו בפעולה.