ଉପଯୋଗିତା API
ୟୁଟିଲିଟି କ୍ଲାସ୍ ସୃଷ୍ଟି କରିବାକୁ ୟୁଟିଲିଟି API ହେଉଛି ଏକ ସାସ୍-ଆଧାରିତ ଉପକରଣ |
ବୁଟଷ୍ଟ୍ରାପ୍ ୟୁଟିଲିଟିଗୁଡିକ ଆମର ୟୁଟିଲିଟି API ସହିତ ସୃଷ୍ଟି ହୋଇଥାଏ ଏବଂ ସାସ୍ ମାଧ୍ୟମରେ ଆମର ୟୁଟିଲିଟି କ୍ଲାସ୍ ର ଡିଫଲ୍ଟ ସେଟ୍ ପରିବର୍ତ୍ତନ କିମ୍ବା ବିସ୍ତାର କରିବାକୁ ବ୍ୟବହୃତ ହୋଇପାରେ | ଆମର ଉପଯୋଗୀତା API ବିଭିନ୍ନ ବିକଳ୍ପ ସହିତ ଶ୍ରେଣୀର ପରିବାର ସୃଷ୍ଟି ପାଇଁ ସାସ୍ ମାନଚିତ୍ର ଏବଂ କାର୍ଯ୍ୟଗୁଡ଼ିକର ଏକ କ୍ରମ ଉପରେ ଆଧାରିତ | ଯଦି ଆପଣ ସାସ୍ ମାନଚିତ୍ର ସହିତ ଅପରିଚିତ, ତେବେ ଆରମ୍ଭ କରିବାକୁ ଅଫିସିଆଲ୍ ସାସ୍ ଡକସ୍ ଉପରେ ପ read ନ୍ତୁ |
ମାନଚିତ୍ରଟି ଆମର ସମସ୍ତ ଉପଯୋଗିତା ଧାରଣ କରିଥାଏ ଏବଂ ପରେ ଉପସ୍ଥିତ ଥିଲେ ଆପଣଙ୍କ କଷ୍ଟମ୍ ମାନଚିତ୍ର $utilities
ସହିତ ମିଶ୍ରିତ ହୁଏ | $utilities
ୟୁଟିଲିଟି ମାନଚିତ୍ରରେ ଉପଯୋଗୀ ଗୋଷ୍ଠୀର ଏକ ଚାବି ତାଲିକା ଅଛି ଯାହା ନିମ୍ନଲିଖିତ ବିକଳ୍ପଗୁଡ଼ିକୁ ଗ୍ରହଣ କରେ:
ବିକଳ୍ପ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ବର୍ଣ୍ଣନା |
---|---|---|---|
property |
ଆବଶ୍ୟକ | - | ସମ୍ପତ୍ତିର ନାମ, ଏହା ଏକ ଷ୍ଟ୍ରିଙ୍ଗ୍ କିମ୍ବା ଷ୍ଟ୍ରିଙ୍ଗର ଏକ ଆରେ ହୋଇପାରେ (ଉଦାହରଣ ସ୍ୱରୂପ, ଭୂସମାନ୍ତର ପ୍ୟାଡିଂ କିମ୍ବା ମାର୍ଜିନ) | |
values |
ଆବଶ୍ୟକ | - | ମୂଲ୍ୟଗୁଡିକର ତାଲିକା, କିମ୍ବା ଏକ ମାନଚିତ୍ର ଯଦି ଆପଣ ଶ୍ରେଣୀ ନାମ ମୂଲ୍ୟ ସହିତ ସମାନ ହେବାକୁ ଚାହୁଁନାହାଁନ୍ତି | ଯଦି null ମାନଚିତ୍ର ଚାବି ଭାବରେ ବ୍ୟବହୃତ ହୁଏ, ଏହା ସଂକଳିତ ନୁହେଁ | |
class |
ବ tion କଳ୍ପିକ | ଶୂନ୍ୟ | ଉତ୍ପାଦିତ ଶ୍ରେଣୀର ନାମ | ଯଦି ପ୍ରଦାନ କରାଯାଇ ନାହିଁ ଏବଂ property ଷ୍ଟ୍ରିଙ୍ଗଗୁଡିକର ଏକ ଆରେ, ଆରେର class ପ୍ରଥମ ଉପାଦାନକୁ ଡିଫଲ୍ଟ ହେବ property | |
css-var |
ବ tion କଳ୍ପିକ | false |
CSS ନିୟମ ପରିବର୍ତ୍ତେ CSS ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରିବାକୁ ବୁଲିଅନ୍ | |
local-vars |
ବ tion କଳ୍ପିକ | ଶୂନ୍ୟ | CSS ନିୟମ ସହିତ ସୃଷ୍ଟି କରିବାକୁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ସର ମାନଚିତ୍ର | |
state |
ବ tion କଳ୍ପିକ | ଶୂନ୍ୟ | ସୃଷ୍ଟି କରିବାକୁ ଛଉ-ଶ୍ରେଣୀ ପ୍ରକାରଗୁଡ଼ିକର ତାଲିକା (ଯଥା, :hover କିମ୍ବା :focus ) | |
responsive |
ବ tion କଳ୍ପିକ | false |
ପ୍ରତିକ୍ରିୟାଶୀଳ ଶ୍ରେଣୀଗୁଡିକ ସୃଷ୍ଟି ହେବା ଉଚିତ କି ନାହିଁ ବୁଲିୟାନ୍ ସୂଚାଇଥାଏ | |
rfs |
ବ tion କଳ୍ପିକ | false |
RFS ସହିତ ତରଳ ଉଦ୍ଧାରକୁ ସକ୍ଷମ କରିବାକୁ ବୁଲିଅନ୍ | |
print |
ବ tion କଳ୍ପିକ | false |
ପ୍ରିଣ୍ଟ୍ କ୍ଲାସ୍ ସୃଷ୍ଟି ହେବା ଆବଶ୍ୟକ କି ନୁହେଁ ବୋଲି ବୁଲିୟାନ୍ ସୂଚିତ କରେ | |
rtl |
ବ tion କଳ୍ପିକ | true |
ଉପଯୋଗିତାକୁ RTL ରେ ରଖିବା ଉଚିତ କି ନାହିଁ ବୁଲିୟାନ୍ ସୂଚାଇଥାଏ | |
API ବ୍ୟାଖ୍ୟା କଲା |
ସମସ୍ତ ୟୁଟିଲିଟି ଭେରିଏବଲ୍ ଗୁଡିକ $utilities
ଆମ _utilities.scss
ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ମଧ୍ୟରେ ଭେରିଏବଲ୍ ସହିତ ଯୋଡା ଯାଇଛି | ପ୍ରତ୍ୟେକ ଉପଯୋଗୀତା ଗୋଷ୍ଠୀ ଏହିପରି କିଛି ଦେଖାଯାଏ:
$utilities: (
"opacity": (
property: opacity,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ଯାହା ନିମ୍ନଲିଖିତ ଫଳାଫଳ କରେ:
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }
ସମ୍ପତ୍ତି
ଯେକ key ଣସି ଉପଯୋଗିତା ପାଇଁ ଆବଶ୍ୟକ property
ଚାବି ସେଟ୍ ହେବା ଆବଶ୍ୟକ, ଏବଂ ଏଥିରେ ଏକ ବ valid ଧ CSS ସମ୍ପତ୍ତି ରହିବା ଆବଶ୍ୟକ | ଏହି ସମ୍ପତ୍ତି ଉତ୍ପାଦିତ ଉପଯୋଗିତା ନିୟମରେ ବ୍ୟବହୃତ ହୁଏ | ଯେତେବେଳେ class
ଚାବିକୁ ବାଦ ଦିଆଯାଏ, ଏହା ମଧ୍ୟ ଡିଫଲ୍ଟ ଶ୍ରେଣୀ ନାମ ଭାବରେ କାର୍ଯ୍ୟ କରେ | text-decoration
ଉପଯୋଗିତାକୁ ବିଚାର କରନ୍ତୁ :
$utilities: (
"text-decoration": (
property: text-decoration,
values: none underline line-through
)
);
ଆଉଟପୁଟ୍:
.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
ମୂଲ୍ୟଗୁଡ଼ିକ
ନିର୍ଦ୍ଦିଷ୍ଟ ଶ୍ରେଣୀର କେଉଁ ମୂଲ୍ୟଗୁଡ଼ିକ ସୃଷ୍ଟି ହୋଇଥିବା ଶ୍ରେଣୀ ନାମ ଏବଂ ନିୟମରେ ବ୍ୟବହୃତ ହେବା ଉଚିତ ତାହା values
ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ଚାବି ବ୍ୟବହାର କରନ୍ତୁ | property
ଏକ ତାଲିକା କିମ୍ବା ମାନଚିତ୍ର ହୋଇପାରେ (ଉପଯୋଗୀତା କିମ୍ବା ସାସ୍ ଭେରିଏବଲ୍ ରେ ସେଟ୍) |
ଏକ ତାଲିକା ଭାବରେ, text-decoration
ଉପଯୋଗୀତା ପରି :
values: none underline line-through
ଏକ ମାନଚିତ୍ର ଭାବରେ, opacity
ଉପଯୋଗୀତା ପରି :
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
ଏକ ସାସ୍ ଭେରିଏବଲ୍ ଭାବରେ, ଯାହା ଆମର position
ଉପଯୋଗିତା ପରି ତାଲିକା କିମ୍ବା ମାନଚିତ୍ର ସେଟ୍ କରେ :
values: $position-values
କ୍ଲାସ୍
class
ସଂକଳିତ CSS ରେ ବ୍ୟବହୃତ ଶ୍ରେଣୀ ଉପସର୍ଗ ପରିବର୍ତ୍ତନ କରିବାକୁ ବିକଳ୍ପ ବ୍ୟବହାର କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ରୁ ପରିବର୍ତ୍ତନ .opacity-*
କରିବାକୁ .o-*
:
$utilities: (
"opacity": (
property: opacity,
class: o,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ଆଉଟପୁଟ୍:
.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }
CSS ଭେରିଏବଲ୍ ଉପଯୋଗିତା |
css-var
ବୁଲିଅନ୍ ଅପ୍ସନ୍ କୁ ସେଟ୍ କରନ୍ତୁ ଏବଂ API ସାଧାରଣ ନିୟମ true
ବଦଳରେ ପ୍ରଦତ୍ତ ଚୟନକର୍ତ୍ତା ପାଇଁ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରିବ | property: value
ଆମର .text-opacity-*
ଉପଯୋଗିତାକୁ ବିଚାର କରନ୍ତୁ:
$utilities: (
"text-opacity": (
css-var: true,
class: text-opacity,
values: (
25: .25,
50: .5,
75: .75,
100: 1
)
),
);
ଆଉଟପୁଟ୍:
.text-opacity-25 { --bs-text-opacity: .25; }
.text-opacity-50 { --bs-text-opacity: .5; }
.text-opacity-75 { --bs-text-opacity: .75; }
.text-opacity-100 { --bs-text-opacity: 1; }
ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ |
ଏକ ସାସ୍ ମାନଚିତ୍ର ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ବିକଳ୍ପ ବ୍ୟବହାର କରନ୍ତୁ local-vars
ଯାହା ୟୁଟିଲିଟି ଶ୍ରେଣୀର ନିୟମ ମଧ୍ୟରେ ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ ସୃଷ୍ଟି କରିବ | ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଉତ୍ପାଦିତ CSS ନିୟମରେ ସେହି ସ୍ଥାନୀୟ CSS ଭେରିଏବଲ୍ଗୁଡ଼ିକୁ ଗ୍ରାସ କରିବା ପାଇଁ ଏହା ଅତିରିକ୍ତ କାର୍ଯ୍ୟ ଆବଶ୍ୟକ କରିପାରନ୍ତି | ଉଦାହରଣ ସ୍ୱରୂପ, ଆମର .bg-*
ଉପଯୋଗିତାକୁ ବିଚାର କରନ୍ତୁ:
$utilities: (
"background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: map-merge(
$utilities-bg-colors,
(
"transparent": transparent
)
)
)
);
ଆଉଟପୁଟ୍:
.bg-primary {
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
ରାଜ୍ୟଗୁଡିକ |
state
ଛଉ-ଶ୍ରେଣୀ ପରିବର୍ତ୍ତନ ସୃଷ୍ଟି କରିବାକୁ ବିକଳ୍ପ ବ୍ୟବହାର କରନ୍ତୁ | ଉଦାହରଣ ଛଉ ଶ୍ରେଣୀଗୁଡ଼ିକ ହେଉଛି :hover
ଏବଂ :focus
। ଯେତେବେଳେ ରାଜ୍ୟଗୁଡିକର ଏକ ତାଲିକା ପ୍ରଦାନ କରାଯାଏ, ସେହି ଛଉ ଶ୍ରେଣୀ ପାଇଁ ଶ୍ରେଣୀ ନାମଗୁଡ଼ିକ ସୃଷ୍ଟି ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, ହୋଭରରେ ସ୍ୱଚ୍ଛତା ପରିବର୍ତ୍ତନ କରିବାକୁ, ଯୋଡନ୍ତୁ state: hover
ଏବଂ ଆପଣ .opacity-hover:hover
ଆପଣଙ୍କର ସଂକଳିତ CSS ରେ ପ୍ରବେଶ କରିବେ |
ଏକାଧିକ ଛଉ କ୍ଲାସ୍ ଆବଶ୍ୟକ କରନ୍ତି କି? ରାଜ୍ୟଗୁଡିକର ଏକ ସ୍ପେସ୍ ପୃଥକ ତାଲିକା ବ୍ୟବହାର କରନ୍ତୁ : state: hover focus
।
$utilities: (
"opacity": (
property: opacity,
class: opacity,
state: hover,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ଆଉଟପୁଟ୍:
.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }
ପ୍ରତିକ୍ରିୟାଶୀଳ |
ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟଗୁଡିକରେresponsive
ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା (ଯଥା, .opacity-md-25
) ସୃଷ୍ଟି କରିବାକୁ ବୁଲିଅନ୍ ଯୋଡନ୍ତୁ |
$utilities: (
"opacity": (
property: opacity,
responsive: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ଆଉଟପୁଟ୍:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) {
.opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1 !important; }
}
@media (min-width: 768px) {
.opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1 !important; }
}
@media (min-width: 992px) {
.opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1 !important; }
}
@media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1 !important; }
}
@media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1 !important; }
}
ମୁଦ୍ରଣ
print
ଅପ୍ସନ୍ ସକ୍ଷମ କରିବା ପ୍ରିଣ୍ଟ୍ ପାଇଁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ମଧ୍ୟ ସୃଷ୍ଟି କରିବ, ଯାହା କେବଳ @media print { ... }
ମିଡିଆ ଜିଜ୍ଞାସା ମଧ୍ୟରେ ପ୍ରୟୋଗ ହେବ |
$utilities: (
"opacity": (
property: opacity,
print: true,
values: (
0: 0,
25: .25,
50: .5,
75: .75,
100: 1,
)
)
);
ଆଉଟପୁଟ୍:
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }
@media print {
.opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1 !important; }
}
ଗୁରୁତ୍ୱ
API ଦ୍ ated ାରା ଉତ୍ପାଦିତ ସମସ୍ତ ଉପଯୋଗୀତା !important
ନିଶ୍ଚିତ କରେ ଯେ ସେମାନେ ଉପାଦାନ ଏବଂ ମୋଡିଫାୟର୍ କ୍ଲାସ୍କୁ ଉଦ୍ଦିଷ୍ଟ ଭାବରେ ନବଲିଖନ କରନ୍ତି | $enable-important-utilities
ଭେରିଏବଲ୍ (ଡିଫଲ୍ଟ ଟୁ true
) ସହିତ ଆପଣ ଏହି ସେଟିଂକୁ ସର୍ବଭାରତୀୟ ସ୍ତରରେ ଟୋଗଲ୍ କରିପାରିବେ |
API ବ୍ୟବହାର କରି |
ବର୍ତ୍ତମାନ ଯେହେତୁ ଆପଣ ଉପଯୋଗିତା API କିପରି କାର୍ଯ୍ୟ କରେ, ତୁମର ନିଜସ୍ୱ କଷ୍ଟମ୍ କ୍ଲାସ୍ କିପରି ଯୋଡାଯିବ ଏବଂ ଆମର ଡିଫଲ୍ଟ ଉପଯୋଗିତାକୁ କିପରି ରୂପାନ୍ତର କରିବେ ଶିଖନ୍ତୁ |
ଉପଯୋଗିତାକୁ ନବଲିଖନ କରନ୍ତୁ |
ସମାନ ଚାବି ବ୍ୟବହାର କରି ବିଦ୍ୟମାନ ଉପଯୋଗିତାକୁ ନବଲିଖନ କରନ୍ତୁ | ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ଆପଣ ଅତିରିକ୍ତ ପ୍ରତିକ୍ରିୟାଶୀଳ ଓଭରଫ୍ଲୋ ୟୁଟିଲିଟି କ୍ଲାସ୍ ଚାହୁଁଛନ୍ତି, ଆପଣ ଏହା କରିପାରିବେ:
$utilities: (
"overflow": (
responsive: true,
property: overflow,
values: visible hidden scroll auto,
),
);
ଉପଯୋଗିତା ଯୋଗକର |
$utilities
ଏକ ସହିତ ଡିଫଲ୍ଟ ମାନଚିତ୍ରରେ ନୂତନ ଉପଯୋଗିତା ଯୋଗ କରାଯାଇପାରିବ map-merge
| ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆମର ଆବଶ୍ୟକୀୟ ସାସ୍ ଫାଇଲଗୁଡିକ ଏବଂ _utilities.scss
ପ୍ରଥମେ ଆମଦାନୀ ହୋଇଛି, ତାପରେ map-merge
ଆପଣଙ୍କର ଅତିରିକ୍ତ ଉପଯୋଗିତା ଯୋଡିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ | cursor
ଉଦାହରଣ ସ୍ୱରୂପ, ଏଠାରେ ତିନୋଟି ମୂଲ୍ୟ ସହିତ ଏକ ପ୍ରତିକ୍ରିୟାଶୀଳ ଉପଯୋଗିତା କିପରି ଯୋଡାଯାଏ ତାହା ଏଠାରେ ଅଛି |
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
$utilities
ଡିଫଲ୍ଟ ମାନଚିତ୍ରରେ map-get
ଏବଂ map-merge
କାର୍ଯ୍ୟଗୁଡ଼ିକ ସହିତ ବିଦ୍ୟମାନ ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ | ନିମ୍ନରେ ଥିବା ଉଦାହରଣରେ, ଆମେ width
ଉପଯୋଗିତା ପାଇଁ ଏକ ଅତିରିକ୍ତ ମୂଲ୍ୟ ଯୋଗ କରୁଛୁ | ଏକ ପ୍ରାରମ୍ଭିକରୁ ଆରମ୍ଭ କରନ୍ତୁ map-merge
ଏବଂ ତାପରେ ଆପଣ କେଉଁ ଉପଯୋଗିତାକୁ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚାହୁଁଛନ୍ତି ତାହା ନିର୍ଦ୍ଦିଷ୍ଟ କରନ୍ତୁ | ସେଠାରୁ, ଉପଯୋଗୀତାର ବିକଳ୍ପ ଏବଂ ମୂଲ୍ୟଗୁଡ଼ିକୁ ଆକସେସ୍ ଏବଂ ରୂପାନ୍ତର କରିବାକୁ ନେଷ୍ଟେଡ୍ "width"
ମାନଚିତ୍ର ଆଣ |map-get
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(10: 10%),
),
),
),
)
);
ପ୍ରତିକ୍ରିୟାଶୀଳ ସକ୍ଷମ କରନ୍ତୁ |
ଏକ ବିଦ୍ୟମାନ ଉପଯୋଗୀତା ସେଟ୍ ପାଇଁ ଆପଣ ପ୍ରତିକ୍ରିୟାଶୀଳ କ୍ଲାସ୍ ସକ୍ଷମ କରିପାରିବେ ଯାହା ଡିଫଲ୍ଟ ଭାବରେ ସମ୍ପ୍ରତି ପ୍ରତିକ୍ରିୟାଶୀଳ ନୁହେଁ | ଉଦାହରଣ ସ୍ୱରୂପ, border
ଶ୍ରେଣୀଗୁଡ଼ିକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ କରିବାକୁ:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ),
),
)
);
ଏହା ବର୍ତ୍ତମାନ .border
ଏବଂ .border-0
ପ୍ରତ୍ୟେକ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ସୃଷ୍ଟି କରିବ | ଆପଣଙ୍କର ଉତ୍ପାଦିତ CSS ଏହିପରି ଦେଖାଯିବ:
.border { ... }
.border-0 { ... }
@media (min-width: 576px) {
.border-sm { ... }
.border-sm-0 { ... }
}
@media (min-width: 768px) {
.border-md { ... }
.border-md-0 { ... }
}
@media (min-width: 992px) {
.border-lg { ... }
.border-lg-0 { ... }
}
@media (min-width: 1200px) {
.border-xl { ... }
.border-xl-0 { ... }
}
@media (min-width: 1400px) {
.border-xxl { ... }
.border-xxl-0 { ... }
}
ଉପଯୋଗିତାଗୁଡ଼ିକର ନାମ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
V4 ଉପଯୋଗିତା ହରାଉଛି, କିମ୍ବା ଅନ୍ୟ ନାମକରଣ ସମ୍ମିଳନୀରେ ଅଭ୍ୟସ୍ତ? ପ୍ରଦତ୍ତ ଉପଯୋଗିତା ର ଫଳାଫଳକୁ ନବଲିଖନ କରିବା ପାଇଁ ଉପଯୋଗିତା API କୁ ବ୍ୟବହାର କରାଯାଇପାରିବ class
- ଉଦାହରଣ ସ୍ୱରୂପ, .ms-*
ଉପଯୋଗିତାକୁ ପୁରୁଣା ନାମରେ ନାମିତ କରିବା ପାଇଁ .ml-*
:
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"margin-start": map-merge(
map-get($utilities, "margin-start"),
( class: ml ),
),
)
);
ଉପଯୋଗିତା ହଟାନ୍ତୁ |
ଗ୍ରୁପ୍ କି କୁ ସେଟ୍ କରି ଯେକ any ଣସି ଡିଫଲ୍ଟ ଉପଯୋଗୀତା ଅପସାରଣ କରନ୍ତୁ null
| ଉଦାହରଣ ସ୍ୱରୂପ, ଆମର ସମସ୍ତ width
ଉପଯୋଗିତାକୁ ଅପସାରଣ କରିବା ପାଇଁ, ଏକ ସୃଷ୍ଟି କରନ୍ତୁ $utilities
map-merge
ଏବଂ ଭିତରେ ଯୋଡନ୍ତୁ "width": null
|
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"width": null
)
);
RTL ରେ ଉପଯୋଗିତା ହଟାନ୍ତୁ |
କେତେକ ଧାର ମାମଲା RTL ଷ୍ଟାଇଲିଂକୁ କଷ୍ଟସାଧ୍ୟ କରିଥାଏ, ଯେପରିକି ଆରବୀରେ ରେଖା ବ୍ରେକ୍ | rtl
ଏହିପରି, ବିକଳ୍ପକୁ ସେଟିଂ କରି RTL ଆଉଟପୁଟରୁ ଉପଯୋଗିତାକୁ ଡ୍ରପ କରାଯାଇପାରିବ false
|
$utilities: (
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),
);
ଆଉଟପୁଟ୍:
/* rtl:begin:remove */
.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
/* rtl:end:remove */
RTLCSS remove
ନିୟନ୍ତ୍ରଣ ନିର୍ଦ୍ଦେଶନାମା ଯୋଗୁଁ ଏହା RTL ରେ କିଛି ଆଉଟପୁଟ୍ କରେନାହିଁ |