Source

ଥିମ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |

ସହଜ ଥିମ୍ ଏବଂ ଉପାଦାନ ପରିବର୍ତ୍ତନ ପାଇଁ ଗ୍ଲୋବାଲ୍ ଷ୍ଟାଇଲ୍ ପସନ୍ଦ ପାଇଁ ଆମର ନୂତନ ବିଲ୍ଟ-ଇନ୍ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ 4 କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ |

ପରିଚୟ

ବୁଟଷ୍ଟ୍ରାପ୍ In ରେ, ଥିମ୍ ଗୁଡିକ ମୁଖ୍ୟତ L LESS, କଷ୍ଟମ୍ CSS, ଏବଂ ଏକ ପୃଥକ ଥିମ୍ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ରେ ଭେରିଏବଲ୍ ଓଭରଡାଇଡ୍ ଦ୍ୱାରା ପରିଚାଳିତ ହୋଇଥିଲା ଯାହାକୁ ଆମେ ଆମ distଫାଇଲରେ ଅନ୍ତର୍ଭୁକ୍ତ କରିଥିଲୁ | କିଛି ପ୍ରୟାସ ସହିତ, ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ସ୍ପର୍ଶ ନକରି ବୁଟଷ୍ଟ୍ରାପ୍ 3 ର ଲୁକକୁ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ପୁନ es ଡିଜାଇନ୍ କରିପାରେ | ବୁଟଷ୍ଟ୍ରାପ୍ 4 ଏକ ପରିଚିତ, କିନ୍ତୁ ସାମାନ୍ୟ ଭିନ୍ନ ଆଭିମୁଖ୍ୟ ପ୍ରଦାନ କରେ |

ବର୍ତ୍ତମାନ, ଥିମ୍ ସାସ୍ ଭେରିଏବଲ୍, ସାସ୍ ମାନଚିତ୍ର ଏବଂ କଷ୍ଟମ୍ CSS ଦ୍ୱାରା ସମ୍ପନ୍ନ ହୋଇଛି | ସେଠାରେ ଆଉ ଉତ୍ସର୍ଗୀକୃତ ଥିମ୍ ଶ yles ଳୀ ନାହିଁ; ଏହା ପରିବର୍ତ୍ତେ, ଆପଣ ଗ୍ରେଡିଏଣ୍ଟ୍, ଛାୟା ଏବଂ ଅଧିକ ଯୋଗ କରିବାକୁ ବିଲ୍ଟ-ଇନ୍ ଥିମ୍ ସକ୍ଷମ କରିପାରିବେ |

ସାସ୍ |

ଭେରିଏବଲ୍, ମାନଚିତ୍ର, ମିକ୍ସିନ୍, ଏବଂ ଅଧିକ ଲାଭ ଉଠାଇବାକୁ ଆମର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

ଫାଇଲ୍ ଗଠନ

ଯେତେବେଳେ ସମ୍ଭବ, ବୁଟଷ୍ଟ୍ରାପର ମୂଳ ଫାଇଲଗୁଡ଼ିକୁ ପରିବର୍ତ୍ତନ କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ | ସାସ୍ ପାଇଁ, ଏହାର ଅର୍ଥ ହେଉଛି ଆପଣଙ୍କର ନିଜସ୍ୱ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ତିଆରି କରିବା ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ କରେ ଯାହା ଦ୍ you ାରା ଆପଣ ଏହାକୁ ପରିବର୍ତ୍ତନ ଏବଂ ବିସ୍ତାର କରିପାରିବେ | ମନେକର ଯେ ତୁମେ npm ପରି ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରୁଛ, ତୁମର ଏକ ଫାଇଲ୍ ଗଠନ ଅଛି ଯାହା ଏହିପରି ଦେଖାଯାଉଛି:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

ଯଦି ତୁମେ ଆମର ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ଡାଉନଲୋଡ୍ କରିଛ ଏବଂ ଏକ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ବ୍ୟବହାର କରୁନାହଁ, ତୁମେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ନିଜଠାରୁ ଅଲଗା ରଖି ସେହି ସଂରଚନା ସହିତ ସମାନ କିଛି ସେଟଅପ୍ କରିବାକୁ ଚାହୁଁଛ |

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

ଆମଦାନି

ଆପଣଙ୍କ ଭିତରେ custom.scss, ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଫାଇଲ୍ ଆମଦାନି କରିବେ | ଆପଣଙ୍କର ଦୁଇଟି ବିକଳ୍ପ ଅଛି: ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, କିମ୍ବା ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ଅଂଶଗୁଡିକ ବାଛନ୍ତୁ | ଆମେ ପରବର୍ତ୍ତୀକୁ ଉତ୍ସାହିତ କରୁ, ଯଦିଓ ସଚେତନ ହୁଅନ୍ତୁ ଆମର ଉପାଦାନଗୁଡ଼ିକରେ କିଛି ଆବଶ୍ୟକତା ଏବଂ ନିର୍ଭରଶୀଳତା ଅଛି | ଆମ ପ୍ଲଗଇନ୍ ପାଇଁ ଆପଣଙ୍କୁ କିଛି ଜାଭାସ୍କ୍ରିପ୍ଟ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ପଡିବ |

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";
// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

ସେହି ସେଟଅପ୍ ସହିତ, ଆପଣ ଯେକ any ଣସି ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ମାନଚିତ୍ରଗୁଡିକୁ ରୂପାନ୍ତର କରିବା ଆରମ୍ଭ କରିପାରିବେ custom.scss| // Optionalଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ବିଭାଗ ଅନ୍ତର୍ଗତ ବୁଟଷ୍ଟ୍ରାପ୍ ର କିଛି ଅଂଶ ଯୋଡିବା ଆରମ୍ଭ କରିପାରିବେ | bootstrap.scssଆମର ପ୍ରାରମ୍ଭ ପଏଣ୍ଟ ଭାବରେ ଆମ ଫାଇଲରୁ ସମ୍ପୂର୍ଣ୍ଣ ଆମଦାନୀ ଷ୍ଟାକ ବ୍ୟବହାର କରିବାକୁ ଆମେ ପରାମର୍ଶ ଦେଉ |

ଭେରିଏବଲ୍ ଡିଫଲ୍ଟ |

ବୁଟଷ୍ଟ୍ରାପ୍ 4 ରେ ଥିବା ପ୍ରତ୍ୟେକ ସାସ୍ ଭେରିଏବଲ୍ !defaultଫ୍ଲାଗ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ କୋଡ୍ ପରିବର୍ତ୍ତନ ନକରି ନିଜ ସାସରେ ଭେରିଏବଲ୍ ର ଡିଫଲ୍ଟ ମୂଲ୍ୟକୁ ନବଲିଖନ କରିବାକୁ ଅନୁମତି ଦିଏ | ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଭେରିଏବଲ୍ କପି ଏବଂ ଲେପନ କରନ୍ତୁ, ସେମାନଙ୍କର ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରନ୍ତୁ ଏବଂ !defaultପତାକା ଅପସାରଣ କରନ୍ତୁ | ଯଦି ଏକ ଭେରିଏବଲ୍ ପୂର୍ବରୁ ନ୍ୟସ୍ତ ହୋଇସାରିଛି, ତେବେ ଏହା ବୁଟଷ୍ଟ୍ରାପରେ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ଦ୍ୱାରା ପୁନ assigned ନ୍ୟସ୍ତ ହେବ ନାହିଁ |

ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଭେରିଏବଲ୍ସର ସମ୍ପୂର୍ଣ୍ଣ ତାଲିକା ପାଇବେ scss/_variables.scss|

ସମାନ ସାସ୍ ଫାଇଲ୍ ମଧ୍ୟରେ ଭେରିଏବଲ୍ ଓଭରବ୍ରିଡ୍ ଡିଫଲ୍ଟ ଭେରିଏବଲ୍ ପୂର୍ବରୁ କିମ୍ବା ପରେ ଆସିପାରେ | ଯଦିଓ, ସାସ୍ ଫାଇଲଗୁଡିକ ଉପରେ ନବଲିଖନ କରିବାବେଳେ, ବୁଟଷ୍ଟ୍ରାପ୍ ର ସାସ୍ ଫାଇଲଗୁଡିକ ଆମଦାନୀ କରିବା ପୂର୍ବରୁ ଆପଣଙ୍କର ଓଭରବ୍ରିଡ୍ ନିଶ୍ଚିତ ଭାବରେ ଆସିବ |

ଏଠାରେ ଏକ ଉଦାହରଣ ଅଛି ଯାହାକି npm ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଆମଦାନୀ ଏବଂ ସଂକଳନ କରିବା ସମୟରେ background-colorଏବଂ colorପାଇଁ ପରିବର୍ତ୍ତନ କରିଥାଏ:<body>

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

