கூறுகள்

அடிப்படை வகுப்புகள்

பூட்ஸ்ட்ராப்பின் கூறுகள் பெரும்பாலும் அடிப்படை-மாற்றி பெயரிடலுடன் கட்டமைக்கப்பட்டுள்ளன. முடிந்தவரை பல பகிரப்பட்ட பண்புகளை அடிப்படை வகுப்பில் .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
);

எங்கள் Sass வரைபடங்கள் மற்றும் மாறிகளை எவ்வாறு மாற்றுவது என்பது பற்றிய கூடுதல் தகவல் மற்றும் எடுத்துக்காட்டுகளுக்கு , கிரிட் ஆவணத்தின் Sass பகுதியைப் பார்க்கவும் .

சொந்தமாக உருவாக்குதல்

உங்கள் சொந்த கூறுகளை உருவாக்க பூட்ஸ்டார்ப் மூலம் உருவாக்கும்போது இந்த வழிகாட்டுதல்களைப் பின்பற்றுமாறு உங்களை ஊக்குவிக்கிறோம். எங்கள் ஆவணங்கள் மற்றும் எடுத்துக்காட்டுகளில் உள்ள தனிப்பயன் கூறுகளுக்கு இந்த அணுகுமுறையை நாமே நீட்டித்துள்ளோம். எங்கள் கால்அவுட்கள் போன்ற கூறுகள் அடிப்படை மற்றும் மாற்றியமைக்கும் வகுப்புகளுடன் நாங்கள் வழங்கிய கூறுகளைப் போலவே கட்டமைக்கப்பட்டுள்ளன.

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

உங்கள் CSS இல், நீங்கள் பின்வருவனவற்றைப் போன்ற ஒன்றைக் கொண்டிருப்பீர்கள் .callout. பின்னர், ஒவ்வொரு மாறுபாட்டிற்கும் இடையே உள்ள தனித்துவமான பாணிகள் மாற்றி வகுப்பின் மூலம் கட்டுப்படுத்தப்படும்.

// Base class
.callout {}

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

அழைப்புகளுக்கு, அந்த தனித்துவமான ஸ்டைலிங் ஒரு border-left-color. அந்த மாற்றியமைக்கும் வகுப்புகளில் ஒன்றோடு அந்த அடிப்படை வகுப்பை நீங்கள் இணைக்கும்போது, ​​உங்கள் முழுமையான கூறு குடும்பத்தைப் பெறுவீர்கள்: