ސްޕޭސިންގ

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

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

ޝޯޓްހެންޑް ކްލާސްތަކާއެކު އެލިމެންޓަކަށް ނުވަތަ އޭގެ ސައިޑްތަކުގެ ސަބްސެޓަކަށް ރެސްޕޮންސިވް ފްރެންޑްލީ 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>

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

ސީއެސްއެސްގައި marginޕްރޮޕަޓީތަކަށް ނެގެޓިވް ވެލިއުތައް ބޭނުންކުރެވޭނެ ( paddingނުކުރެވޭނެ). 4.2 އިން ފެށިގެން، މަތީގައި ލިސްޓްކޮށްފައިވާ ކޮންމެ ނޮން-ޒީރޯ އިންޓިޖަރ ސައިޒަކަށް އަޅުގަނޑުމެން ނެގެޓިވް މާރޖިން ޔުޓިލިޓީސް އިތުރުކޮށްފިން (އެބަހީ، 1, 2, 3, 4, 5). މި ޔުޓިލިޓީތަކަކީ ބްރޭކްޕޮއިންޓްތަކުގެ ތެރެއިން ގްރިޑް ކޮލަމް ގަޓަރުތައް ކަސްޓަމައިޒް ކުރުމަށް ރަނގަޅު ޔުޓިލިޓީތަކެކެވެ.

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

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

mdމިއީ މީޑިއަމް ( ) ބްރޭކްޕޮއިންޓް އަދި އެއަށްވުރެ މަތީގައިވާ ބޫޓްސްޓްރެޕް ގްރިޑް ކަސްޓަމައިޒް ކުރުމުގެ މިސާލެކެވެ . އަހަރެމެން .colޕެޑިންގް އިތުރުކޮށްފައި .px-md-5ދެން ކައުންޓަރ ކޮށްފައި އެ ވިތު .mx-md-n5އޮން ދަ ޕޭރެންޓް .row.

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>