ନିମ୍ନରେ ଥିବା ଗ୍ଲୋବାଲ୍ ଅପ୍ସନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରି ବୁଟଷ୍ଟ୍ରାପରେ ଯେକ any ଣସି ଭେରିଏବଲ୍ ପାଇଁ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନରାବୃତ୍ତି କରନ୍ତୁ |

ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 ରେ କିଛି ହାତଗଣତି ସାସ୍ ମାନଚିତ୍ର, ପ୍ରମୁଖ ମୂଲ୍ୟ ଯୁଗଳ ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ଯାହା ସମ୍ପୃକ୍ତ CSS ର ପରିବାର ସୃଷ୍ଟି କରିବା ସହଜ କରିଥାଏ | ଆମେ ଆମର ରଙ୍ଗ, ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟ, ଏବଂ ଅଧିକ ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରୁ | ସାସ୍ ଭେରିଏବଲ୍ ପରି, ସମସ୍ତ ସାସ୍ ମାନଚିତ୍ରରେ !defaultପତାକା ଅନ୍ତର୍ଭୁକ୍ତ ଏବଂ ଏହାକୁ ନବଲିଖନ କରାଯାଇପାରିବ ଏବଂ ବିସ୍ତାର କରାଯାଇପାରିବ |

ଆମର କିଛି ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଖାଲିରେ ମିଶ୍ରିତ | ଦିଆଯାଇଥିବା ସାସ୍ ମାନଚିତ୍ରର ସହଜ ବିସ୍ତାରକୁ ଅନୁମତି ଦେବା ପାଇଁ ଏହା କରାଯାଇଥାଏ, କିନ୍ତୁ ମାନଚିତ୍ରରୁ ଆଇଟମଗୁଡିକ ଅପସାରଣ କରିବା ଟିକେ ଅଧିକ କଷ୍ଟସାଧ୍ୟ ମୂଲ୍ୟରେ ଆସିଥାଏ |

ମାନଚିତ୍ର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ଆମ $theme-colorsମାନଚିତ୍ରରେ ଏକ ବିଦ୍ୟମାନ ରଙ୍ଗକୁ ରୂପାନ୍ତର କରିବାକୁ, ଆପଣଙ୍କର କଷ୍ଟମ୍ ସାସ୍ ଫାଇଲରେ ନିମ୍ନକୁ ଯୋଡନ୍ତୁ:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

ମାନଚିତ୍ରରେ ଯୋଡନ୍ତୁ |

ଏଥିରେ ଏକ ନୂତନ ରଙ୍ଗ $theme-colorsଯୋଡିବାକୁ, ନୂତନ ଚାବି ଏବଂ ମୂଲ୍ୟ ଯୋଡନ୍ତୁ:

$theme-colors: (
  "custom-color": #900
);

ମାନଚିତ୍ରରୁ ଅପସାରଣ କରନ୍ତୁ |

କିମ୍ବା ଅନ୍ୟ କ map ଣସି ମାନଚିତ୍ରରୁ ରଙ୍ଗ ହଟାଇବାକୁ $theme-colors, ବ୍ୟବହାର କରନ୍ତୁ map-remove| ସଚେତନ ରୁହନ୍ତୁ ତୁମେ ଏହାକୁ ଆମର ଆବଶ୍ୟକତା ଏବଂ ବିକଳ୍ପ ମଧ୍ୟରେ ସନ୍ନିବେଶ କରିବା ଉଚିତ:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

