Source

ގްރިޑް ސިސްޓަމް

ބާރަ ކޮލަމް ސިސްޓަމަކާއި، ފަސް ޑިފޯލްޓް ރެސްޕޮންސިވް ޓިއަރާއި، ސާސް ވެރިއޭބަލްތަކާއި މިކްސިންތަކާއި، ކުރިން ކަނޑައެޅިފައިވާ ދިހަވަރަކަށް ކްލާސްތަކުގެ ސަބަބުން ހުރިހާ ބައްޓަމަކާއި ސައިޒެއްގެ ލޭއައުޓްތައް ބިނާކުރުމަށް އަޅުގަނޑުމެންގެ ވަރުގަދަ މޮބައިލް-ފުރަތަމަ ފްލެކްސްބޮކްސް ގްރިޑް ބޭނުންކުރައްވާށެވެ.

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

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

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

ތިން ކޮލަމްގެ ތެރެއިން އެއް ކޮލަމެވެ

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

މަތީގައިވާ މިސާލުން އަޅުގަނޑުމެންގެ ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް ބޭނުންކޮށްގެން ކުދި، މެދު، ބޮޑެތި، އަދި އިތުރު ބޮޑެތި ޑިވައިސްތަކުގައި ހަމަހަމަ ފުޅާމިނުގެ ތިން ކޮލަމް އުފައްދައެވެ. އެ ކޮލަމްތައް ބެލެނިވެރިޔާއާ އެކު ޞަފްޙާގެ މެދުގައި ވެއެވެ .container.

އެކަން ތަޅާލައި، މިއޮތީ އެކަން ކުރާ ގޮތް:

