ଉପାଦାନଗୁଡ଼ିକ |

ବେସ୍ କ୍ଲାସ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନଗୁଡ଼ିକ ଏକ ବେସ୍-ମୋଡିଫାୟର୍ ନାମକରଣ ସହିତ ନିର୍ମିତ | ଆମେ ଏକ ବେସ୍ ଶ୍ରେଣୀରେ ଯଥାସମ୍ଭବ ଅଂଶୀଦାରିତ ଗୁଣଗୁଡିକୁ ଗ୍ରୁପ୍ କରିଥାଉ, ଯେପରି .btn, ଏବଂ ତା’ପରେ ପ୍ରତ୍ୟେକ ପ୍ରକାର ପାଇଁ ବ୍ୟକ୍ତିଗତ ଶ yles ଳୀକୁ ମୋଡିଫାୟର୍ କ୍ଲାସରେ ଗ୍ରୁପ୍ କରିଥାଉ, .btn-primaryକିମ୍ୱା .btn-success|

ଆମର ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ଗଠନ କରିବାକୁ, ଆମେ @eachସାସ୍ ମାନଚିତ୍ରରେ ପୁନରାବୃତ୍ତି କରିବାକୁ ସାସ୍ ର ଲୁପ୍ ବ୍ୟବହାର କରୁ | ଏହା ଆମ ଦ୍ୱାରା ଏକ ଉପାଦାନର $theme-colorsପ୍ରକାରଗୁଡିକ ସୃଷ୍ଟି କରିବା ଏବଂ ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପ୍ରକାରଗୁଡିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ବିଶେଷ ସହାୟକ ହୋଇଥାଏ | ଯେହେତୁ ଆପଣ ଏହି ସାସ୍ ମାନଚିତ୍ରଗୁଡିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି ଏବଂ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତି, ଆପଣ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହି ପରିବର୍ତ୍ତନଗୁଡ଼ିକରେ ଏହି ପରିବର୍ତ୍ତନଗୁଡ଼ିକରେ ପ୍ରତିଫଳିତ ହୋଇଥିବାର ଦେଖିବେ |

ଏହି ଲୁପ୍ଗୁଡ଼ିକୁ କିପରି କଷ୍ଟୋମାଇଜ୍ କରିବେ ଏବଂ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ର ବେସ୍-ମୋଡିଫାୟର୍ ଆଭିମୁଖ୍ୟକୁ ନିଜ କୋଡ୍ ରେ ବିସ୍ତାର କରିବେ ସେଥିପାଇଁ ଆମର ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ ଡକସ୍ ଯାଞ୍ଚ କରନ୍ତୁ |

ପରିବର୍ତ୍ତନକାରୀ

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅନେକ ଉପାଦାନ ଏକ ବେସ୍-ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ପଦ୍ଧତି ସହିତ ନିର୍ମିତ | ଏହାର ଅର୍ଥ ହେଉଛି ଷ୍ଟାଇଲିଂର ବହୁଳ ଅଂଶ ଏକ ବେସ୍ କ୍ଲାସ୍ (ଯଥା, .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| ତା’ପରେ, ପ୍ରତ୍ୟେକ ପ୍ରକାର ମଧ୍ୟରେ ଅନନ୍ୟ ଶ yles ଳୀଗୁଡିକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ନିୟନ୍ତ୍ରିତ |

// Base class
.callout {}

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

କଲ୍ଆଉଟ୍ ପାଇଁ, ସେହି ଅନନ୍ୟ ଷ୍ଟାଇଲ୍ କେବଳ ଏକ border-left-color| ଯେତେବେଳେ ତୁମେ ସେହି ବେସ୍ କ୍ଲାସ୍କୁ ସେହି ରୂପାନ୍ତରକାରୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ମିଶ୍ରଣ କର, ତୁମେ ତୁମର ସମ୍ପୂର୍ଣ୍ଣ ଉପାଦାନ ପରିବାର ପାଇବ: