in English

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

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

މި ޞަފްޙާގައެވެ

މިސާލު

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

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

ކޮލަމް

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

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

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

އެކަން ފަޅާއަރުވާލާއިރު، މިއޮތީ ގްރިޑް ސިސްޓަމް އެއްކޮށްލާ ގޮތް:

އަޅުގަނޑުމެންގެ ގްރިޑް ސަޕޯޓް ކުރަނީ ހަ ރެސްޕޮންސިވް ބްރޭކްޕޮއިންޓް . ބްރޭކްޕޮއިންޓްތައް ބިނާވެފައިވަނީ min-widthމީޑިއާ ކިއުއަރީތަކުގެ މައްޗަށް ކަމުގައި ވާއިރު، މާނައަކީ އެ ބްރޭކްޕޮއިންޓާއި އެ ބްރޭކްޕޮއިންޓްގެ މަތީގައިވާ ހުރިހާ ފަރާތްތަކަށް އަސަރުކުރާ އެއްޗެކެވެ (އެބަހީ، , , , , އަދި .col-sm-4އަށް އަމަލުކުރެއެވެ ). މާނައަކީ ކޮންމެ ބްރޭކްޕޮއިންޓަކުން ކޮންޓެއިނަރާއި ކޮލަމް ސައިޒިންގ އާއި ބިހޭވިއަރ ކޮންޓްރޯލް ކުރެވޭނެއެވެ.smmdlgxlxxl
ކޮންޓެއިނަރުތައް ސެންޓަރކޮށް ހޮރައިޒޮންޓަލީ ޕެޑް ކޮށްލާފައި ތިބާގެ ކޮންޓެންޓް ޕެޑް ކޮށްލާށެވެ. .containerރެސްޕޮންސިވް ޕިކްސެލް ވިޑްތް އަށް، ހުރިހާ .container-fluidވިއުޕޯޓްތަކާއި width: 100%ޑިވައިސްތަކުގެ ތެރެއިން، ނުވަތަ .container-mdފްލޫޑް އަދި ޕިކްސެލް ވިޑްތް އެއްކޮށްގެން ރެސްޕޮންސިވް ކޮންޓެއިނަރ (އެބަހީ، ) ބޭނުން ކުރާށެވެ.
ސަފުތަކަކީ ކޮލަމްތަކަށް ރައްކާކުރާ އެއްޗެހިތަކެކެވެ. ކޮންމެ ކޮލަމެއްގައިވެސް paddingއެދެމެދުގައިވާ ޖާގަ ކޮންޓްރޯލް ކުރުމަށްޓަކައި ހޮރައިޒޮންޓަލް (ގަޓަރ ކިޔާ) އެއް ހުރެއެވެ. މިކަން paddingދެން ނެގެޓިވް މާރޖިންތަކާއެކު ރޯތަކުގައި ކައުންޓަރ ކުރެވިގެން ތިބާގެ ކޮލަމްތަކުގައިވާ ކޮންޓެންޓް ކަނާތްފަރާތުން ތިރިއަށް ލޮލުން ފެންނަ ގޮތަށް އެއްވަރުކޮށްފައި ހުންނަކަން ޔަޤީންކޮށްދެއެވެ. އަދި ކޮލަމް ސައިޒިންގ އެއްގޮތަކަށް އެޕްލައި ކުރުމަށް މޮޑިފައި ކްލާސްތަކަށް ވެސް ރޯތަކުން ސަޕޯޓް ކުރާއިރު ، ތިބާގެ ކޮންޓެންޓްގެ ސްޕޭސިންގ ބަދަލު ކުރުމަށް ގަޓަރ ކްލާސްތައް ވެސް ސަޕޯޓް ކުރެއެވެ.
ކޮލަމްތަކަކީ ގަބޫލުކުރަން ދަތި ވަރުގެ ފްލެކްސިބަލް ކޮލަމްތަކެކެވެ. ކޮންމެ ރޯއަކަށް 12 ޓެމްޕްލޭޓް ކޮލަމް ލިބޭއިރު، ކޮންމެ އަދަދަކަށް ކޮލަމް ވެސް ފުޅާވެފައިވާ ތަފާތު ކޮމްބިނޭޝަންތަކުގެ އުފެއްދުންތައް އުފެއްދުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ. ކޮލަމް ކްލާސްތަކުން ދައްކުވައިދެނީ ސްޕަން ކުރަންޖެހޭ ޓެމްޕްލޭޓް ކޮލަމްތަކުގެ އަދަދު (އެބަހީ، col-4ސްޕަންސް ހަތަރު) އެވެ. widths ސެޓްކޮށްފައިވަނީ ޕަސެންޓްތަކުން ކަމުން އަބަދުވެސް އެއް ރިލޭޓިވް ސައިޒިންގ އެއް ލިބިގެންދެއެވެ.
އަދި ގަޓަރުތަކަކީ ވެސް ރެސްޕޮންސިވް އަދި ކަސްޓަމައިޒް ކުރެވޭ އެއްޗެހިތަކެކެވެ. ގަޓަރ ކްލާސްތައް ހުރިހާ ބްރޭކްޕޮއިންޓްތަކެއް ހުރަސްކޮށް ލިބެން ހުންނައިރު، ހުރިހާ ސައިޒްތަކެއް އަޅުގަނޑުމެންގެ މާރޖިން އަދި ޕެޑިންގ ސްޕޭސިންގ އާއި އެއްވަރަށް ލިބެން ހުންނާނެއެވެ . ކްލާސްތަކާއެކު ހޮރައިޒޮންޓަލް ގަޓަރުތައް، .gx-*ކްލާސްތަކާއެކު ވަރުގަދަ ގަޓަރުތައް .gy-*، ނުވަތަ .g-*ކްލާސްތަކާއެކު ހުރިހާ ގަޓަރުތައް ބަދަލުކުރުން. .g-0އަދި ގަޓަރުތައް ނައްތާލުމަށް ވެސް ލިބެން ހުރެ އެވެ.
ސާސް ވެރިއޭބަލްސް، މެޕްސް، އަދި މިކްސިންސް އިން ގްރިޑަށް ކަރަންޓް ދެއެވެ. ބޫޓްސްޓްރެޕްގައި ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް ބޭނުންކުރަން ބޭނުން ނުވާނަމަ، އަޅުގަނޑުމެންގެ ގްރިޑްގެ ސޯސް ސާސް ބޭނުންކޮށްގެން އިތުރު ސެމެންޓިކް މާކަޕަކާއެކު އަމިއްލައަށް އުފައްދާލެވޭނެއެވެ. އަދި ތިޔަބޭފުޅުންނަށް އިތުރު ފްލެކްސިބިލިޓީއަކަށްޓަކައި މި ސާސް ވެރިއޭބަލްތައް ކޮންސިއުމް ކުރުމަށް ބައެއް ސީއެސްއެސް ކަސްޓަމް ޕްރޮޕަޓީތައް ވެސް އަޅުގަނޑުމެން ހިމަނާނަމެވެ.

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

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

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

