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

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

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

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

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

މިސާލު

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

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

ޕަސެންޓް، ޕިކްސެލް ނޫން

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

ފްލޫޑް ރޯތަކެވެ

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

މާކަޕް

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

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

<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> އެވެ

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

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

މެޓާ ޓެގް ބޭނުންވެއެވެ

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

<meta name = "ވިއުޕޯޓް" ކޮންޓެންޓް = "ވިޑްތް=ޑިވައިސް-ވިޑްތް، އިންޓިޝިއަލް-ސްކޭލް=1.0" >  

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

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

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

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

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

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

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