ސްޕޭސިންގ

މާރޖިން އާއި ޕެޑިންގ އެވެ

ޝޯޓްހެންޑް ކްލާސްތަކާއެކު އެލިމެންޓަކަށް ނުވަތަ އޭގެ ސައިޑްތަކުގެ ސަބްސެޓަކަށް ރެސްޕޮންސިވް ފްރެންޑްލީ marginނުވަތަ ވެލިއުތައް ހަވާލުކުރުން. paddingވަކިވަކި ޕްރޮޕަޓީތަކާއި، ހުރިހާ ޕްރޮޕަޓީތަކާއި، ވަރުގަދަ އަދި ހޮރައިޒޮންޓަލް ޕްރޮޕަޓީތަކަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ. ކްލާސްތައް ބިނާކޮށްފައިވަނީ ޑިފޯލްޓް ސާސް މެޕަކުން ފެށިގެން .25rem.3rem

ސީއެސްއެސް ގްރިޑް ލޭއައުޓް މޮޑިއުލް ބޭނުން ކުރަނީ ހެއްޔެވެ؟ ގޭޕް ޔުޓިލިޓީ ބޭނުން ކުރުމަށް ވިސްނާށެވެ .

ނޯޓޭޝަން

xsހުރިހާ ބްރޭކްޕޮއިންޓްތަކަށް، އިން ފެށިގެން އަށް އަމަލުކުރާ ސްޕޭސިންގ ޔުޓިލިޓީތަކުގައި xxlބްރޭކްޕޮއިންޓް ކުރުކުރުމެއް ނެތެވެ. އެއީ އެ ކްލާސްތައް އެޕްލައި ކުރެވެނީ އިން ފެށިގެން 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- (ސްޓާޓް) ސެޓްކުރާ ކްލާސްތަކަށް margin-leftނުވަތަ padding-leftއެލްޓީއާރުގައި، margin-rightނުވަތަ padding-rightއާރުޓީއެލްގައި
• emargin-right- (ނިމުނީ) ސެޓްކުރާ ނުވަތަ padding-rightއެލްޓީއާރުގައި، margin-leftނުވަތަ padding-leftއާރުޓީއެލްގައި ސެޓްކުރާ ކްލާސްތަކަށް
• x- ދެ ކްލާސްތަކަށް *-leftއަދި ...*-right
• y- ދެ ކްލާސްތަކަށް *-topއަދި ...*-bottom
• blank - އެލިމެންޓްގެ ހުރިހާ 4 ފަރާތެއްގައި marginނުވަތަ އެއް ނުވަތަ ސެޓްކުރާ ކްލާސްތަކަށްpadding

ސައިޒަކީ އެއް ތަނުގައި :

• 0margin- ނުވަތަ paddingއެއަށް ސެޓްކޮށްގެން ނައްތާލާ ކްލާސްތަކަށް0
• 1margin- (ބައި ޑިފޯލްޓް) އަށް ނުވަތަ paddingއަށް ސެޓްކުރާ ކްލާސްތަކަށް$spacer * .25
• 2margin- (ބައި ޑިފޯލްޓް) އަށް ނުވަތަ paddingއަށް ސެޓްކުރާ ކްލާސްތަކަށް$spacer * .5
• 3margin- (ބައި ޑިފޯލްޓް) އަށް ނުވަތަ paddingއަށް ސެޓްކުރާ ކްލާސްތަކަށް$spacer
• 4margin- (ބައި ޑިފޯލްޓް) އަށް ނުވަތަ paddingއަށް ސެޓްކުރާ ކްލާސްތަކަށް$spacer * 1.5
• 5margin- (ބައި ޑިފޯލްޓް) އަށް ނުވަތަ paddingއަށް ސެޓްކުރާ ކްލާސްތަކަށް$spacer * 3
• automargin- ޓު އޮޓޯ ސެޓްކުރާ ކްލާސްތަކަށް

$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: blockއަށް widthސެޓްކޮށްގެންނެވެ auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

ނެގެޓިވް މާރޖިން

ސީއެސްއެސްގައި marginޕްރޮޕަޓީތަކަށް ނެގެޓިވް ވެލިއުތައް ބޭނުންކުރެވޭނެ ( paddingނުކުރެވޭނެ). މި ނެގެޓިވް މާރޖިންތައް ޑިފޯލްޓްކޮށް ޑިސެބިލް ކޮށްފައި ހުރި ނަމަވެސް ސެޓިންގ ކޮށްގެން ސާސްގައި އެނެބަލް ކުރެވޭނެއެވެ $enable-negative-margins: true.

ސިންޓެކްސް ގާތްގަނޑަކަށް ޑިފޯލްޓް، ޕޮޒިޓިވް މާރޖިން ޔުޓިލިޓީސް އާއި އެއްގޮތް ނަމަވެސް، nއެދިފައިވާ ސައިޒުގެ ކުރިން އިތުރުކޮށްފައި ހުރެއެވެ. މިއޮތީ މިސާލު ކްލާހެއް ކަމަށާއި އެއީ .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

ގެޕް

ބޭނުންކުރާއިރު ، ޕޭރެންޓް ގްރިޑް ކޮންޓެއިނަރުގައި ހުންނަ ޔުޓިލިޓީސްގެ display: gridބޭނުން ހިފޭނެއެވެ . މިއީ ވަކިވަކި ގްރިޑް އައިޓަމްތަކަށް ( ކޮންޓެއިނަރެއްގެ gapދަރިން) މާރޖިން ޔުޓިލިޓީސް އިތުރުކުރަން ޖެހުމުން ސަލާމަތް ވެވޭނެ ކަމެކެވެ . ގޭޕް ޔުޓިލިޓީސް އަކީ ޑިފޯލްޓްކޮށް ރެސްޕޮންސިވް އެއްޗެއް، އަދި އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް އެޕީއައި މެދުވެރިކޮށް، ސާސް މެޕަށް display: gridބިނާކޮށް އުފައްދާ އެއްޗެކެވެ .$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). ޔުޓިލިޓީ ކްލާހެއް ނެތް .gap-autoކަމަށާއި އެއީ ފައިދާހުރި ގޮތެއްގައި އެއް ކްލާހެއް ކަމަށް ވެސް ވިދާޅުވި އެވެ .gap-0.

ސާސް އެވެ

މެޕްސް

ސްޕޭސިންގ ޔުޓިލިޓީސް ޑިކްލެއަރ ކުރެވެނީ ސާސް މެޕް މެދުވެރިކޮށް އަދި އެއަށްފަހު އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް އެޕީއައި އިން ޖެނެރޭޓް ކުރެވެއެވެ.

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

ޔުޓިލިޓީސް އެޕީއައި އެވެ

ސްޕޭސިންގ ޔުޓިލިޓީސް ޑިކްލެއަރ ކުރެވިފައިވަނީ އަޅުގަނޑުމެންގެ ޔުޓިލިޓީސް އެޕީއައި ގައި scss/_utilities.scss. ޔުޓިލިޓީސް އެޕީއައި ބޭނުންކުރާނެ ގޮތް ދަސްކުރައްވާށެވެ.

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