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

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

<div ކްލާސް = "ރޯ" > 
  <div ކްލާސް = "ސްޕަން4" > ... </div> 
  <div ކްލާސް = "span8" > ... </div> 
</div> އެވެ

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

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

މިސާލު

<div ކްލާސް = "ރޯ" > 
  <div ކްލާސް = "ސްޕަން12" > 
    ކޮލަމްގެ ލެވެލް 1
    <div ކްލާސް = "ރޯ" > 
      <div class = "span6" > ލެވެލް 2 </div> 
      <div class = "span6" > ލެވެލް 2 </div> 
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

ލެސް ގައި ހުންނަ ވެރިއޭބަލްސް

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

ކަސްޓަމައިޒް ކުރާނެ ގޮތް

ގްރިޑް ބަދަލުކުރުމުގެ މާނައަކީ ތިން @grid*ވެރިއޭބަލް ބަދަލުކޮށް ބޫޓްސްޓްރެޕް އަލުން ކޮމްޕައިލް ކުރުމެވެ. ވެރިއޭބަލްސް.ލެސް ގައި ގްރިޑް ވެރިއޭބަލްސް ބަދަލުކޮށް ރީކޮމްޕައިލް ކުރުމަށް ލިޔެކިޔުނު ހަތަރު ގޮތްގެ ތެރެއިން އެއް ގޮތް ބޭނުން ކުރާށެވެ . އިތުރު ކޮލަމްތައް އިތުރުކުރަމުންދާނަމަ، grid.less ގައި ހުންނަ މީހުންނަށް ސީއެސްއެސް އިތުރުކުރުން ޔަގީންކުރައްވާށެވެ.

ޖަވާބުދާރީވެ ތިބުމެވެ

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

ފިކްސްޑް ލޭއައުޓް

ޑިފޯލްޓް އަދި ސާދާ 940px ފުޅާ، މަރުކަޒުކޮށްފައިވާ ލޭއައުޓް ގާތްގަނޑަކަށް ކޮންމެ ވެބްސައިޓަކަށް ނުވަތަ ޕޭޖަކަށް ފޯރުކޮށްދޭ އެއް <div class="container">.

<ހަށިގަނޑު> އެވެ
  <div ކްލާސް = "ކޮންޓެއިނަރ" > 
    ...
  </div> އެވެ
</body> އެވެ

ފްލޫޑް ލޭއައުޓް

<div class="container-fluid">ފްލެކްސިބަލް ޕޭޖް ސްޓްރަކްޗަރ، މިން- އަދި މެކްސް-ވިޑްތްސް، އަދި ކަނާތްފަރާތުގައިވާ ސައިޑްބާރ އެއް ލިބިގެންދެއެވެ. އެޕްސް އާއި ޑޮކްސް އަށް ވެސް ވަރަށް ރަނގަޅެވެ.

<div class = "ކޮންޓެއިނަރ-ފްލޫޑް" > 
  <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
    <div ކްލާސް = "ސްޕަން2" > 
      <!--ސައިޑްބާރ ކޮންޓެންޓް-->
    </div> އެވެ
    <div ކްލާސް = "ސްޕަން10" > 
      <!--ހަށިގަނޑުގެ ކޮންޓެންޓް-->
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

ސަޕޯޓްކުރާ ޑިވައިސްތަކެވެ

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

އެމީހުން ކުރާ ކަމެއް

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

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

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

1. ކޮމްޕައިލް ކުރެވިފައިވާ ރެސްޕޮންސިވް ވަރޝަން، bootstrap-responsive.css ބޭނުން ކުރާށެވެ
2. @import "responsive.less" އެޑްކޮށް ބޫޓްސްޓްރެޕް އަލުން ކޮމްޕައިލް ކުރާށެވެ
3. ވަކި އެއްޗެއްގެ ގޮތުގައި ރެސްޕޮންސިވް.ލެސް ބަދަލުކޮށް އަލުން ކޮމްޕައިލްކުރުން

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

  // ލޭންޑްސްކޭޕް ފޯނުތަކާއި ޑައުން
  @މީޑިއާ ( މެކްސް - ވިޑްތް : 480px ) { ... }     
 
  // ލޭންޑްސްކޭޕް ފޯނުން ޕޯޓްރެއިޓް ޓެބްލެޓަށް
  @މީޑިއާ ( މެކްސް - ވިޑްތް : 768px ) { ... }     
 
  // ޕޯޓްރެއިޓް ޓެބްލެޓް ލޭންޑްސްކޭޕް އަދި ޑެސްކްޓޮޕް އަށް
  @media ( މިން - ވިޑްތް : 768px ) އަދި ( މެކްސް - ވިޑްތް : 940px ) { ... }        
 
  // ބޮޑު ޑެސްކްޓޮޕެއް
  @މީޑިއާ ( މިން - ވިޑްތް : 1200px ) { .. }