ސްޕޭސިންގ

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

އެކަން ކުރާ ގޮތް

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

ނޯޓޭޝަން

xsހުރިހާ ބްރޭކްޕޮއިންޓްތަކަށް، އިން ފެށިގެން އަށް އަމަލުކުރާ ސްޕޭސިންގ ޔުޓިލިޓީތަކުގައި xlބްރޭކްޕޮއިންޓް ކުރުކުރުމެއް ނެތެވެ. އެއީ އެ ކްލާސްތައް އެޕްލައި ކުރެވެނީ އިން ފެށިގެން 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
• 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;
}

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

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