ଆବଶ୍ୟକ କିଗୁଡ଼ିକ |

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସାସ୍ ମାନଚିତ୍ରରେ କିଛି ନିର୍ଦ୍ଦିଷ୍ଟ କିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଅନୁମାନ କରେ ଯେହେତୁ ଆମେ ଏହାକୁ ନିଜେ ବ୍ୟବହାର କରୁ ଏବଂ ବିସ୍ତାର କରୁ | ଯେହେତୁ ଆପଣ ଅନ୍ତର୍ଭୁକ୍ତ ମାନଚିତ୍ରଗୁଡ଼ିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି, ଆପଣ ତ୍ରୁଟିର ସମ୍ମୁଖୀନ ହୋଇପାରନ୍ତି ଯେଉଁଠାରେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସାସ୍ ��ାନଚିତ୍ରର ଚାବି ବ୍ୟବହାର କରାଯାଏ |

ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ ଲିଙ୍କ୍, ବଟନ୍, ଏବଂ ଫର୍ମ ଷ୍ଟେଟସ୍ ପାଇଁ primary, successଏବଂ dangerକିଗୁଡ଼ିକୁ ବ୍ୟବହାର କରୁ | $theme-colorsଏହି ଚାବିଗୁଡ଼ିକର ମୂଲ୍ୟ ବଦଳାଇବା ଦ୍ୱାରା କ issues ଣସି ସମସ୍ୟା ଉପସ୍ଥାପିତ ହେବା ଉଚିତ ନୁହେଁ, କିନ୍ତୁ ସେଗୁଡିକ ଅପସାରଣ କରିବା ଦ୍ୱାରା ସାସ୍ ସଂକଳନ ସମସ୍ୟା ହୋଇପାରେ | ଏହି ପରିସ୍ଥିତିରେ, ଆପଣଙ୍କୁ ସାସ୍ କୋଡ୍ ସଂଶୋଧନ କରିବାକୁ ପଡିବ ଯାହା ସେହି ମୂଲ୍ୟଗୁଡ଼ିକର ବ୍ୟବହାର କରେ |

କାର୍ଯ୍ୟଗୁଡ଼ିକ

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଅନେକ ସାସ୍ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରେ, କିନ୍ତୁ ସାଧାରଣ ଥିମ୍ ପାଇଁ କେବଳ ଏକ ସବ୍ସେଟ୍ ପ୍ରଯୁଜ୍ୟ | ରଙ୍ଗ ମାନଚିତ୍ରରୁ ମୂଲ୍ୟ ପାଇବା ପାଇଁ ଆମେ ତିନୋଟି କାର୍ଯ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରିଛୁ:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

ଏଗୁଡିକ ଆପଣଙ୍କୁ ସାସ୍ ମାନଚିତ୍ରରୁ ଗୋଟିଏ ରଙ୍ଗ ବାଛିବା ପାଇଁ ଅନୁମତି ଦିଏ ଯେପରି ଆପଣ v3 ରୁ ଏକ ରଙ୍ଗ ଭେରିଏବଲ୍ କିପରି ବ୍ୟବହାର କରିବେ |

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

ମାନଚିତ୍ରରୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସ୍ତରର ରଙ୍ଗ ପାଇବା ପାଇଁ ଆମର ଆଉ ଏକ କାର୍ଯ୍ୟ ଅଛି | $theme-colorsନକାରାତ୍ମକ ସ୍ତରର ମୂଲ୍ୟଗୁଡ଼ିକ ରଙ୍ଗକୁ ହାଲୁକା କରିବ, ଯେତେବେଳେ ଉଚ୍ଚ ସ୍ତର ଅନ୍ଧାର ହୋଇଯିବ |

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

ଅଭ୍ୟାସରେ, ଆପଣ ଫଙ୍କସନ୍ କୁ ଡାକିବେ ଏବଂ ଦୁଇଟି ପାରାମିଟରରେ ପାସ୍ କରିବେ: ରଙ୍ଗର ନାମ $theme-colors(ଯଥା, ପ୍ରାଥମିକ କିମ୍ବା ବିପଦ) ଏବଂ ଏକ ସାଂଖ୍ୟିକ ସ୍ତର |

.custom-element {
  color: theme-color-level(primary, -10);
}

ଭବିଷ୍ୟତରେ ଅତିରିକ୍ତ କାର୍ଯ୍ୟଗୁଡ଼ିକ କିମ୍ବା ଆପଣଙ୍କ ନିଜସ୍ୱ କଷ୍ଟମ୍ ସାସ୍ ଅତିରିକ୍ତ ସାସ୍ ମାନଚିତ୍ର ପାଇଁ ସ୍ତରୀୟ କାର୍ଯ୍ୟ ସୃଷ୍ଟି କରିବାକୁ, କିମ୍ବା ଯଦି ଆପଣ ଅଧିକ ଭର୍ସୋଜ୍ ହେବାକୁ ଚାହାଁନ୍ତି, ତେବେ ଏକ ଜେନେରିକ୍ ମଧ୍ୟ ଯୋଗ କରାଯାଇପାରେ |

ରଙ୍ଗ ବିପରୀତ |

ବୁଟଷ୍ଟ୍ରାପରେ ଆମେ ଅନ୍ତର୍ଭୂକ୍ତ କରୁଥିବା ଗୋଟିଏ ଅତିରିକ୍ତ କାର୍ଯ୍ୟ ହେଉଛି ରଙ୍ଗ ବିପରୀତ କାର୍ଯ୍ୟ , color-yiq। ନିର୍ଦ୍ଦିଷ୍ଟ ଆଧାର ରଙ୍ଗ ଉପରେ ଆଧାର କରି ଏହା ଏକ ହାଲୁକା ( ) କିମ୍ବା ଗା dark ( ) ବିପରୀତ ରଙ୍ଗକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଫେରାଇବା ପାଇଁ YIQ ରଙ୍ଗ ସ୍ଥାନକୁ ବ୍ୟବହାର କରେ | ଏହି ଫଙ୍କସନ୍ ମିକ୍ସିନ୍ କିମ୍ବା ଲୁପ୍ ପାଇଁ ବିଶେଷ ଉପଯୋଗୀ ଯେଉଁଠାରେ ଆପଣ ଏକାଧିକ ଶ୍ରେଣୀ ସୃଷ୍ଟି କରୁଛନ୍ତି |#fff#111

$theme-colorsଉଦାହରଣ ସ୍ୱରୂପ, ଆମ ମାନଚିତ୍ରରୁ ରଙ୍ଗ ସ୍ୱିଚ୍ ସୃଷ୍ଟି କରିବାକୁ :

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

ଏହାକୁ ଏକ-ଅଫ୍ କଣ୍ଟ୍ରାସ୍ ଆବଶ୍ୟକତା ପାଇଁ ମଧ୍ୟ ବ୍ୟବହାର କରାଯାଇପାରିବ:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

ଆମର ରଙ୍ଗ ମାନଚିତ୍ର କାର୍ଯ୍ୟଗୁଡ଼ିକ ସହିତ ଆପଣ ଏକ ମୂଳ ରଙ୍ଗ ମଧ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରିପାରିବେ:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

ସାସ୍ ବିକଳ୍ପଗୁଡିକ |

ଆମର ବିଲ୍ଟ-ଇନ୍ କଷ୍ଟମ୍ ଭେରିଏବଲ୍ ଫାଇଲ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ 4 କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ ଏବଂ ନୂତନ $enable-*ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ଗ୍ଲୋବାଲ୍ CSS ପସନ୍ଦଗୁଡ଼ିକୁ ସହଜରେ ଟୋଗଲ୍ କରନ୍ତୁ | ଏକ ଭେରିଏବଲ୍ ର ଭାଲ୍ୟୁକୁ ନବଲିଖନ କରନ୍ତୁ ଏବଂ npm run testଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୁନ omp କମ୍ପାଇଲ୍ କରନ୍ତୁ |

scss/_variables.scssବୁଟଷ୍ଟ୍ରାପ୍ ଫାଇଲ୍ ରେ ପ୍ରମୁଖ ଗ୍ଲୋବାଲ୍ ଅପ୍ସନ୍ ପାଇଁ ଆପଣ ଏହି ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ ସନ୍ଧାନ ଏବଂ କଷ୍ଟମାଇଜ୍ କରିପାରିବେ |