ކޮންޓެއިނަރުން ސައިޓްގެ ކޮންޓެންޓްތައް ސެންޓަރކޮށް ހޮރައިޒޮންޓަލީ ޕެޑް ކުރުމަށް ވަސީލަތެއް ލިބިގެންދެއެވެ. .containerޖަވާބުދާރީވާ ޕިކްސެލް ފުޅާމިނަކަށް ނުވަތަ ހުރިހާ ވިއުޕޯޓާއި ޑިވައިސް ސައިޒްތަކެއް ހުރަސްކޮށް .container-fluidބޭނުން ކުރާށެވެ .width: 100%
ސަފުތަކަކީ ކޮލަމްތަކަށް ރައްކާކުރާ އެއްޗެހިތަކެކެވެ. ކޮންމެ ކޮލަމެއްގައިވެސް paddingއެދެމެދުގައިވާ ޖާގަ ކޮންޓްރޯލް ކުރުމަށްޓަކައި ހޮރައިޒޮންޓަލް (ގަޓަރ ކިޔާ) އެއް ހުރެއެވެ. މިކަން paddingދެން ކައުންޓަރ ކުރެވެނީ ނެގެޓިވް މާރޖިންސް ތަކެއް ހުންނަ ރޯތަކުގައެވެ. މިގޮތަށް ތިބާގެ ކޮލަމްތަކުގައި ހުންނަ ހުރިހާ ކޮންޓެންޓެއް ވިޝުއަލްކޮށް ކަނާތްފަރާތުން ތިރިއަށް އެލައިން ކުރެވެއެވެ.
ގްރިޑް ލޭއައުޓެއްގައި ކޮންޓެންޓް ކޮލަމްތަކުގެ ތެރޭގައި ބަހައްޓަން ޖެހޭއިރު ހަމައެކަނި ކޮލަމްތަކަކީ ރޯތަކުގެ ވަގުތީ ދަރިންތަކަކަށް ވެދާނެއެވެ.
ފްލެކްސްބޮކްސްގެ ސަބަބުން، ކަނޑައެޅިފައިވާ އެއްޗެއް ނެތް ގްރިޑް ކޮލަމްތައް widthއޮޓޮމެޓިކުން ހަމަހަމަ ފުޅާމިނުގެ ކޮލަމްތަކެއްގެ ގޮތުގައި ލޭއައުޓް ވާނެއެވެ. މިސާލަކަށް ހަތަރު އިންސްޓޭންސްގެ .col-smކޮންމެ އިންސްޓޭންސްއެއް އޮޓޮމެޓިކުން ކުޑަ ބްރޭކްޕޮއިންޓުން ފެށިގެން މައްޗަށް %25 ފުޅާވާނެ އެވެ. އިތުރު މިސާލުތަކަށް އޮޓޯ ލޭއައުޓް ކޮލަމްސް ބައި ބައްލަވާށެވެ .
ކޮލަމް ކްލާސްތަކުން ދައްކުވައިދެނީ ކޮންމެ ރޯއަކަށް ވެދާނެ 12 ކޮލަމްގެ ތެރެއިން ބޭނުންކުރަން ބޭނުންވާ ކޮލަމްގެ އަދަދެވެ. އެހެންކަމުން، އެއްވަރެއްގެ ފުޅާމިނުގެ ތިން ކޮލަމް ހުރަސްކޮށް ބޭނުންނަމަ، ބޭނުންކުރެވިދާނެއެވެ .col-4.
ކޮލަމް widths ސެޓްކޮށްފައިވަނީ ޕަސެންޓްތަކުން ކަމުން އެއީ އަބަދުވެސް ފްލޫޑް އަދި ސައިޒް ވެފައި ހުންނަނީ އެ ކޮލަމްތަކުގެ ބެލެނިވެރި އުނިއިތުރަށް ނިސްބަތްކޮށްގެންނެވެ.
ކޮލަމްތަކުގައި ވަކިވަކި ކޮލަމްތަކުގެ މެދުގައި ގަޓަރުތައް އުފެއްދުމަށް ހޮރައިޒޮންޓަލް ހުންނަ ނަމަވެސް، ފްރޮމް ރޯސްތަކާއި ކޮލަމްތަކުން paddingނަގާލެވޭނީ އޮން ދަ އާއެކުގައެވެ .marginpadding.no-gutters.row
ގްރިޑް ރެސްޕޮންސިވް ކުރުމަށްޓަކައި، ފަސް ގްރިޑް ބްރޭކްޕޮއިންޓް ހުރެއެވެ، ކޮންމެ ރެސްޕޮންސިވް ބްރޭކްޕޮއިންޓަކަށް އެއް ބްރޭކްޕޮއިންޓް : ހުރިހާ ބްރޭކްޕޮއިންޓް (އިތުރު ކުދި)، ކުދި، މެދު، ބޮޑު، އަދި އިތުރަށް ބޮޑު.
ގްރިޑް ބްރޭކްޕޮއިންޓްތައް ބިނާވެފައިވަނީ އެންމެ ކުޑަ ފުޅާމިނުގެ މީޑިއާ ކިއުއަރީތަކުގެ މައްޗަށް ކަމުގައި ވާއިރު، މާނައަކީ އެއީ އެ އެއް ބްރޭކްޕޮއިންޓާއި އެ ބްރޭކްޕޮއިންޓްގެ މަތީގައިވާ ހުރިހާ ޑިވައިސްތަކަށް އަމަލުކުރާ އެއްޗެއް (މިސާލަކަށް، .col-sm-4ކުދި، މެދު، ބޮޑެތި، އަދި އިތުރު ބޮޑެތި ޑިވައިސްތަކަށް އަމަލުކުރާ ނަމަވެސް ފުރަތަމަ xsބްރޭކްޕޮއިންޓަށް ނުހިނގާ) އެވެ.
އިތުރަށް ސެމެންޓިކް މާކަޕް ކުރުމަށްޓަކައި ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް ( ފަދަ .col-4) ނުވަތަ ސާސް މިކްސިންސް ބޭނުން ކުރެވިދާނެއެވެ.

ފްލެކްސް ކޮންޓެއިނަރެއްގެ ގޮތުގައި ބައެއް އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ބޭނުން ނުކުރެވޭ ފަދަ ފްލެކްސްބޮކްސްގެ ވަށައިގެންވާ ލިމިޓެޝަންތަކާއި ބަގްތަކަށް ސަމާލުކަން ދޭށެވެ .

ގްރިޑް އޮޕްޝަންސް

ގިނަ ސައިޒްތައް ކަނޑައެޅުމަށް ބޫޓްސްޓްރެޕް އިން ems ނުވަތަ s ބޭނުންކުރާއިރު، ގްރިޑް ބްރޭކްޕޮއިންޓްތަކާއި ކޮންޓެއިނަރ ވިޑްތްތަކަށް s ބޭނުންކުރެއެވެ. އެއީ ވިއުޕޯޓްގެ ފުޅާމިން ޕިކްސެލްގައި ހުރުމުން ފޮންޓް ސައިޒާއެކު ބަދަލެއް ނާންނަތީއެވެ .rempx

އަތްފޯރާފަށުގައި ހުންނަ ޓޭބަލްއަކާއެކު އެތައް ޑިވައިސްތަކެއްގެ ތެރެއިން ބޫޓްސްޓްރެޕް ގްރިޑް ސިސްޓަމްގެ ކަންތައްތައް މަސައްކަތްކުރާ ގޮތް ބަލާށެވެ.

	އިތުރަށް ކުޑަ <576px	ކުޑަ ≥576px އެވެ	މީޑިއަމް ≥768px އެވެ	ބޮޑު ≥992px އެވެ	އިތުރަށް ބޮޑު ≥1200px
މެކްސް ކޮންޓެއިނަރ ފުޅާމިން	އެއްވެސް އެއްޗެއް ނެތް (އޮޓޯ)	540ޕީއެކްސް އެވެ	720ޕީއެކްސް އެވެ	960ޕީއެކްސް އެވެ	1140ޕީއެކްސް އެވެ
ކްލާސް ޕްރިފިކްސް	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ކޮލަމްތަކުގެ	12
ގަޓަރުގެ ފުޅާމިން	30px (ކޮލަމެއްގެ ކޮންމެ ފަރާތެއްގައި 15px)
ނެސްޓެބަލް އެވެ	އާނ
ކޮލަމް އޯޑަރު ކުރުން	އާނ

އޮޓޯ ލޭއައުޓް ކޮލަމްތައް

ފަދަ ސާފުކޮށް ނަންބަރު ޖަހާފައިވާ ކްލާހެއް ނެތި ފަސޭހައިން ކޮލަމް ސައިޒް ކުރުމަށް ބްރޭކްޕޮއިންޓަށް ޚާއްޞަ ކޮލަމް ކްލާސްތައް ބޭނުންކުރުން .col-sm-6.

އެއްވަރެއްގެ ފުޅާމިނެއްގައެވެ

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

1 ގެ 2

2 ގެ 2

1 ގެ 3

2 ގެ 3

3 ގެ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ހަމަހަމަ ފުޅާމިނުގެ ކޮލަމްތައް އެތައް ރޮނގަކަށް ބަހާލެވިދާނެ ނަމަވެސް ސަފާރީ ފްލެކްސްބޮކްސް ބަގެއް އޮތުމުން މިކަން ސާފުކޮށް flex-basisނުވަތަ border. ދުވަސްވީ ބްރައުޒާ ވަރޝަންތަކަށް ވޯކްއަރައުންޑްތައް ހުރި ނަމަވެސް، އަޕްޑޭޓް ވެފައިވާނަމަ އެއީ ކޮންމެހެން ކުރަންޖެހޭ ކަންތައްތަކަކަށް ނުވާނެއެވެ.

ކޮލަމް

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

އެއް ކޮލަމް ފުޅާމިން ސެޓްކުރުން

ފްލެކްސްބޮކްސް ގްރިޑް ކޮލަމްތަކަށް އޮޓޯ ލޭއައުޓް ހެދުމުގެ މާނައަކީ ވެސް އެއް ކޮލަމްގެ ފުޅާމިން ސެޓްކޮށް، އެއްބަނޑު އެއްބަފާ ކޮލަމްތަކުގެ ވަށައިގެން އޮޓޮމެޓިކުން ސައިޒު ބަދަލުކޮށްލެވޭނެ ކަމެވެ. ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް (ތިރީގައި ދައްކާފައިވާ ގޮތަށް)، ގްރިޑް މިކްސިންސް، ނުވަތަ އިންލައިން ވިޑްތްސް ބޭނުންކުރެވިދާނެއެވެ. މެދު ކޮލަމްގެ ފުޅާމިނުގައި ކިތަންމެ ވަރަކަށް ހުރި ނަމަވެސް އަނެއް ކޮލަމްތަކުގެ ސައިޒު ބަދަލުވާނެކަން ފާހަގަކޮށްލެވެއެވެ.

1 ގެ 3

2 ގެ 3 ( ފުޅާ)

3 ގެ 3

1 ގެ 3

2 ގެ 3 ( ފުޅާ)

3 ގެ 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ވެރިއޭބަލް ވިޑްތް ކޮންޓެންޓް

ކްލާސްތައް ބޭނުންކޮށްގެން col-{breakpoint}-autoކޮލަމްތަކުގެ ކޮންޓެންޓްގެ ގުދުރަތީ ފުޅާމިނަށް ބަލައިގެން ކޮލަމްތައް ސައިޒްކުރުން.

1 ގެ 3

ވެރިއޭބަލް ވިޑްތް ކޮންޓެންޓް

3 ގެ 3

1 ގެ 3

ވެރިއޭބަލް ވިޑްތް ކޮންޓެންޓް

3 ގެ 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

ހަމަހަމަ ފުޅާމިނެއްގެ މަލްޓި ރޯ

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

ކޮލް

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

ރެސްޕޮންސިވް ކްލާސްތަކެވެ

ބޫޓްސްޓްރެޕްގެ ގްރިޑްގައި ކޮމްޕްލެކްސް ރެސްޕޮންސިވް ލޭއައުޓްތައް ބިނާކުރުމަށް ކުރިން ކަނޑައެޅިފައިވާ ފަސް ޓިއާގެ ކްލާސްތައް ހިމެނެ އެވެ. އިތުރު ކުދި، ކުދި، މެދު، ބޮޑު، ނުވަތަ އިތުރު ބޮޑެތި ޑިވައިސްތަކުގައި ތިމާގެ ކޮލަމްތަކުގެ ސައިޒު ތިމާއަށް ފެންނަ ގޮތަކަށް ކަސްޓަމައިޒް ކުރާށެވެ.

ހުރިހާ ބްރޭކްޕޮއިންޓްތަކެއް

އެންމެ ކުޑަ ޑިވައިސްތަކުން ފެށިގެން އެންމެ ބޮޑު ޑިވައިސްތަކާ ހަމައަށް އެއްގޮތް ގްރިޑްތަކަށް، .colއަދި .col-*ކްލާސްތައް ބޭނުން ކުރާށެވެ. ވަކި ސައިޒެއްގެ ކޮލަމެއް ބޭނުންވާ ވަގުތު ނަންބަރު ޖަހާފައިވާ ކްލާހެއް ކަނޑައެޅުން؛ އެހެން ނޫންނަމަ ހިތްހަމަޖެހިގެން .col.

ކޮލް

ކޮލް-8 އެވެ

ކޮލް-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

ހޮރައިޒޮންޓަލް އަށް ސްޓޭކްކޮށްފައި ހުރެއެވެ

އެއް ކްލާސް ސެޓެއް ބޭނުންކޮށްގެން ، ސްޓޭކްކޮށް ފެށިގެން ކުޑަ ބްރޭކްޕޮއިންޓް ( ) .col-sm-*ގައި ހޮރައިޒޮންޓަލް ވެގެންދާ އަސާސީ ގްރިޑް ސިސްޓަމެއް އުފެއްދިދާނެއެވެ .sm

ކޮލް-އެސްއެމް-8

ކޮލް-އެސްއެމް-4

ކޮލް-އެސްއެމް

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

މިކްސް އެންޑް މެޗް ކޮށްލާށެވެ

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

.ކޮލް-12 .ކޮލް-އެމްޑީ-8

.ކޮލް-6 .ކޮލް-އެމްޑީ-4

.ކޮލް-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

އެލައިންމަންޓް

ކޮލަމްތައް ވަށައިގެން އަދި ހޮރޮޒޮންޓަލީ އެލައިން ކުރުމަށް ފްލެކްސްބޮކްސް އެލައިންމަންޓް ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ.

ވަރުގަދަ އެލައިންމަންޓް

ތިން ކޮލަމްގެ ތެރެއިން އެއް ކޮލަމެވެ

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

ތިން ކޮލަމްގެ ތެރެއިން އެއް ކޮލަމެވެ

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ހޮރައިޒޮންޓަލް އެލައިންމަންޓް

ދެ ކޮލަމްގެ ތެރެއިން އެއް ކޮލަމެވެ

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ގަޓަރުތަކެއް ނެތެވެ

އަޅުގަނޑުމެންގެ ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތަކުގައި ހުންނަ ކޮލަމްތަކުގެ މެދުގައިވާ ގަޓަރުތައް ނައްތާލެވޭނީ .no-gutters. މިއީ ވަގުތީ ހުރިހާ ކުދިންގެ ކޮލަމްތަކުން ނެގެޓިވް margins .rowއަދި ހޮރައިޒޮންޓަލް ނައްތާލާ ކަމެކެވެ .padding

