ବ୍ୟବଧାନ
ଏକ ଉପାଦାନର ରୂପକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସର୍ଟହାଣ୍ଡ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ ୟୁଟିଲିଟି କ୍ଲାସର ଏକ ବ୍ୟାପକ ସୀମା ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ଏକ ଉପାଦାନ କିମ୍ବା ଏହାର ପାର୍ଶ୍ of ର ଏକ ଉପସେଟକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ-ଅନୁକୂଳ margin
କିମ୍ବା ମୂଲ୍ୟ ନ୍ୟସ୍ତ କରନ୍ତୁ | padding
ବ୍ୟକ୍ତିଗତ ଗୁଣ, ସମସ୍ତ ଗୁଣ, ଏବଂ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଗୁଣ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | କ୍ଲାସଗୁଡିକ ଏକ ଡିଫଲ୍ଟ ସାସ୍ ମାନଚିତ୍ରରୁ ନିର୍ମିତ .25rem
|3rem
ବ୍ୟବଧାନ ଉପଯୋଗୀତା ଯାହା ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରଯୁଜ୍ୟ, ସେଠାରୁ xs
କ xl
break ଣସି ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ନାହିଁ | ଏହାର କାରଣ ହେଉଛି ସେହି ଶ୍ରେଣୀଗୁଡ଼ିକ min-width: 0
ଉପର ଏବଂ ଉପର ପ୍ରୟୋଗ କରାଯାଏ, ଏବଂ ଏହିପରି ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ଦ୍ୱାରା ବନ୍ଧା ନୁହେଁ | ଅବଶିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ, ତଥାପି, ଏକ ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |
ପାଇଁ, ଏବଂ , ପାଇଁ , ଏବଂ {property}{sides}-{size}
ପାଇଁ ଫର୍ମାଟ୍ ବ୍ୟବହାର କରି ଶ୍ରେଣୀଗୁଡ଼ିକ ନାମିତ |xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
ଯେଉଁଠାରେ ସମ୍ପତ୍ତି ହେଉଛି ଗୋଟିଏ:
m
- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |margin
p
- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |padding
ଯେଉଁଠାରେ ପାର୍ଶ୍ୱଗୁଡିକ ଗୋଟିଏ:
t
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-top
କିମ୍ବା |padding-top
b
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-bottom
କିମ୍ବା |padding-bottom
l
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-left
କିମ୍ବା |padding-left
r
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ସେଟ୍margin-right
କିମ୍ବା |padding-right
x
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ*-left
ଏବଂ |*-right
y
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଉଭୟ ସେଟ୍ କରେ*-top
ଏବଂ |*-bottom
- ଖାଲି - ଶ୍ରେଣୀଗୁଡ଼ିକ ପାଇଁ ଯାହା ଉପାଦାନର ସମସ୍ତ 4 ପାର୍ଶ୍ୱରେ ସେଟ୍
margin
କରେpadding
|
ଯେଉଁଠାରେ ଆକାର ହେଉଛି:
0
- କ୍ଲାସ୍ ପାଇଁ ଯାହା ଏହାକୁ ଅପସାରଣ କରେmargin
କିମ୍ବାpadding
ଏହାକୁ ସେଟ୍ କରି |0
1
- (ଡିଫଲ୍ଟ ଭାବରେ)margin
କିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpadding
ପାଇଁ |$spacer * .25
2
- (ଡିଫଲ୍ଟ ଭାବରେ)margin
କିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpadding
ପାଇଁ |$spacer * .5
3
- (ଡିଫଲ୍ଟ ଭାବରେ)margin
କିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpadding
ପାଇଁ |$spacer
4
- (ଡିଫଲ୍ଟ ଭାବରେ)margin
କିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpadding
ପାଇଁ |$spacer * 1.5
5
- (ଡିଫଲ୍ଟ ଭାବରେ)margin
କିମ୍ବା ସେଟ୍ କରୁଥିବା ଶ୍ରେଣୀଗୁଡ଼ିକpadding
ପାଇଁ |$spacer * 3
auto
- କ୍ଲାସ୍ ପାଇଁ ଯାହାmargin
ଅଟୋକୁ ସେଟ୍ କରେ |
(ସାସ୍ ମାନଚିତ୍ର ଭେରିଏବଲ୍ ରେ ଏଣ୍ଟ୍ରି ଯୋଗ କରି ଆପଣ ଅଧିକ ଆକାର ଯୋଡିପାରିବେ $spacers
|)
ଏହି ଶ୍ରେଣୀର କିଛି ପ୍ରତିନିଧୀ ଉଦାହରଣ ଏଠାରେ ଅଛି:
ଅତିରିକ୍ତ ଭାବରେ, ବୁଟଷ୍ଟ୍ରାପ୍ ଭୂସମାନ୍ତର ମାର୍ଜିନ୍ ସେଟ୍ କରି ଭୂସମାନ୍ତର .mx-auto
କେନ୍ଦ୍ରିତ ଫିକ୍ସଡ୍-ଓସାର ବ୍ଲକ୍ ସ୍ତରର ବିଷୟବସ୍ତୁ ପାଇଁ ଏକ ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |display: block
width
auto