in English

ବ୍ୟବଧାନ

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

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

ମାର୍ଜିନ୍ ଏବଂ ପ୍ୟାଡିଂ |

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

CSS ଗ୍ରୀଡ୍ ଲେଆଉଟ୍ ମଡ୍ୟୁଲ୍ ବ୍ୟବହାର କରୁଛନ୍ତି କି? ଫାଙ୍କ ଉପଯୋଗିତା ବ୍ୟବହାର କରିବାକୁ ଚିନ୍ତା କରନ୍ତୁ |

ଟିପ୍ପଣୀ |

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

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

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

m- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |margin
p- ସେଟ୍ ହୋଇଥିବା କ୍ଲାସ୍ ପାଇଁ |padding

ଯେଉଁଠାରେ ପାର୍ଶ୍ୱଗୁଡିକ ଗୋଟିଏ:

t- କ୍ଲାସ୍ ପାଇଁ ସେଟ୍ margin-topକିମ୍ବାpadding-top
b- କ୍ଲାସ୍ ପାଇଁ ସେଟ୍ margin-bottomକିମ୍ବାpadding-bottom
s- (ଆରମ୍ଭ) କ୍ଲାସ୍ ପାଇଁ ଯାହା LTR କିମ୍ବା RTL ରେ margin-leftସେଟ୍ କରେ |padding-leftmargin-rightpadding-right
e- (ଶେଷ) କ୍ଲାସ୍ ପାଇଁ ସେଟ୍ margin-rightକିମ୍ବା padding-rightLTR, margin-leftକିମ୍ବା padding-leftRTL ରେ |
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;
}

.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

ଗ୍ରୀଡ୍ ଆଇଟମ୍ 1

ଗ୍ରୀଡ୍ ଆଇଟମ୍ 2

ଗ୍ରୀଡ୍ ଆଇଟମ୍ 3

<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,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

ଉପଯୋଗିତା 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
    ),