اجزاء

کلاس های پایه

اجزای Bootstrap تا حد زیادی با نامگذاری مبنا اصلاح کننده ساخته شده اند. ما تا آنجایی که ممکن است ویژگی های مشترک را در یک کلاس پایه گروه بندی می کنیم، مانند .btn، و سپس استایل های فردی را برای هر نوع در کلاس های اصلاح کننده، مانند .btn-primaryیا گروه بندی می کنیم .btn-success.

برای ساخت کلاس های اصلاح کننده خود، از @eachحلقه های Sass برای تکرار روی نقشه Sass استفاده می کنیم. این به ویژه برای تولید انواع یک جزء توسط ما $theme-colorsو ایجاد انواع پاسخگو برای هر نقطه شکست مفید است. همانطور که این نقشه های Sass را سفارشی می کنید و دوباره کامپایل می کنید، به طور خودکار تغییرات خود را در این حلقه ها منعکس می کنید.

برای چگونگی سفارشی کردن این حلقه ها و گسترش رویکرد اصلاح کننده پایه بوت استرپ به کد خود، نقشه های Sass و اسناد حلقه های ما را بررسی کنید .

اصلاح کننده ها

بسیاری از اجزای بوت استرپ با رویکرد کلاس اصلاح کننده پایه ساخته شده اند. این بدان معناست که بخش عمده ای از یک ظاهر طراحی شده در یک کلاس پایه (مثلاً .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 مراجعه کنید.

خود را ایجاد کنید

ما شما را تشویق می کنیم هنگام ساختن با بوت استرپ برای ایجاد اجزای خود، این دستورالعمل ها را اتخاذ کنید. ما خودمان این رویکرد را به مؤلفه‌های سفارشی در مستندات و مثال‌هایمان گسترش داده‌ایم. مؤلفه‌هایی مانند فراخوان‌های ما درست مانند مؤلفه‌های ارائه‌شده ما با کلاس‌های پایه و اصلاح‌کننده ساخته می‌شوند.

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

در CSS خود، چیزی شبیه به زیر خواهید داشت که در آن بخش اعظم یک ظاهر طراحی شده از طریق انجام می شود .callout. سپس، سبک های منحصر به فرد بین هر گونه از طریق کلاس اصلاح کننده کنترل می شود.

// Base class
.callout {}

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

برای فراخوان ها، این استایل منحصر به فرد فقط یک border-left-color. وقتی آن کلاس پایه را با یکی از آن کلاس های اصلاح کننده ترکیب می کنید، خانواده کامل اجزای خود را دریافت می کنید: