المكونات (Components)

الفئات الأساسية (Base classes)

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

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

راجع مستندات خرائط وحلقات (loops) الـ (Sass) لمعرفة كيفية تخصيص هذه الحلقات وتوسيع نهج الفئة الأساسية والمعدلة في Bootstrap في الكود الخاص بك.

المعدلات (Modifiers)

تم بناء العديد من مكونات Bootstrap باستخدام نهج الفئة الأساسية والمعدلة. وهذا يعني أن الجزء الأكبر من التنسيق محتوى في فئة أساسية (على سبيل المثال، .btn) بينما تقتصر تنويعات الأنماط على الفئات المعدلة (على سبيل المثال، .btn-danger). يتم بناء هذه الفئات المعدلة من خريطة (map) الـ $theme-colors لتسهيل تخصيص عدد واسم الفئات المعدلة لدينا.

إليك مثالان على كيفية تكرارنا عبر خريطة (map) الـ $theme-colors لإنشاء معدلات لمكونات .alert و .list-group.

// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

المتوافق مع الشاشات (Responsive)

إن حلقات الـ Sass هذه ليست مقتصرة على خرائط الألوان أيضاً. يمكنك أيضاً إنشاء تنويعات متوافقة مع الشاشات (Responsive) لمكوناتك. خذ على سبيل المثال محاذاتنا المتوافقة مع الشاشات للقوائم المنسدلة (dropdowns) حيث ندمج حلقة @each لخريطة (map) الـ $grid-breakpoints في الـ Sass مع تضمين استعلام وسائط (media query include).

// 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 الخاصة بك، فستطبق تغييراتك على جميع الحلقات التي تتكرر عبر تلك الخريطة (map).

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

لمزيد من المعلومات والأمثلة حول كيفية تعديل خرائط الـ Sass والمتغيرات الخاصة بنا، يرجى الرجوع إلى قسم CSS في مستندات الـ Grid.

إنشاء مكوناتك الخاصة

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

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

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

// Base class
.callout {}

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

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