ઘટકો

આધાર વર્ગો

બુટસ્ટ્રેપના ઘટકો મોટાભાગે બેઝ-મોડિફાયર નામકરણ સાથે બનેલ છે. અમે બેઝ ક્લાસમાં શક્ય તેટલી શેર કરેલી પ્રોપર્ટીઝને જૂથબદ્ધ કરીએ છીએ, જેમ કે .btn, અને પછી દરેક વેરિઅન્ટ માટે વ્યક્તિગત શૈલીઓને મોડિફાયર વર્ગોમાં જૂથબદ્ધ કરીએ છીએ, જેમ .btn-primaryકે અથવા .btn-success.

અમારા મોડિફાયર વર્ગો બનાવવા માટે, અમે @eachSass નકશા પર પુનરાવર્તન કરવા માટે Sass ના લૂપ્સનો ઉપયોગ કરીએ છીએ. આ ખાસ કરીને અમારા દ્વારા ઘટકના વેરિઅન્ટ જનરેટ કરવા $theme-colorsઅને દરેક બ્રેકપોઇન્ટ માટે રિસ્પોન્સિવ વેરિઅન્ટ બનાવવા માટે મદદરૂપ છે. જેમ જેમ તમે આ 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
);

અમારા સાસ નકશા અને ચલોને કેવી રીતે સંશોધિત કરવા તે અંગે વધુ માહિતી અને ઉદાહરણો માટે, કૃપા કરીને ગ્રીડ દસ્તાવેજીકરણના સાસ વિભાગનો સંદર્ભ લો .

તમારી પોતાની બનાવી રહ્યા છીએ

તમારા પોતાના ઘટકો બનાવવા માટે બુટસ્ટ્રેપ સાથે બનાવતી વખતે અમે તમને આ માર્ગદર્શિકા અપનાવવા માટે પ્રોત્સાહિત કરીએ છીએ. અમે આ અભિગમને અમારા દસ્તાવેજો અને ઉદાહરણોમાં કસ્ટમ ઘટકો સુધી વિસ્તૃત કર્યો છે. અમારા કૉલઆઉટ જેવા ઘટકો બેઝ અને મોડિફાયર વર્ગો સાથે અમારા પ્રદાન કરેલા ઘટકોની જેમ જ બનાવવામાં આવ્યા છે.

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

તમારા CSS માં, તમારી પાસે નીચેના જેવું કંઈક હશે જ્યાં મોટાભાગની સ્ટાઇલ . દ્વારા કરવામાં આવે છે .callout. પછી, દરેક વેરિઅન્ટ વચ્ચેની અનન્ય શૈલીઓ સુધારક વર્ગ દ્વારા નિયંત્રિત થાય છે.

// Base class
.callout {}

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

કૉલઆઉટ્સ માટે, તે અનન્ય સ્ટાઇલ માત્ર એક છે border-left-color. જ્યારે તમે તે બેઝ ક્લાસને તે સુધારક વર્ગોમાંથી એક સાથે જોડો છો, ત્યારે તમને તમારું સંપૂર્ણ ઘટક કુટુંબ મળે છે: