ଉପାଦାନଗୁଡ଼ିକ |
ଆମେ କିପରି ଏବଂ କାହିଁକି ଆମର ପ୍ରାୟ ସମସ୍ତ ଉପାଦାନକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ ଭାବରେ ଏବଂ ବେସ୍ ଏବଂ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ନିର୍ମାଣ କରୁ ଶିଖନ୍ତୁ |
ବେସ୍ କ୍ଲାସ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉପାଦାନଗୁଡ଼ିକ ଏକ ବେସ୍-ମୋଡିଫାୟର୍ ନାମକରଣ ସହିତ ନିର୍ମିତ | ଆମେ ଏକ ବେସ୍ ଶ୍ରେଣୀରେ ଯଥାସମ୍ଭବ ଅଂଶୀଦାରିତ ଗୁଣଗୁଡିକୁ ଗ୍ରୁପ୍ କରିଥାଉ, ଯେପରି .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
| ଯେତେବେଳେ ତୁମେ ସେହି ବେସ୍ କ୍ଲାସ୍କୁ ସେହି ରୂପାନ୍ତରକାରୀ ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ମିଶ୍ରଣ କର, ତୁମେ ତୁମର ସମ୍ପୂର୍ଣ୍ଣ ଉପାଦାନ ପରିବାର ପାଇବ: