പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

ഘടകങ്ങൾ

ഞങ്ങളുടെ മിക്കവാറും എല്ലാ ഘടകങ്ങളും പ്രതികരണാത്മകമായും അടിസ്ഥാന, മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിച്ചും എങ്ങനെ, എന്തുകൊണ്ട് നിർമ്മിക്കുന്നുവെന്ന് മനസിലാക്കുക.

അടിസ്ഥാന ക്ലാസുകൾ

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഘടകങ്ങൾ പ്രധാനമായും അടിസ്ഥാന-മോഡിഫയർ നാമകരണം ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്. ഞങ്ങൾ കഴിയുന്നത്ര പങ്കിട്ട പ്രോപ്പർട്ടികൾ പോലെയുള്ള അടിസ്ഥാന ക്ലാസിലേക്ക് .btnഗ്രൂപ്പുചെയ്യുന്നു, തുടർന്ന് ഓരോ വേരിയന്റിനുമുള്ള വ്യക്തിഗത ശൈലികളെ മോഡിഫയർ ക്ലാസുകളായി ഗ്രൂപ്പുചെയ്യുന്നു, .btn-primaryഅല്ലെങ്കിൽ .btn-success.

ഞങ്ങളുടെ മോഡിഫയർ ക്ലാസുകൾ നിർമ്മിക്കുന്നതിന്, @eachഒരു സാസ് മാപ്പിൽ ആവർത്തിക്കാൻ ഞങ്ങൾ സാസിന്റെ ലൂപ്പുകൾ ഉപയോഗിക്കുന്നു. $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);
}

പ്രതികരണശേഷിയുള്ള

ഈ സാസ് ലൂപ്പുകൾ വർണ്ണ മാപ്പുകളിൽ മാത്രമായി പരിമിതപ്പെടുത്തിയിട്ടില്ല. നിങ്ങളുടെ ഘടകങ്ങളുടെ പ്രതികരണ വ്യതിയാനങ്ങൾ സൃഷ്ടിക്കാനും നിങ്ങൾക്ക് കഴിയും. @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 വിഭാഗം പരിശോധിക്കുക .

നിങ്ങളുടെ സ്വന്തം സൃഷ്ടിക്കുന്നു

നിങ്ങളുടെ സ്വന്തം ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നതിന് ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് നിർമ്മിക്കുമ്പോൾ ഈ മാർഗ്ഗനിർദ്ദേശങ്ങൾ സ്വീകരിക്കാൻ ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു. ഞങ്ങളുടെ ഡോക്യുമെന്റേഷനിലെയും ഉദാഹരണങ്ങളിലെയും ഇഷ്‌ടാനുസൃത ഘടകങ്ങളിലേക്ക് ഞങ്ങൾ ഈ സമീപനം വിപുലീകരിച്ചു. ഞങ്ങളുടെ കോൾഔട്ടുകൾ പോലെയുള്ള ഘടകങ്ങൾ അടിസ്ഥാന, മോഡിഫയർ ക്ലാസുകളുള്ള ഞങ്ങളുടെ നൽകിയിരിക്കുന്ന ഘടകങ്ങൾ പോലെയാണ് നിർമ്മിച്ചിരിക്കുന്നത്.

ഇതൊരു കോൾഔട്ടാണ്. ഞങ്ങളുടെ ഡോക്‌സിനായി ഞങ്ങൾ ഇത് ഇഷ്‌ടാനുസൃതമായി നിർമ്മിച്ചതിനാൽ നിങ്ങൾക്കുള്ള ഞങ്ങളുടെ സന്ദേശങ്ങൾ വേറിട്ടുനിൽക്കും. മോഡിഫയർ ക്ലാസുകൾ വഴി ഇതിന് മൂന്ന് വകഭേദങ്ങളുണ്ട്.
<div class="callout">...</div>

നിങ്ങളുടെ CSS-ൽ, സ്‌റ്റൈലിങ്ങിന്റെ ഭൂരിഭാഗവും ചെയ്യുന്നത് ഇനിപ്പറയുന്നതുപോലുള്ള ഒന്ന് നിങ്ങൾക്ക് ഉണ്ടായിരിക്കും .callout. തുടർന്ന്, ഓരോ വേരിയന്റിനുമിടയിലുള്ള തനതായ ശൈലികൾ മോഡിഫയർ ക്ലാസ് വഴി നിയന്ത്രിക്കപ്പെടുന്നു.

// Base class
.callout {}

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

കോൾഔട്ടുകൾക്ക്, ആ അദ്വിതീയ സ്റ്റൈലിംഗ് ഒരു border-left-color. ആ മോഡിഫയർ ക്ലാസുകളിലൊന്നുമായി നിങ്ങൾ ആ അടിസ്ഥാന ക്ലാസിനെ സംയോജിപ്പിക്കുമ്പോൾ, നിങ്ങളുടെ സമ്പൂർണ്ണ ഘടക കുടുംബം നിങ്ങൾക്ക് ലഭിക്കും:

ഇതൊരു ഇൻഫോ കോൾഔട്ടാണ്. അത് പ്രവർത്തനത്തിൽ കാണിക്കുന്നതിനുള്ള ഉദാഹരണ വാചകം.
ഇതൊരു മുന്നറിയിപ്പ് കോളാണ്. അത് പ്രവർത്തനത്തിൽ കാണിക്കുന്നതിനുള്ള ഉദാഹരണ വാചകം.
ഇതൊരു അപകട ഭീഷണിയാണ്. അത് പ്രവർത്തനത്തിൽ കാണിക്കുന്നതിനുള്ള ഉദാഹരണ വാചകം.