Source

ବ୍ୟବଧାନ

ଏକ ଉପାଦାନର ରୂପକୁ ପରିବର୍ତ୍ତନ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସର୍ଟହାଣ୍ଡ୍ ପ୍ରତିକ୍ରିୟାଶୀଳ ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ ୟୁଟିଲିଟି କ୍ଲାସର ଏକ ବ୍ୟାପକ ସୀମା ଅନ୍ତର୍ଭୁକ୍ତ କରେ |

ଏହା କିପରି କାମ କରେ |

ଏକ ଉପାଦାନ କିମ୍ବା ଏହାର ପାର୍ଶ୍ of ର ଏକ ଉପସେଟକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ-ଅନୁକୂଳ marginକିମ୍ବା ମୂଲ୍ୟ ନ୍ୟସ୍ତ କରନ୍ତୁ | paddingବ୍ୟକ୍ତିଗତ ଗୁଣ, ସମସ୍ତ ଗୁଣ, ଏବଂ ଭୂଲମ୍ବ ଏବଂ ଭୂସମାନ୍ତର ଗୁଣ ପାଇଁ ସମର୍ଥନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | କ୍ଲାସଗୁଡିକ ଏକ ଡିଫଲ୍ଟ ସାସ୍ ମାନଚିତ୍ରରୁ ନିର୍ମିତ .25rem|3rem

ଟିପ୍ପଣୀ |

ବ୍ୟବଧାନ ଉପଯୋଗୀତା ଯାହା ସମସ୍ତ ବ୍ରେକପଏଣ୍ଟ ପାଇଁ ପ୍ରଯୁଜ୍ୟ, ସେଠାରୁ xsକ xlbreak ଣସି ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ନାହିଁ | ଏହାର କାରଣ ହେଉଛି ସେହି ଶ୍ରେଣୀଗୁଡ଼ିକ min-width: 0ଉପର ଏବଂ ଉପର ପ୍ରୟୋଗ କରାଯାଏ, ଏବଂ ଏହିପରି ଏକ ମିଡିଆ ଜିଜ୍ଞାସା ଦ୍ୱାରା ବନ୍ଧା ନୁହେଁ | ଅବଶିଷ୍ଟ ବ୍ରେକପଏଣ୍ଟଗୁଡ଼ିକ, ତଥାପି, ଏକ ବ୍ରେକପଏଣ୍ଟ ସଂକ୍ଷିପ୍ତକରଣ ଅନ୍ତର୍ଭୂକ୍ତ କରେ |

ପାଇଁ, ଏବଂ , ପାଇଁ , ଏବଂ {property}{sides}-{size}ପାଇଁ ଫର୍ମାଟ୍ ବ୍ୟବହାର କରି ଶ୍ରେଣୀଗୁଡ଼ିକ ନାମିତ |xs{property}{sides}-{breakpoint}-{size}smmdlgxl

ଯେଉଁଠାରେ ସମ୍ପତ୍ତି ହେଉଛି ଗୋଟିଏ:

  • 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|)

ଉଦାହରଣଗୁଡିକ

ଏହି ଶ୍ରେଣୀର କିଛି ପ୍ରତିନିଧୀ ଉଦାହରଣ ଏଠାରେ ଅଛି:

.mt-0 {
  margin-top: 0 !important;
}

.ml-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>