ಘಟಕಗಳು

ಮೂಲ ತರಗತಿಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಘಟಕಗಳನ್ನು ಹೆಚ್ಚಾಗಿ ಬೇಸ್-ಮಾರ್ಡಿಫೈಯರ್ ನಾಮಕರಣದೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನಾವು ಸಾಧ್ಯವಾದಷ್ಟು ಹಂಚಿದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೇಸ್ ಕ್ಲಾಸ್‌ಗೆ ಗುಂಪು ಮಾಡುತ್ತೇವೆ .btn, ಮತ್ತು ನಂತರ ಪ್ರತಿ ರೂಪಾಂತರಕ್ಕೆ ಪ್ರತ್ಯೇಕ ಶೈಲಿಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳಾಗಿ ಗುಂಪು ಮಾಡುತ್ತೇವೆ, ಹಾಗೆ .btn-primaryಅಥವಾ .btn-success.

ನಮ್ಮ ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳನ್ನು ನಿರ್ಮಿಸಲು, ನಾವು @eachಸಾಸ್ ನಕ್ಷೆಯ ಮೇಲೆ ಪುನರಾವರ್ತಿಸಲು ಸಾಸ್‌ನ ಲೂಪ್‌ಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ನಮ್ಮ ಮೂಲಕ ಘಟಕದ $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. ಆ ಪರಿವರ್ತಕ ವರ್ಗಗಳಲ್ಲಿ ಒಂದನ್ನು ನೀವು ಮೂಲ ವರ್ಗವನ್ನು ಸಂಯೋಜಿಸಿದಾಗ, ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಘಟಕ ಕುಟುಂಬವನ್ನು ನೀವು ಪಡೆಯುತ್ತೀರಿ: