ଥିମ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ |
ସହଜ ଥିମ୍ ଏବଂ ଉପାଦାନ ପରିବର୍ତ୍ତନ ପାଇଁ ଗ୍ଲୋବାଲ୍ ଷ୍ଟାଇଲ୍ ପସନ୍ଦ ପାଇଁ ଆମର ନୂତନ ବିଲ୍ଟ-ଇନ୍ ସାସ୍ ଭେରିଏବଲ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ 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 ନ୍ୟସ୍ତ ହେବ ନାହିଁ |
ସମାନ ସାସ୍ ଫାଇଲ୍ ମଧ୍ୟରେ ଭେରିଏବଲ୍ ଓଭରବ୍ରିଡ୍ ଡିଫଲ୍ଟ ଭେରିଏବଲ୍ ପୂର୍ବରୁ କିମ୍ବା ପରେ ଆସିପାରେ | ଯଦିଓ, ସାସ୍ ଫାଇଲଗୁଡିକ ଉପରେ ନବଲିଖନ କରିବାବେଳେ, ବୁଟଷ୍ଟ୍ରାପ୍ ର ସାସ୍ ଫାଇଲଗୁଡିକ ଆମଦାନୀ କରିବା ପୂର୍ବରୁ ଆପଣଙ୍କର ଓଭରବ୍ରିଡ୍ ନିଶ୍ଚିତ ଭାବରେ ଆସିବ |
ଏଠାରେ ଏକ ଉଦାହରଣ ଅଛି ଯାହାକି 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
:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସାସ୍ ମାନଚିତ୍ରରେ କିଛି ନିର୍ଦ୍ଦିଷ୍ଟ କିଗୁଡ଼ିକର ଉପସ୍ଥିତି ଅନୁମାନ କରେ ଯେହେତୁ ଆମେ ଏହାକୁ ନିଜେ ବ୍ୟବହାର କରୁ ଏବଂ ବିସ୍ତାର କରୁ | ଯେହେତୁ ଆପଣ ଅନ୍ତର୍ଭୁକ୍ତ ମାନଚିତ୍ରଗୁଡ଼ିକୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତି, ଆପଣ ତ୍ରୁଟିର ସମ୍ମୁଖୀନ ହୋଇପାରନ୍ତି ଯେଉଁଠାରେ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ସାସ୍ ମାନଚିତ୍ରର ଚାବି ବ୍ୟବହାର କରାଯାଏ |
ଉଦାହରଣ ସ୍ୱରୂପ, ଆମେ ଲିଙ୍କ୍, ବଟନ୍, ଏବଂ ଫର୍ମ ଷ୍ଟେଟସ୍ ପାଇଁ 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 କମ୍ପାଇଲ୍ କରନ୍ତୁ |
_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 |
ବିଭିନ୍ନ ଉପାଦାନଗୁଡ଼ିକରେ ପୂର୍ବ ନିର୍ଦ୍ଧାରିତ transition s କୁ ସକ୍ଷମ କରିଥାଏ | |
$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
ରଙ୍ଗ ସ୍କିମ୍ ସୃଷ୍ଟି କରିବା ପାଇଁ ଏକ ଛୋଟ ରଙ୍ଗ ପ୍ୟାଲେଟ୍ ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସମସ୍ତ ରଙ୍ଗର ଏକ ସବ୍ସେଟ୍ ବ୍ୟବହାର କରୁ, ଯାହା ଆମ ଫାଇଲ୍ ରେ ସାସ୍ ଭେରିଏବଲ୍ ଏବଂ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ମଧ୍ୟ ଉପଲବ୍ଧ |
ଧୂସର ଭେରିଏବଲ୍ସର ଏକ ବିସ୍ତାରିତ ସେଟ୍ ଏବଂ scss/_variables.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
, ତୁମର ପରିବର୍ତ୍ତନ ସେହି ମାନଚିତ୍ରରେ ପୁନରାବୃତ୍ତି କରୁଥିବା ସମସ୍ତ ଲୁପ୍ ଉପରେ ପ୍ରଯୁଜ୍ୟ ହେବ |
ବୁଟଷ୍ଟ୍ରାପ୍ 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);
}
ତୁମର ମିଡିଆ ପ୍ରଶ୍ନଗୁଡ଼ିକରେ ତୁମେ ଆମର ବ୍ରେକପଏଣ୍ଟ ଭେରିଏବଲ୍ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବ:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}