ମୁଖ୍ୟ ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ | ଡକସ୍ ନେଭିଗେସନ୍ କୁ ଯାଆନ୍ତୁ |
in English

ରଙ୍ଗ

ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ବିସ୍ତୃତ ରଙ୍ଗ ସିଷ୍ଟମ୍ ଦ୍ୱାରା ସମର୍ଥିତ ଯାହା ଆମର ଶ yles ଳୀ ଏବଂ ଉପାଦାନଗୁଡ଼ିକୁ ଥିମ୍ କରେ | ଏହା ଯେକ any ଣସି ପ୍ରକଳ୍ପ ପାଇଁ ଅଧିକ ବିସ୍ତୃତ କଷ୍ଟମାଇଜେସନ୍ ଏବଂ ବିସ୍ତାରକୁ ସକ୍ଷମ କରିଥାଏ |

ଏହି ପୃଷ୍ଠାରେ |

ଥିମ୍ ରଙ୍ଗ |

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

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

ଏହି ସମସ୍ତ ରଙ୍ଗ ଏକ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ଉପଲବ୍ଧ , $theme-colors।

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ଏହି ରଙ୍ଗଗୁଡ଼ିକୁ କିପରି ରୂପାନ୍ତର କରାଯିବ ସେଥିପାଇଁ ଆମର ସାସ୍ ମାନଚିତ୍ର ଏବଂ ଲୁପ୍ ଡକସ୍ ଯାଞ୍ଚ କରନ୍ତୁ |

ସମସ୍ତ ରଙ୍ଗ |

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

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

$ ନୀଳ# 0d6efd
$ ନୀଳ -100
$ ନୀଳ -200
$ ନୀଳ -300
$ ନୀଳ -400
$ ନୀଳ -500
$ ନୀଳ -600
$ ନୀଳ -700
$ ନୀଳ -800
$ ନୀଳ -900
$ ଇଣ୍ଡିଗୋ |# 6610f2
$ ଇଣ୍ଡିଗୋ -100
$ ଇଣ୍ଡିଗୋ -200
$ ଇଣ୍ଡିଗୋ -300
$ ଇଣ୍ଡିଗୋ -400
$ ଇଣ୍ଡିଗୋ -500
$ ଇଣ୍ଡିଗୋ -600
$ ଇଣ୍ଡିଗୋ -700
$ ଇଣ୍ଡିଗୋ -800
$ ଇଣ୍ଡିଗୋ -900
$ ବାଇଗଣୀ |# 6f42c1
$ ବାଇଗଣୀ -100
$ ବାଇଗଣୀ -200
$ ବାଇଗଣୀ -300
$ ବାଇଗଣୀ -400
$ ବାଇଗଣୀ -500
$ ବାଇଗଣୀ -600 |
$ ବାଇଗଣୀ -700
$ ବାଇଗଣୀ -800
$ ବାଇଗଣୀ -900
$ ଗୋଲାପୀ |# d63384
$ ଗୋଲାପୀ -100
$ ଗୋଲାପୀ -200
$ ଗୋଲାପୀ -300
$ ଗୋଲାପୀ -400
$ ଗୋଲାପୀ -500 |
$ ଗୋଲାପୀ -600 |
$ ଗୋଲାପୀ -700
$ ଗୋଲାପୀ -800 |
$ ଗୋଲାପୀ -900
$ ଲାଲ୍ |# dc3545
$ red-100
$ red-200
$ red-300
$ red-400
$ red-500
$ red-600
$ red-700
$ red-800
$ red-900
$ କମଳା |# fd7e14
$ କମଳା -100
$ କମଳା -200
$ କମଳା -300
$ କମଳା -400
$ କମଳା -500
$ କମଳା -600
$ କମଳା -700
$ କମଳା -800
$ କମଳା -900
$ ହଳଦିଆ |# ffc107
$ ହଳଦିଆ -100
$ ହଳଦିଆ -200
$ ହଳଦିଆ -300
$ ହଳଦିଆ -400
$ ହଳଦିଆ -500
$ ହଳଦିଆ -600
$ ହଳଦିଆ -700
$ ହଳଦିଆ -800
$ ହଳଦିଆ -900
$ ସବୁଜ# 198754
$ ସବୁଜ -100
$ ସବୁଜ -200
$ ସବୁଜ -300
$ ସବୁଜ -400
$ ସବୁଜ -500
$ ସବୁଜ -600
$ ସବୁଜ -700
$ ସବୁଜ -800
$ ସବୁଜ -900
$ ଟିଲ୍# 20c997
$ teal-100
$ teal-200
$ teal-300
$ teal-400
$ teal-500
$ teal-600
$ teal-700
$ teal-800
$ teal-900
$ ସିଆନ୍ |# 0dcaf0
$ cyan-100
$ cyan-200
$ cyan-300
$ cyan-400
$ cyan-500
$ cyan-600
$ cyan-700
$ cyan-800
$ cyan-900
$ ଧୂସର -500# adb5bd
$ ଧୂସର -100
$ ଧୂସର -200
$ ଧୂସର -300
$ ଧୂସର -400
$ ଧୂସର -500
$ ଧୂସର -600
$ ଧୂସର -700
$ ଧୂସର -800
$ ଧୂସର -900
$ କଳା# 000
$ ଧଳା#fff

ସାସ୍ ଉପରେ ଟିପ୍ପଣୀ |

ସାସ୍ ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରିପାରିବ ନାହିଁ, ତେଣୁ ଆମେ ମାନୁଆଲ ଭାବରେ ପ୍ରତ୍ୟେକ ଟିଣ୍ଟ୍ ପାଇଁ ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରି ନିଜକୁ ଛାଇ କରିଥାଉ | ଆମେ ମିଡପଏଣ୍ଟ ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରୁ (ଯଥା, $blue-500) ଏବଂ ସାସ୍ ର mix()ରଙ୍ଗ ଫଙ୍କସନ୍ ମାଧ୍ୟମରେ ଆମର ରଙ୍ଗକୁ ଟାଇଟ୍ (ହାଲୁକା) କିମ୍ବା ଛାଇ (ଗା dark ଼) କରିବା ପାଇଁ କଷ୍ଟମ୍ ରଙ୍ଗ ଫଙ୍କସନ୍ ବ୍ୟବହାର କରୁ |

ବ୍ୟବହାର mix()କରିବା ସମାନ ନୁହେଁ lighten()ଏବଂ darken()- ପୂର୍ବ ନିର୍ଦ୍ଦିଷ୍ଟ ରଙ୍ଗକୁ ଧଳା କିମ୍ବା କଳା ସହିତ ମିଶ୍ରଣ କରିଥାଏ, ଶେଷଟି କେବଳ ପ୍ରତ୍ୟେକ ରଙ୍ଗର ହାଲୁକା ମୂଲ୍ୟକୁ ସଜାଡିଥାଏ | ଏହି କୋଡପେନ୍ ଡେମୋରେ ଦେଖାଯାଇଥିବା ପରି ଫଳାଫଳ ହେଉଛି ରଙ୍ଗର ଏକ ସମ୍ପୂର୍ଣ୍ଣ ସଂପୂର୍ଣ୍ଣ ସୁଟ୍ |

ଆମର tint-color()ଏବଂ shade-color()ଫଙ୍କସନ୍ ଗୁଡିକ mix()ଆମର $theme-color-intervalଭେରିଏବଲ୍ ସହିତ ବ୍ୟବହାର କରେ, ଯାହା ଆମେ ଉତ୍ପାଦନ କରୁଥିବା ପ୍ରତ୍ୟେକ ମିଶ୍ରିତ ରଙ୍ଗ ପାଇଁ ଏକ ଷ୍ଟେପ୍ ଶତକଡ଼ା ମୂଲ୍ୟ ନିର୍ଦ୍ଦିଷ୍ଟ କରେ | ପୂର୍ଣ୍ଣ ଉତ୍ସ କୋଡ୍ ପାଇଁ scss/_functions.scssଏବଂ ଫାଇଲଗୁଡିକ ଦେଖନ୍ତୁ |scss/_variables.scss

