ਕੰਪੋਨੈਂਟਸ

ਬੇਸ ਕਲਾਸਾਂ

ਬੂਟਸਟਰੈਪ ਦੇ ਭਾਗ ਵੱਡੇ ਪੱਧਰ 'ਤੇ ਅਧਾਰ-ਮੋਡੀਫਾਇਰ ਨਾਮਕਰਨ ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਅਸੀਂ ਵੱਧ ਤੋਂ ਵੱਧ ਸਾਂਝੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਇੱਕ ਬੇਸ ਕਲਾਸ ਵਿੱਚ ਸਮੂਹ ਕਰਦੇ ਹਾਂ, ਜਿਵੇਂ .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। ਜਦੋਂ ਤੁਸੀਂ ਉਸ ਬੇਸ ਕਲਾਸ ਨੂੰ ਉਹਨਾਂ ਸੋਧਕ ਕਲਾਸਾਂ ਵਿੱਚੋਂ ਇੱਕ ਨਾਲ ਜੋੜਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣਾ ਪੂਰਾ ਕੰਪੋਨੈਂਟ ਪਰਿਵਾਰ ਮਿਲਦਾ ਹੈ: