ސްޕޭސިންގ
ބޫޓްސްޓްރަޕްގައި ހިމެނެނީ އެލިމެންޓެއްގެ ސިފަ ބަދަލުކުރުމަށް ޝޯޓްހެންޑް ރެސްޕޮންސިވް މާރޖިން އާއި ޕެޑިންގ ޔުޓިލިޓީ ކްލާސްތަކުގެ ފުޅާ ދާއިރާއެކެވެ.
އެކަން ކުރާ ގޮތް
ޝޯޓްހެންޑް ކްލާސްތަކާއެކު އެލިމެންޓަކަށް ނުވަތަ އޭގެ ސައިޑްތަކުގެ ސަބްސެޓަކަށް ރެސްޕޮންސިވް ފްރެންޑްލީ margin
ނުވަތަ ވެލިއުތައް ހަވާލުކުރުން. padding
ވަކިވަކި ޕްރޮޕަޓީތަކާއި، ހުރިހާ ޕްރޮޕަޓީތަކާއި، ވަރުގަދަ އަދި ހޮރައިޒޮންޓަލް ޕްރޮޕަޓީތަކަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ. ކްލާސްތައް ބިނާކޮށްފައިވަނީ ޑިފޯލްޓް ސާސް މެޕަކުން ފެށިގެން .25rem
.3rem
ނޯޓޭޝަން
xs
ހުރިހާ ބްރޭކްޕޮއިންޓްތަކަށް، އިން ފެށިގެން އަށް އަމަލުކުރާ ސްޕޭސިންގ ޔުޓިލިޓީތަކުގައި xl
ބްރޭކްޕޮއިންޓް ކުރުކުރުމެއް ނެތެވެ. އެއީ އެ ކްލާސްތައް އެޕްލައި ކުރެވެނީ އިން ފެށިގެން min-width: 0
މައްޗަށް ކަމުން، އަދި މިހެން ވުމުން މީޑިއާ ކިއުއަރީއަކުން ބަނދެވިފައި ނުވާތީ އެވެ. ނަމަވެސް ބާކީ ހުރި ބްރޭކްޕޮއިންޓްތަކުގައި ބްރޭކްޕޮއިންޓްގެ ކުރުކުރުން ހިމެނެއެވެ.
ކްލާސްތަކަށް ނަން ދީފައިވަނީ , , , އަދި އަށް {property}{sides}-{size}
ފޯމެޓް ބޭނުންކޮށްގެންނެވެ .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
މުދަލަކީ އެއް ތަނެއްގައި :
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
ސައިޒަކީ އެއް ތަނެއްގައި :
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: 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 px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>