ରଙ୍ଗ ସାସ୍ ମାନଚିତ୍ରଗୁଡିକ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ସାସ୍ ଫାଇଲଗୁଡିକ ତିନୋଟି ମାନଚିତ୍ର ଅନ୍ତର୍ଭୂକ୍ତ କରେ ଯାହା ଆପଣଙ୍କୁ ଶୀଘ୍ର ଏବଂ ସହଜରେ ରଙ୍ଗ ତାଲିକା ଏବଂ ସେମାନଙ୍କର ହେକ୍ସ ମୂଲ୍ୟ ଉପରେ ଲୁପ୍ କରିବାରେ ସାହାଯ୍ୟ କରେ |

  • $colors500ଆମର ସମସ୍ତ ଉପଲବ୍ଧ ଆଧାର ( ) ରଙ୍ଗ ତାଲିକାଭୁକ୍ତ କରେ |
  • $theme-colorsସମସ୍ତ ଅର୍ଥଗତ ଭାବରେ ନାମିତ ଥିମ୍ ରଙ୍ଗଗୁଡିକ ତାଲିକାଭୁକ୍ତ କରେ (ନିମ୍ନରେ ଦର୍ଶାଯାଇଛି)
  • $graysଧୂସର ରଙ୍ଗର ସମସ୍ତ ରଙ୍ଗ ଏବଂ ଛାୟା ତାଲିକାଭୁକ୍ତ କରେ |

ଭିତରେ 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
);

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

ଉଦାହରଣ |

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

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

ରଙ୍ଗ ମୂଲ୍ୟ ସେଟିଂ ଏବଂ ବ୍ୟବହାର ପାଇଁ ରଙ୍ଗ ଏବଂ ପୃଷ୍ଠଭୂମି ଉପଯୋଗୀତା ଶ୍ରେଣୀଗୁଡ଼ିକ ମଧ୍ୟ ଉପଲବ୍ଧ |colorbackground-color500

ଉପଯୋଗିତା ସୃଷ୍ଟି କରୁଛି |

V5.1.0 ରେ ଯୋଡା ଯାଇଛି |

ପ୍ରତ୍ୟେକ ରଙ୍ଗ ଭେରିଏବଲ୍ ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ ନାହିଁ , କିନ୍ତୁ ଆପଣ ଆମର ଉପଯୋଗୀତା APIcolor ଏବଂ v5.1.0 ରେ ଯୋଡି ହୋଇଥିବା ଆମର ବିସ୍ତାରିତ ସାସ୍ ମାନଚିତ୍ର ସହିତ ଆପଣ ନିଜେ ଏହାକୁ ସୃଷ୍ଟି କରିପାରିବେ |background-color

  1. ଆରମ୍ଭ କରିବାକୁ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆପଣ ଆମର କାର୍ଯ୍ୟ, ଭେରିଏବଲ୍, ମିକ୍ସିନ ଏବଂ ୟୁଟିଲିଟି ଆମଦାନୀ କରିଛନ୍ତି |
  2. map-merge-multiple()ଏକ ନୂତନ ମାନଚିତ୍ରରେ ଏକାଧିକ ସାସ୍ ମାନଚିତ୍ରକୁ ଶୀଘ୍ର ମିଶ୍ରଣ କରିବାକୁ ଆମର କାର୍ଯ୍ୟ ବ୍ୟବହାର କରନ୍ତୁ |
  3. {color}-{level}ଏକ ଶ୍ରେଣୀ ନାମ ସହିତ ଯେକ ut ଣସି ଉପଯୋଗିତାକୁ ବିସ୍ତାର କରିବାକୁ ଏହି ନୂତନ ମିଳିତ ମାନଚିତ୍ରକୁ ମିଶ୍ରଣ କରନ୍ତୁ |

ଏଠାରେ ଏକ ଉଦାହରଣ ଅଛି ଯାହା .text-purple-500ଉପରୋକ୍ତ ପଦକ୍ଷେପଗୁଡ଼ିକୁ ବ୍ୟବହାର କରି ପାଠ୍ୟ ରଙ୍ଗ ଉପଯୋଗୀତା ସୃଷ୍ଟି କରେ (ଉଦାହରଣ ସ୍ୱରୂପ) |

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

.text-{color}-{level}ଏହା ପ୍ରତ୍ୟେକ ରଙ୍ଗ ଏବଂ ସ୍ତର ପାଇଁ ନୂତନ ଉପଯୋଗୀତା ସୃଷ୍ଟି କରିବ | ଆପଣ ଅନ୍ୟ କ ut ଣସି ଉପଯୋଗୀତା ଏବଂ ସମ୍ପତ୍ତି ପାଇଁ ମଧ୍ୟ ସମାନ କାର୍ଯ୍ୟ କରିପାରିବେ |