މިއީ މި ސްޓައިލްތައް އުފެއްދުމަށް ބޭނުންކުރާ ސޯސް ކޯޑެވެ. ކޮލަމް އޮވަރރައިޑްސް ސްކޯޕް ކުރެވެނީ ހަމައެކަނި ފުރަތަމަ ޗައިލްޑް ކޮލަމްތަކަށް ކަމަށާއި އެޓްރިބިއުޓް ސެލެކްޓަރ މެދުވެރިކޮށް ޓާގެޓް ކުރެވޭކަން ފާހަގަކޮށްލެވެއެވެ . މިކަމުން އިތުރަށް ވަކި ސެލެކްޓަރެއް އުފެދޭއިރު، ކޮލަމް ޕެޑިންގ އަދިވެސް އިތުރަށް ކަސްޓަމައިޒް ކުރެވިދާނެ ސްޕޭސިންގ ޔުޓިލިޓީސް އާއި އެކު .

އެޖް ޓު އެޖް ޑިޒައިންއެއް ބޭނުންވޭތަ؟ ބެލެނިވެރިޔާ .containerނުވަތަ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

ޢަމަލީގޮތުން ބަލާއިރު މިއޮތީ އެކަން ފެންނަ ގޮތެވެ. ނޯޓް ކުރިން ކަނޑައެޅިފައިވާ އެހެން ހުރިހާ ގްރިޑް ކްލާސްތަކާއެކު (ކޮލަމް ފުޅާމިން، ރެސްޕޮންސިވް ޓިއަރސް، ރީއޯޑަރސް، އަދި އެހެނިހެން ހިމެނޭގޮތަށް) މިކަން ބޭނުން ކުރަމުން ގެންދެވޭނެއެވެ.

.ކޮލް-12 .ކޮލް-އެސްއެމް-6 .ކޮލް-އެމްޑީ-8

.ކޮލް-6 .ކޮލް-އެމްޑީ-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ކޮލަމް އޮޅާލުން

އެއް ސަފެއްގެ ތެރޭގައި 12 އަށްވުރެ ގިނަ ކޮލަމް ބަހައްޓާނަމަ، އިތުރު ކޮލަމްތަކުގެ ކޮންމެ ގްރޫޕެއް، އެއް ޔުނިޓެއްގެ ގޮތުގައި، އާ ރޮނގެއްގެ މައްޗަށް އޮޅާލާނެއެވެ.

.ކޮލް-9

.col-4
9 + 4 = 13 > 12 ކަމުން، މި 4 ކޮލަމް ފުޅާ ޑިވް އެއް ޖެހިޖެހިގެން ހުންނަ ޔުނިޓެއްގެ ގޮތުގައި އާ ލައިނެއްގެ މައްޗަށް އޮޅާލެވިގެންދެއެވެ.

.col-6
އޭގެ ފަހުން އަންނަ ކޮލަމްތައް އާ ލައިނާ އެއްވަރަށް ކުރިއަށް ގެންދެއެވެ.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ކޮލަމް ފަޅައިގެންދެއެވެ

ފްލެކްސްބޮކްސްގައި އާ ލައިނަކަށް ކޮލަމްތައް ފަޅާލުމަށް ކުޑަ ހެކެއް ބޭނުންވެއެވެ: width: 100%އާ ލައިނަކަށް ކޮލަމްތައް އޮޅާލަން ބޭނުންވާ ކޮންމެ ތަނަކާއެކު އެލިމެންޓެއް އިތުރުކުރުން. އާންމުކޮށް މިކަން ފުރިހަމަ ކުރެވެނީ ގިނަ .rows އިން ނަމަވެސް ކޮންމެ އިމްޕްލިމެންޓޭޝަން މެތޯޑަކަށް މިކަން އެކައުންޓް ނުކުރެވޭނެއެވެ.

.ކޮލް-6 .ކޮލް-އެސްއެމް-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

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

.ކޮލް-6 .ކޮލް-އެސްއެމް-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

ރީއޯޑަރ ކުރުން

ކްލާސްތަކަށް އޯޑަރު ދިނުން

