සංරචක

අපි අපගේ සියලුම සංරචක පාහේ ප්‍රතිචාරාත්මකව සහ මූලික සහ විකරණයක පන්ති සමඟ ගොඩනඟන්නේ කෙසේද සහ ඇයිදැයි ඉගෙන ගන්න.

මෙම පිටුවේ

මූලික පන්ති

Bootstrap හි සංරචක බොහෝ දුරට පාදක-විකරණකාරක නාමකරණයකින් ගොඩනගා ඇත. අපි හැකිතාක් බෙදාගත් දේපල, වැනි මූලික පන්තියකට සමූහ කරන්නෙමු .btn, ඉන්පසු එක් එක් ප්‍රභේදය සඳහා තනි තනි ශෛලීන් නවීකරණ පන්තිවලට, වැනි .btn-primaryහෝ .btn-success.

අපගේ විකරණකාරක පන්ති ගොඩනැගීමට, අපි @eachSass සිතියමක් හරහා පුනරාවර්තනය කිරීමට Sass හි ලූප භාවිතා කරමු. මෙය විශේෂයෙන්ම අපගේ සංරචකයේ ප්‍රභේද ජනනය කිරීමට $theme-colorsසහ එක් එක් කඩඉම් ලක්ෂ්‍ය සඳහා ප්‍රතිචාරාත්මක ප්‍රභේද නිර්මාණය කිරීමට උපකාරී වේ. ඔබ මෙම Sass සිතියම් අභිරුචිකරණය කර නැවත සම්පාදනය කරන විට, මෙම ලූපවල පිළිබිඹු වන ඔබගේ වෙනස්කම් ඔබට ස්වයංක්‍රීයව පෙනෙනු ඇත.

මෙම ලූප අභිරුචිකරණය කරන්නේ කෙසේද සහ ඔබේම කේතය වෙත Bootstrap හි මූලික-විකරණය කිරීමේ ප්‍රවේශය දිගු කරන්නේ කෙසේද යන්න සඳහා අපගේ Sass සිතියම් සහ ලූප ලේඛන පරීක්ෂා කරන්න .

වෙනස් කරන්නන්

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 ලූප වර්ණ සිතියම් වලට සීමා නොවේ. ඔබට ඔබේ සංරචකවල ප්‍රතිචාරාත්මක වෙනස්කම් ද ජනනය කළ හැකිය. උදාහරණයක් ලෙස අපි Sass සිතියම @eachසඳහා ලූපයක් මාධ්‍ය විමසුමක් සමඟ මිශ්‍ර කරන පතනවල අපගේ ප්‍රතිචාරාත්මක පෙළගැස්ම ගන්න.$grid-breakpoints

// 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 සමඟ ගොඩනඟන විට මෙම මාර්ගෝපදේශ අනුගමනය කිරීමට අපි ඔබව දිරිමත් කරමු. අපි මෙම ප්‍රවේශය අපගේ ලේඛනවල සහ උදාහරණවල අභිරුචි සංරචක වෙත අප විසින්ම දීර්ඝ කර ඇත. අපගේ ඇමතුම් වැනි සංරචක පාදක සහ විකරණකාරක පන්ති සහිත අප විසින් සපයන ලද සංරචක මෙන් ගොඩනගා ඇත.

මෙය ඇමතුමකි. අපි එය අපගේ ලේඛන සඳහා අභිරුචි ගොඩනඟා ඇති නිසා අපගේ පණිවිඩ ඔබට කැපී පෙනේ. එය modifier class හරහා ප්‍රභේද තුනක් ඇත.

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

ඔබේ CSS තුළ, ඔබට මෝස්තරයෙන් වැඩි ප්‍රමාණයක් හරහා සිදු කරනු ලබන පහත දේ වැනි දෙයක් තිබේ .callout. ඉන්පසුව, එක් එක් ප්‍රභේදය අතර ඇති අනන්‍ය විලාසයන් modifier class හරහා පාලනය වේ.

// Base class
.callout {}

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

ඇමතුම් සඳහා, එම අද්විතීය මෝස්තරය යනු border-left-color. ඔබ එම මූලික පන්තිය එම විකරණකාරක පංතිවලින් එකක් සමඟ ඒකාබද්ධ කළ විට, ඔබට ඔබේ සම්පූර්ණ සංරචක පවුල ලැබේ:

මෙය තොරතුරු ඇමතුමකි. එය ක්‍රියාවෙන් පෙන්වීමට උදාහරණ පෙළ.

මෙය අනතුරු ඇඟවීමකි. එය ක්‍රියාවෙන් පෙන්වීමට උදාහරණ පෙළ.