عناصر

الفئات الأساسية

تم تصميم مكونات Bootstrap إلى حد كبير باستخدام تسمية معدلة أساسية. نقوم بتجميع أكبر عدد ممكن من الخصائص المشتركة في فئة أساسية ، مثل .btn، ثم نقوم بتجميع الأنماط الفردية لكل متغير في فئات معدل ، مثل .btn-primaryأو .btn-success.

لبناء فئات التعديل الخاصة بنا ، نستخدم @eachحلقات Sass للتكرار على خريطة Sass. هذا مفيد بشكل خاص لتوليد متغيرات للمكون من خلال $theme-colorsإنشاء متغيرات سريعة الاستجابة لكل نقطة توقف. أثناء قيامك بتخصيص خرائط Sass وإعادة تجميعها ، سترى تلقائيًا تغييراتك تنعكس في هذه الحلقات.

تحقق من خرائط Sass ومستندات الحلقات الخاصة بنا لمعرفة كيفية تخصيص هذه الحلقات وتوسيع أسلوب تعديل قاعدة 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 في وثائق الشبكة .

خلق بنفسك

نحن نشجعك على اعتماد هذه الإرشادات عند الإنشاء باستخدام Bootstrap لإنشاء المكونات الخاصة بك. لقد قمنا بتوسيع هذا النهج لأنفسنا ليشمل المكونات المخصصة في وثائقنا وأمثلةنا. تم إنشاء مكونات مثل وسائل الشرح لدينا تمامًا مثل المكونات المتوفرة لدينا مع فئات القاعدة والمعدلات.

<div class="callout">...</div>

في CSS الخاص بك ، سيكون لديك شيء مشابه لما يلي حيث يتم تنفيذ الجزء الأكبر من التصميم من خلاله .callout. بعد ذلك ، يتم التحكم في الأنماط الفريدة بين كل متغير عبر فئة معدِّل.

// Base class
.callout {}

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

بالنسبة لوسائل الشرح ، هذا التصميم الفريد هو مجرد ملف border-left-color. عندما تقوم بدمج هذه الفئة الأساسية مع إحدى فئات المعدلات هذه ، تحصل على مجموعة المكونات الكاملة الخاصة بك: