ବ୍ୟବଧାନ
ଏକ ଉପାଦାନର ରୂପକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପରେ ସର୍ଟହାଣ୍ଡ ପ୍ରତିକ୍ରିୟାଶୀଳ ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଫାଙ୍କ ଉପଯୋଗୀତା ଶ୍ରେଣୀର ଏକ ବ୍ୟାପକ ସୀମା ଅନ୍ତର୍ଭୁକ୍ତ |
ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ |
ଏକ ଉପାଦାନ କିମ୍ବା ଏହାର ପାର୍ଶ୍ of ର ଏକ ଉପସେଟକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ-ଅନୁକୂଳ marginକିମ୍ବା ମୂଲ୍ୟ ନ୍ୟସ୍ତ କରନ୍ତୁ | paddingବ୍ୟକ୍ତିଗତ ଗୁଣ, ସମସ୍ତ ଗୁଣ, ଏବଂ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଗୁଣ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | କ୍ଲାସଗୁଡିକ ଏକ ଡିଫଲ୍ଟ ସାସ୍ ମାନଚିତ୍ରରୁ ନିର୍ମିତ .25rem|3rem
ଟିପ୍ପଣୀ |
ବ୍ୟବଧାନ ଉପଯୋଗୀତା ଯାହା ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରଯୁଜ୍ୟ, ସେଠାରୁ xsକ xxlbreak ଣସି ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ନାହିଁ | ଏହାର କାରଣ ହେଉଛି ସେହି ଶ୍ରେଣୀଗୁଡ଼ିକ min-width: 0ଉପର ଏବଂ ଉପର ପ୍ରୟୋଗ କରାଯାଏ, ଏବଂ ଏହିପରି ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ଦ୍ୱାରା ବନ୍ଧା ନୁହେଁ | ଅବଶିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ, ତଥାପି, ଏକ ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
ପାଇଁ ,,,, ଏବଂ {property}{sides}-{size}ପାଇଁ ଫର୍ମାଟ୍ ବ୍ୟବହାର କରି ଶ୍ରେଣୀଗୁଡ଼ିକର ନାମକରଣ କରାଯାଇଛି |xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl
ଯେଉଁଠାରେ ସମ୍ପତ୍ତି ହେଉଛି ଗୋଟିଏ:
m- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |marginp- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |padding
ଯେଉଁଠାରେ ପାର୍ଶ୍ୱଗୁଡିକ ଗୋଟିଏ:
t- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-topକିମ୍ବା |padding-topb- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-bottomକିମ୍ବା |padding-bottoms- (ଆରମ୍ଭ) କ୍ଲାସ୍ ପାଇଁ ସେଟ୍margin-leftକିମ୍ବାpadding-leftLTR,margin-rightକିମ୍ବାpadding-rightRTL ରେ |e- (ଶେଷ) କ୍ଲାସ୍ ପାଇଁ ସେଟ୍margin-rightକିମ୍ବାpadding-rightLTR,margin-leftକିମ୍ବାpadding-leftRTL ରେ |x- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ*-leftଏବଂ |*-righty- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ*-topଏବଂ |*-bottom- ଖାଲି - ଶ୍ରେଣୀଗୁଡ଼ିକ ପାଇଁ ଯାହା ଉପାଦାନର ସମସ୍ତ 4 ପାର୍ଶ୍ୱରେ ସେଟ୍
marginକରେpadding|
ଯେଉଁଠାରେ ଆକାର ହେଉଛି:
0- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଏହାକୁ ଅପସାରଣ କରେmarginକିମ୍ବାpaddingଏହାକୁ ସେଟ୍ କରି |01- (ଡିଫଲ୍ଟ ଭାବରେ)marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpaddingପାଇଁ |$spacer * .252- (ଡିଫଲ୍ଟ ଭାବରେ)marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpaddingପାଇଁ |$spacer * .53- (ଡିଫଲ୍ଟ ଭାବରେ)marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpaddingପାଇଁ |$spacer4- (ଡିଫଲ୍ଟ ଭାବରେ)marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpaddingପାଇଁ |$spacer * 1.55- (ଡିଫଲ୍ଟ ଭାବରେ)marginକିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpaddingପାଇଁ |$spacer * 3auto- କ୍ଲାସ୍ ପାଇଁ ଯାହାmarginଅଟୋକୁ ସେଟ୍ କରେ |
(ସାସ୍ ମାନଚିତ୍ର ଭେରିଏବଲ୍ ରେ ଏଣ୍ଟ୍ରି ଯୋଗ କରି ଆପଣ ଅଧିକ ଆକାର ଯୋଡିପାରିବେ $spacers|)
ଉଦାହରଣଗୁଡିକ
ଏହି ଶ୍ରେଣୀର କିଛି ପ୍ରତିନିଧୀ ଉଦାହରଣ ଏଠାରେ ଅଛି:
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
ଭୂସମାନ୍ତର କେନ୍ଦ୍ର
ଅତିରିକ୍ତ ଭାବରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ଭୂସମାନ୍ତର ମାର୍ଜିନ୍ ସେଟ୍ କରି ଭୂସମାନ୍ତର .mx-autoକେନ୍ଦ୍ରିତ ଫିକ୍ସଡ୍-ଓସାର ବ୍ଲକ୍ ସ୍ତରର ବିଷୟବସ୍ତୁ ପାଇଁ ଏକ ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |display: blockwidthauto
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
ନକାରାତ୍ମକ ମାର୍ଜିନ୍ |
CSS ରେ, marginଗୁଣଗୁଡିକ ନକାରାତ୍ମକ ମୂଲ୍ୟଗୁଡିକ ବ୍ୟବହାର କରିପାରିବ ( paddingପାରିବ ନାହିଁ) | ଏହି ନକାରାତ୍ମକ ମାର୍ଜିନଗୁଡିକ ଡିଫଲ୍ଟ ଭାବରେ ଅକ୍ଷମ ହୋଇଛି , କିନ୍ତୁ ସେଟିଂ ଦ୍ୱାରା ସାସରେ ସକ୍ଷମ ହୋଇପାରିବ $enable-negative-margins: true|
ବାକ୍ୟବିନ୍ୟାସ ଡିଫଲ୍ଟ, ପଜିଟିଭ୍ ମାର୍ଜିନ୍ ଉପଯୋଗିତା ସହିତ ସମାନ, କିନ୍ତୁ nଅନୁରୋଧ କରାଯାଇଥିବା ଆକାର ପୂର୍ବରୁ ଯୋଗ ସହିତ | ଏଠାରେ ଏକ ଉଦାହରଣ ଶ୍ରେଣୀ ଅଛି ଯାହା ଏହାର ବିପରୀତ .mt-1:
.mt-n1 {
margin-top: -0.25rem !important;
}
ଫାଙ୍କା |
ବ୍ୟବହାର କରିବାବେଳେ , ଆପଣ ପ୍ୟାରେଣ୍ଟ୍ ଗ୍ରୀଡ୍ ପାତ୍ରରେ ଉପଯୋଗିତା display: gridବ୍ୟବହାର କରିପାରିବେ | ବ୍ୟକ୍ତିଗତ ଗ୍ରୀଡ୍ ଆଇଟମ୍ (ଏକ ପାତ୍ରର gapପିଲା) ରେ ମାର୍ଜିନ୍ ୟୁଟିଲିଟି ଯୋଡିବାକୁ ଏହା ସଞ୍ଚୟ କରିପାରିବ | ଗ୍ୟାପ୍ ଉପଯୋଗିତା ଡିଫଲ୍ଟ ଭାବରେ ପ୍ରତିକ୍ରିୟାଶୀଳ, ଏବଂ ସାସ୍ ମାନଚିତ୍ର display: gridଉପରେ ଆଧାର କରି ଆମର ୟୁଟିଲିଟି API ମାଧ୍ୟମରେ ସୃଷ୍ଟି ହୁଏ |$spacers
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ରୀଡ୍ ବ୍ରେକପଏଣ୍ଟଗୁଡିକ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ବିକଳ୍ପଗୁଡିକ, ଏବଂ $spacersମାନଚିତ୍ରରୁ ଛଅ ଆକାର ( 0- 5) ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ସେଠାରେ କ ut ଣସି .gap-autoୟୁଟିଲିଟି କ୍ଲାସ୍ ନାହିଁ କାରଣ ଏହା ପ୍ରଭାବଶାଳୀ ଭାବରେ ସମାନ .gap-0|
ସାସ୍ |
ମାନଚିତ୍ରଗୁଡିକ
ସ୍ପେସ୍ ୟୁଟିଲିଟିଗୁଡିକ ସାସ୍ ମାନଚିତ୍ର ମାଧ୍ୟମରେ ଘୋଷିତ ହୁଏ ଏବଂ ତା’ପରେ ଆମର ୟୁଟିଲିଟି API ସହିତ ସୃଷ୍ଟି ହୁଏ |
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
ଉପଯୋଗିତା API
ଆମର ଉପଯୋଗିତା API ରେ ସ୍ପେସ୍ ଉପଯୋଗିତା ଘୋଷିତ ହୋଇଛି scss/_utilities.scss| ଉପଯୋଗିତା API କିପରି ବ୍ୟବହାର କରିବେ ଶିଖନ୍ତୁ |
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),