ଭେରିଏବଲ୍ ମୂଲ୍ୟଗୁଡ଼ିକ ବର୍ଣ୍ଣନା
$spacer 1rem(ଡିଫଲ୍ଟ), କିମ୍ବା ଯେକ value ଣସି ମୂଲ୍ୟ> 0 | ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭାବରେ ଆମର ସ୍ପେସର୍ ଉପଯୋଗିତା ସୃଷ୍ଟି କରିବାକୁ ଡିଫଲ୍ଟ ସ୍ପେସର୍ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରେ |
$enable-rounded true(ଡିଫଲ୍ଟ) କିମ୍ବାfalse border-radiusବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ yles ଳୀକୁ ସକ୍ଷମ କରିଥାଏ |
$enable-shadows trueକିମ୍ବା false(ଡିଫଲ୍ଟ) box-shadowବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଶ yles ଳୀକୁ ସକ୍ଷମ କରିଥାଏ |
$enable-gradients trueକିମ୍ବା false(ଡିଫଲ୍ଟ) background-imageବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ଶ yles ଳୀ ମାଧ୍ୟମରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ ଗ୍ରେଡିଏଣ୍ଟଗୁଡ଼ିକୁ ସକ୍ଷମ କରିଥାଏ |
$enable-transitions true(ଡିଫଲ୍ଟ) କିମ୍ବାfalse ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ transitions କୁ ସକ୍ଷମ କରିଥାଏ |
$enable-hover-media-query trueକିମ୍ବା false(ଡିଫଲ୍ଟ) ନାପସନ୍ଦ
$enable-grid-classes true(ଡିଫଲ୍ଟ) କିମ୍ବାfalse .containerଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ (ଯଥା ,,, .rowଇତ୍ୟାଦି .col-md-1) ପାଇଁ CSS ଶ୍ରେଣୀର ଉତ୍ପାଦନକୁ ସକ୍ଷମ କରିଥାଏ |
$enable-caret true(ଡିଫଲ୍ଟ) କିମ୍ବାfalse ସିଉଡୋ ଏଲିମେଣ୍ଟ୍ କ୍ୟାରେଟ୍ ଅନ୍ ସକ୍ଷମ କରେ .dropdown-toggle|
$enable-print-styles true(ଡିଫଲ୍ଟ) କିମ୍ବାfalse ମୁଦ୍ରଣକୁ ଅପ୍ଟିମାଇଜ୍ କରିବା ପାଇଁ ଶ yles ଳୀ ସକ୍ଷମ କରେ |

ରଙ୍ଗ

ବୁଟଷ୍ଟ୍ରାପର ଅନେକ ଉପାଦାନ ଏବଂ ଉପଯୋଗିତା ସାସ୍ ମାନଚିତ୍ରରେ ବ୍ୟାଖ୍ୟା କରାଯାଇଥିବା ରଙ୍ଗର କ୍ରମ ମାଧ୍ୟମରେ ନିର୍ମିତ | ଏହି ମାନଚିତ୍ରକୁ ଶୀଘ୍ର ଏକ ଶୃଙ୍ଖଳା ସୃଷ୍ଟି କରିବାକୁ ସାସରେ ଲୁପ୍ କରାଯାଇପାରିବ |

ସମସ୍ତ ରଙ୍ଗ |

ବୁଟଷ୍ଟ୍ରାପ୍ 4 ରେ ଉପଲବ୍ଧ ସମସ୍ତ ରଙ୍ଗ, ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ scss/_variables.scssଫାଇଲରେ ଏକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ଉପଲବ୍ଧ | ଅତିରିକ୍ତ ଛାୟା ଯୋଡିବା ପାଇଁ ପରବର୍ତ୍ତୀ ଛୋଟ ପ୍ରକାଶନରେ ଏହା ବିସ୍ତାର ହେବ, ଯେପରି ଆମେ ପୂର୍ବରୁ ଅନ୍ତର୍ଭୁକ୍ତ ଗ୍ରେସ୍କେଲ୍ ପ୍ୟାଲେଟ୍ ପରି |

ନୀଳ
ଇଣ୍ଡିଗୋ |
ବାଇଗଣୀ |
ଗୋଲାପୀ |
ଲାଲ୍ |
କମଳା |
ହଳଦିଆ
ସବୁଜ
ଚା ’
ସିଆନ୍ |

ତୁମ ସାସରେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ତାହା ଏଠାରେ ଅଛି:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

colorସେଟିଂ ପାଇଁ ରଙ୍ଗ ଉପଯୋଗୀତା ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଉପଲବ୍ଧ background-color|

ଭବିଷ୍ୟତରେ, ଆମେ ପ୍ରତ୍ୟେକ ରଙ୍ଗର ଛାୟା ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଭେରିଏବଲ୍ ପ୍ରଦାନ କରିବାକୁ ଲକ୍ଷ୍ୟ ରଖିବୁ ଯେପରି ଆମେ ନିମ୍ନରେ ଗ୍ରେସ୍କେଲ୍ ରଙ୍ଗ ସହିତ କରିଛୁ |

ଥିମ୍ ରଙ୍ଗ |

scss/_variables.scssରଙ୍ଗ ସ୍କିମ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ଛୋଟ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସମସ୍ତ ରଙ୍ଗର ଏକ ସବ୍ସେଟ୍ ବ୍ୟବହାର କରୁ, ବୁଟ୍ଷ୍ଟ୍ରାପ୍ସ ଫାଇଲରେ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ମଧ୍ୟ ଉପଲବ୍ଧ |