އިތުރަށް ކުޑަ (xs)
ކުޑަ (sm) .
މީޑިއަމް (އެމްޑީ)
ބޮޑު (އެލްޖީ)
އިތުރަށް ބޮޑު (xl)
އިތުރު އިތުރު ބޮޑު (xxl)

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

	xs <576px އެވެ	sm ≥576px އެވެ	md ≥768px އެވެ	lg ≥992px އެވެ	xl ≥1200px އެވެ	xxl ≥1400px އެވެ
ކޮންޓެއިނަރެވެ`max-width`	އެއްވެސް އެއްޗެއް ނެތް (އޮޓޯ)	540ޕީއެކްސް އެވެ	720ޕީއެކްސް އެވެ	960ޕީއެކްސް އެވެ	1140ޕީއެކްސް އެވެ	1320ޕީއެކްސް އެވެ
ކްލާސް ޕްރިފިކްސް	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ކޮލަމްތަކުގެ	12
ގަޓަރުގެ ފުޅާމިން	1.5rem (ކަނާތް އަދި ވާތް ފަރާތުގައި .75rem)
ކަސްޓަމް ގަޓަރުތަކެވެ	އާނ
ނެސްޓެބަލް އެވެ	އާނ
ކޮލަމް އޯޑަރު ކުރުން	އާނ

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

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

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

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

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>

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

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

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>

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

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

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

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

ކޮލް

ކޮލް-8 އެވެ

ކޮލް-4

<div class="container">
  <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>
</div>

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

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

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

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

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

<div class="container">
  <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>
</div>

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

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

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

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

.ކޮލް-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>

ރޯ ކޮލަމްތައް

.row-cols-*ތިމާގެ ކޮންޓެންޓާއި ލޭއައުޓް އެންމެ ރަނގަޅަށް ރެންޑަރ ކުރާ ކޮލަމްތަކުގެ އަދަދު އަވަހަށް ސެޓް ކުރުމަށް ރެސްޕޮންސިވް ކްލާސްތައް ބޭނުން ކުރާށެވެ . އާދައިގެ .col-*ކްލާސްތައް ވަކިވަކި ކޮލަމްތަކަށް އަމަލުކުރާއިރު (އެބަހީ، .col-md-4)، ރޯ ކޮލަމްތަކުގެ ކްލާސްތައް ސެޓްކުރެވެނީ .rowޝޯޓްކަޓެއްގެ ގޮތުގައި ބެލެނިވެރިޔާގެ މައްޗަށެވެ. ތިބާއާއެކު .row-cols-autoކޮލަމްތަކަށް އެމީހުންގެ ގުދުރަތީ ފުޅާމިން ދެވޭނެއެވެ.

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

ކޮލަމް

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ކޮލަމް

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ކޮލަމް

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ކޮލަމް

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ކޮލަމް

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ކޮލަމް

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

އަދި އެކުގައިވާ ސާސް މިކްސިން ވެސް ބޭނުން ކުރެވިދާނެ، row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ވަޅުލުން

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

ސާސް އެވެ

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

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

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

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

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

// 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.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: 1.5rem !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, ނުވަތަ %) ގައި ސެޓްކޮށްފައިވާކަން ޔަޤީންކުރައްވާށެވެ .