ތިމާގެ ކޮންޓެންޓްގެ ވިޝުއަލް އޯޑަރ.order- ކޮންޓްރޯލް ކުރުމަށް ކްލާސްތައް ބޭނުން ކުރާށެވެ . މި ކްލާސްތަކަކީ ރެސްޕޮންސިވް ކްލާސްތަކަކަށް ވާތީ، ބައި ބްރޭކްޕޮއިންޓް ސެޓް ކުރެވޭނެ (އެބަހީ، ). ފަސް ގްރިޑް ޓިއަރ ހުރަސްކޮށް ތްރޫއަށް ސަޕޯޓް ދިނުން ހިމެނެއެވެ .order.order-1.order-md-2112

ފުރަތަމަ، އެކަމަކު ތަރުތީބު ނުކުރެވި

ދެވަނަ، އެކަމަކު އެންމެ ފަހު

ތިންވަނަ، އެކަމަކު ފުރަތަމަ

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

އަދި ރެސްޕޮންސިވް .order-firstއަދި ކްލާސްތައް ވެސް އެލިމެންޓެއްގެ ގޮތުގައި އެޕްލައިކޮށް ( ) .order-lastބަދަލުކުރާ ކްލާސްތައް ހުރެއެވެ. މި ކްލާސްތައް ބޭނުންވާ ގޮތަށް ނަންބަރު ޖަހާފައިވާ ކްލާސްތަކާ ވެސް އިންޓަމިކްސް ކުރެވިދާނެ އެވެ .orderorder: -1order: 13order: $columns + 1.order-*

ފުރަތަމަ، އެކަމަކު އެންމެ ފަހުން

ދެވަނަ ކަމަކަށް، އެކަމަކު ތަރުތީބު ނުކުރެވި

ތިންވަނަ، އެކަމަކު ފުރަތަމަ

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

ކޮލަމްތައް އޮފްސެޓް ކުރުން

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

އޮފްސެޓް ކްލާސްތަކެވެ

.offset-md-*ކްލާސްތައް ބޭނުންކޮށްގެން ކޮލަމްތައް ކަނާތްފަރާތަށް ގެންދާށެވެ . މި ކްލާސްތަކުން ކޮލަމެއްގެ ކަނާތްފަރާތުގެ މާރޖިން *ކޮލަމްތަކުން އިތުރުކޮށްދެއެވެ. މިސާލަކަށް ހަތަރު ކޮލަމެއްގެ މައްޗަށް .offset-md-4ދަތުރުކުރެއެވެ ..col-md-4

.ކޮލް-އެމްޑީ-4

.ކޮލް-އެމްޑީ-4 .އޮފްސެޓް-އެމްޑީ-4

.ކޮލް-އެމްޑީ-3 .އޮފްސެޓް-އެމްޑީ-3

.ކޮލް-އެމްޑީ-6 .އޮފްސެޓް-އެމްޑީ-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

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

.ކޮލް-އެސްއެމް-5 .ކޮލް-އެމްޑީ-6

.ކޮލް-އެސްއެމް-5 .އޮފްސެޓް-އެސްއެމް-2 .ކޮލް-އެމްޑީ-6 .އޮފްސެޓް-އެމްޑީ-0

.ކޮލް-އެސްއެމް-6 .ކޮލް-އެމްޑީ-5 .ކޮލް-އެލްޖީ-6

.ކޮލް-އެސްއެމް-6 .ކޮލް-އެމްޑީ-5 .އޮފްސެޓް-އެމްޑީ-2 .ކޮލް-އެލްޖީ-6 .އޮފްސެޓް-އެލްޖީ-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

މާރޖިން ޔުޓިލިޓީސް އެވެ

.mr-autov4 ގައި ފްލެކްސްބޮކްސް އަށް ބަދަލުވުމާއެކު، އެއްބަނޑު އެއްބަފާ ކޮލަމްތައް އެކަކު އަނެކަކާ ދުރަށް ގަދަކޮށްލުން ފަދަ މާރޖިން ޔުޓިލިޓީސް ބޭނުން ކުރެވިދާނެއެވެ .

.ކޮލް-އެމްޑީ-4

.ކޮލް-އެމްޑީ-4 .އެމްއެލް-އޮޓޯ

.ކޮލް-އެމްޑީ-3 .އެމްއެލް-އެމްޑީ-އޮޓޯ

.ކޮލް-އޮޓޯ .އެމްއާރު-އޮޓޯ

.ކޮލް-އޮޓޯ

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

ވަޅުލުން