ପ୍ରାଥମିକ
ଦ୍ Secondary ିତୀୟ
ସଫଳତା |
ବିପଦ
ଚେତାବନୀ
ସୂଚନା
ଆଲୋକ
ଅନ୍ଧାର

ଧୂସର

ଧୂସର ଭେରିଏବଲ୍ସର ଏକ ବିସ୍ତାରିତ ସେଟ୍ ଏବଂ scss/_variables.scssଆପଣଙ୍କ ପ୍ରୋଜେକ୍ଟରେ ଧୂସର ରଙ୍ଗର ଛାୟା ପାଇଁ ଏକ ସାସ୍ ମାନଚିତ୍ର |

100
200
300
400
500
600
700
800
900

ଭିତରେ scss/_variables.scss, ଆପଣ ବୁଟଷ୍ଟ୍ରାପ୍ ର ରଙ୍ଗ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ପାଇବେ | $colorsସାସ୍ ମାନଚିତ୍ରର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

ମାନଚିତ୍ରରେ ମୂଲ୍ୟଗୁଡିକ ଯୋଡନ୍ତୁ, ଅପସାରଣ କରନ୍ତୁ କିମ୍ବା ପରିବର୍ତ୍ତନ କରନ୍ତୁ, ସେମାନେ ଅନ୍ୟାନ୍ୟ ଉପାଦାନରେ କିପରି ବ୍ୟବହାର କରନ୍ତି ତାହା ଅଦ୍ୟତନ କରିବାକୁ | ଦୁର୍ଭାଗ୍ୟବଶତ this ଏହି ସମୟରେ, ପ୍ରତ୍ୟେକ ଉପାଦାନ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରେ ନାହିଁ | ଭବିଷ୍ୟତର ଅଦ୍ୟତନଗୁଡ଼ିକ ଏଥିରେ ଉନ୍ନତି କରିବାକୁ ଚେଷ୍ଟା କରିବ | ସେପର୍ଯ୍ୟନ୍ତ, ${color}ଭେରିଏବଲ୍ ଏବଂ ଏହି ସାସ୍ ମାନଚିତ୍ର ବ୍ୟବହାର କରିବାକୁ ଯୋଜନା କରନ୍ତୁ |

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

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

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

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅନେକ ଉପାଦାନ ଏକ ବେସ୍-ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ପଦ୍ଧତି ସହିତ ନିର୍ମିତ | ଏହାର ଅର୍ଥ ହେଉଛି ଷ୍ଟାଇଲିଂର ବହୁଳ ଅଂଶ ଏକ ବେସ୍ କ୍ଲାସ୍ (ଯଥା, .btn) ରେ ଥିବାବେଳେ ଷ୍ଟାଇଲ୍ ଭେଦଗୁଡ଼ିକ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ (ଯଥା, .btn-danger) ରେ ସୀମିତ | $theme-colorsଆମର ମୋଡିଫାୟର୍ ଶ୍ରେଣୀର ସଂଖ୍ୟା ଏବଂ ନାମ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ ଏହି ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାନଚିତ୍ରରୁ ନିର୍ମିତ |

ଉପାଦାନ ଏବଂ ଆମର ସମସ୍ତ ପୃଷ୍ଠଭୂମି ଉପଯୋଗିତା $theme-colorsପାଇଁ ମୋଡିଫାୟର୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ କିପରି ମାନଚିତ୍ର ଉପରେ ଲୁପ୍ କରୁ, ଏହାର ଦୁଇଟି ଉଦାହରଣ ଏଠାରେ ଅଛି |.alert.bg-*

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

ପ୍ରତିକ୍ରିୟାଶୀଳ |

ଏହି ସାସ୍ ଲୁପ୍ ଗୁଡିକ ମଧ୍ୟ ରଙ୍ଗ ମାନଚିତ୍ରରେ ସୀମିତ ନୁହେଁ | ତୁମେ ତୁମର ଉପାଦାନ କିମ୍ବା ଉପଯୋଗିତାଗୁଡ଼ିକର ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ମଧ୍ୟ ସୃଷ୍ଟି କରିପାରିବ | ଉଦାହରଣ ସ୍ୱରୂପ ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ପାଠ୍ୟ ଆଲାଇନ୍ମେଣ୍ଟ ଉପଯୋଗିତା ନିଅ ଯେଉଁଠାରେ ଆମେ ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ସହିତ ସାସ୍ ମାନଚିତ୍ର @eachପାଇଁ ଏକ ଲୁପ୍ ମିଶ୍ରଣ କରୁ |$grid-breakpoints

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

