ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

ಘಟಕಗಳು

ನಮ್ಮ ಎಲ್ಲಾ ಘಟಕಗಳನ್ನು ನಾವು ಹೇಗೆ ಮತ್ತು ಏಕೆ ಸ್ಪಂದಿಸುವ ರೀತಿಯಲ್ಲಿ ಮತ್ತು ಬೇಸ್ ಮತ್ತು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳೊಂದಿಗೆ ನಿರ್ಮಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.

ಮೂಲ ತರಗತಿಗಳು

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

ಇದು ಮಾಹಿತಿಯ ಕಾಲ್ಔಟ್ ಆಗಿದೆ. ಅದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ತೋರಿಸಲು ಉದಾಹರಣೆ ಪಠ್ಯ.
ಇದು ಎಚ್ಚರಿಕೆಯ ಕರೆ. ಅದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ತೋರಿಸಲು ಉದಾಹರಣೆ ಪಠ್ಯ.
ಇದು ಅಪಾಯದ ಕರೆ. ಅದನ್ನು ಕ್ರಿಯೆಯಲ್ಲಿ ತೋರಿಸಲು ಉದಾಹರಣೆ ಪಠ್ಯ.