ޑިފޯލްޓް ގްރިޑާއެކު ތިމާގެ ކޮންޓެންޓް ނެސްޓް ކުރުމަށްޓަކައި، މިހާރު ހުރި ކޮލަމެއްގެ ތެރެއަށް އާ .rowއަދި ސެޓެއްގެ .col-sm-*ކޮލަމްތައް އިތުރުކުރުން .col-sm-*. ނެސްޓްކޮށްފައިވާ ރޯތަކުގައި 12 ނުވަތަ އެއަށްވުރެ މަދު ކޮލަމްތަކުގެ ސެޓެއް ހިމަނަންވާނެއެވެ (ލިބެންހުރި ހުރިހާ 12 ކޮލަމްއެއް ބޭނުންކުރަން ނުޖެހެއެވެ).

ލެވެލް 1: .col-sm-9

ލެވެލް 2: .ކޮލް-8 .ކޮލް-އެސްއެމް-6

ލެވެލް 2: .ކޮލް-4 .ކޮލް-އެސްއެމް-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ސާސް މިކްސިންސް އެވެ

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

ވެރިއޭބަލްސް އެވެ

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

މިކްސިންސް އެވެ

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

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

މިސާލު ބޭނުން ކުރުމެވެ

ވެރިއޭބަލްތައް އަމިއްލައަށް ކަސްޓަމް ވެލިއުތަކަށް ބަދަލުކުރެވިދާނެ، ނުވަތަ ހަމައެކަނި މިކްސިންސްތައް އެމީހުންގެ ޑިފޯލްޓް ވެލިއުތަކާއެކު ބޭނުންކުރެވިދާނެއެވެ. މިއީ ޑިފޯލްޓް ސެޓިންގސް ބޭނުންކޮށްގެން ދެ ކޮލަމްގެ ލޭއައުޓެއް އުފެއްދުމުގެ މިސާލެކެވެ.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

މައިގަނޑު ކޮންޓެންޓް

ސެކަންޑަރީ ކޮންޓެންޓް

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ގްރިޑް ކަސްޓަމައިޒް ކުރުން

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

ކޮލަމްތަކާއި ގަޓަރުތަކެވެ

ގްރިޑް ކޮލަމްތަކުގެ އަދަދު ސާސް ވެރިއޭބަލްސް މެދުވެރިކޮށް ބަދަލުކުރެވޭނެއެވެ. $grid-columnsކޮންމެ ވަކި ކޮލަމެއްގެ ފުޅާމިން (އިންސައްތައިން) އުފެއްދުމަށް ބޭނުންކުރާއިރު $grid-gutter-widthކޮލަމް ގަޓަރުތަކަށް ފުޅާމިން ސެޓްކުރެއެވެ.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

ގްރިޑް ޓިއަރސް އެވެ

ޚުދު ކޮލަމްތަކުން ވެސް ކުރިއަށް ގޮސް، ގްރިޑް ޓިއަރސްގެ އަދަދު ވެސް ކަސްޓަމައިޒް ކުރެވިދާނެއެވެ. ހަމައެކަނި ހަތަރު ގްރިޑް ޓިއަރ ބޭނުންނަމަ، ތިބާ އަޕްޑޭޓް ކުރާނީ $grid-breakpointsއަދި $container-max-widthsމިކަހަލަ އެއްޗަކަށް:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ސާސް ވެރިއޭބަލްތަކަށް ނުވަތަ މެޕްތަކަށް އެއްވެސް ބަދަލެއް ގެންނައިރު، ބަދަލުތައް ސޭވްކޮށް އަލުން ކޮމްޕައިލް ކުރަން ޖެހޭނެއެވެ. އެކަން ކުރުމުން ކޮލަމް ފުޅާމިނާއި، އޮފްސެޓްތަކާއި، އޯޑަރ ކުރުމަށް ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތަކުގެ މުޅިން އައު ސެޓެއް އައުޓްޕުޓް ކުރެވޭނެއެވެ. އަދި ކަސްޓަމް ބްރޭކްޕޮއިންޓްތައް ބޭނުން ކުރުމަށް ރެސްޕޮންސިވް ވިޒިބިލިޓީ ޔުޓިލިޓީސް ވެސް އަޕްޑޭޓް ކުރެވޭނެ އެވެ. pxގްރިޑް ވެލިއުތައް (ނޫން rem, em, ނުވަތަ %) ގައި ސެޓްކޮށްފައިވާކަން ޔަޤީންކުރައްވާށެވެ .