ଯଦି ତୁମେ ତୁମର ସଂଶୋଧନ କରିବାକୁ ପଡିବ $grid-breakpoints, ତୁମର ପରିବର୍ତ୍ତନ ସେହି ମାନଚିତ୍ରରେ ପୁନରାବୃତ୍ତି କରୁଥିବା ସମସ୍ତ ଲୁପ୍ ଉପରେ ପ୍ରଯୁଜ୍ୟ ହେବ |

CSS ଭେରିଏବଲ୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ 4 ଏହାର ସଂକଳିତ CSS ରେ ପ୍ରାୟ ଦୁଇ ଡଜନ CSS କଷ୍ଟମ୍ ଗୁଣ (ଭେରିଏବଲ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଆପଣଙ୍କ ବ୍ରାଉଜର୍ ଇନ୍ସପେକ୍ଟର, ଏକ କୋଡ୍ ସ୍ୟାଣ୍ଡବକ୍ସ, କିମ୍ବା ସାଧାରଣ ପ୍ରୋଟୋଟାଇପିଂରେ କାର୍ଯ୍ୟ କରିବାବେଳେ ଏଗୁଡିକ ଆମର ଥିମ୍ ରଙ୍ଗ, ବ୍ରେକପଏଣ୍ଟ, ଏବଂ ପ୍ରାଥମିକ ଫଣ୍ଟ ଷ୍ଟାକ ପରି ସାଧାରଣ ଭାବରେ ବ୍ୟବହୃତ ମୂଲ୍ୟକୁ ସହଜ ପ୍ରବେଶ ପ୍ରଦାନ କରିଥାଏ |

ଉପଲବ୍ଧ ଭେରିଏବଲ୍ |

ଏଠାରେ ଆମେ ଭେରିଏବଲ୍ ଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରୁ (ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ :rootଆବଶ୍ୟକ) | ସେଗୁଡ଼ିକ ଆମ _root.scssଫାଇଲ୍ ରେ ଅଛି |

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

ଉଦାହରଣଗୁଡିକ

CSS ଭେରିଏବଲ୍ ଗୁଡିକ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ସମାନ ନମନୀୟତା ପ୍ରଦାନ କରେ, କିନ୍ତୁ ବ୍ରାଉଜରକୁ ସେବା କରିବା ପୂର୍ବରୁ ସଂକଳନର ଆବଶ୍ୟକତା ବିନା | ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ଆମେ ଆମର ପୃଷ୍ଠାର ଫଣ୍ଟ ଏବଂ CSS ଭେରିଏବଲ୍ ସହିତ ଲିଙ୍କ୍ ଶ yles ଳୀକୁ ପୁନ res ସେଟ୍ କରୁ |

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ବ୍ରେକପଏଣ୍ଟ ଭେରିଏବଲ୍ |

ଯେତେବେଳେ ଆମେ ମୂଳତ our ଆମର CSS ଭେରିଏବଲ୍ ଗୁଡିକରେ ବ୍ରେକପଏଣ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ କରିଥିଲୁ (ଯଥା, --breakpoint-md), ଏଗୁଡିକ ମିଡିଆ ଜିଜ୍ଞାସାରେ ସମର୍ଥିତ ��ୁହେଁ , କିନ୍ତୁ ସେଗୁଡିକ ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ନିୟମ ମଧ୍ୟରେ ବ୍ୟବହୃତ ହୋଇପାରେ | ଏହି ବ୍ରେକପଏଣ୍ଟ ଭେରିଏବଲ୍ ଗୁଡିକ ପଛୁଆ ସୁସଙ୍ଗତତା ପାଇଁ ସଙ୍କଳିତ CSS ରେ ରହିଥାଏ, କାରଣ ସେଗୁଡିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ବ୍ୟବହାର କରାଯାଇପାରିବ | ନିର୍ଦ୍ଦିଷ୍ଟରେ ଅଧିକ ଜାଣନ୍ତୁ |

ଯାହା ସମର୍ଥିତ ନୁହେଁ ତାହାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :

@media (min-width: var(--breakpoint-sm)) {
  ...
}

ଯାହା ସମର୍ଥିତ ତାହାର ଏକ ଉଦାହରଣ ଏଠାରେ ଅଛି :

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}