ބޫޓްސްޓްރެޕް އެވެ

ސްކެފޯލްޑިންގ އެވެ

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

ސީއެސްއެސް ރީސެޓް، ޓައިޕޮގްރަފީ، އަދި ލިންކްތަކަށް ގްލޯބަލް ސްޓައިލްސް

އެޗްޓީއެމްއެލް5 ޑޮކްޓައިޕް ބޭނުންވެއެވެ

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

  1. <!ޑޮކްޓައިޕް html>
  2. <html lang = "en" > 
  3.   ...
  4. </html> އެވެ

ޓައިޕޮގްރަފީ އާއި ލިންކްތައް

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

  • ހަށިގަނޑުގައި ހުންނަ މާރޖިން ނައްތާލާށެވެ
  • ސެޓް background-color: white;އޮން ދަ...body
  • އަޅުގަނޑުމެންގެ ޓައިޕޮގްރަފިކް ބޭސްގެ ގޮތުގައި @baseFontFamily, @baseFontSize, އަދި އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ@baseLineHeight
  • ގްލޯބަލް ލިންކް ކުލަ މެދުވެރިކޮށް ސެޓްކޮށް @linkColorލިންކް އަންޑަލައިންސް އެކަނި އޮން ކޮށްލާށެވެ:hover

ނޯމަލައިޒް މެދުވެރިކޮށް ރީސެޓް ކުރާށެވެ

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

އާ ރީސެޓް އަދިވެސް reset.less އިން ފެނިދާނެ ނަމަވެސް ކުރުކަމާއި ޞައްޙަކަމަށްޓަކައި ގިނަ އުފެއްދުންތަކެއް ނައްތާލާފައިވެއެވެ.

ޑިފޯލްޓް ގްރިޑް ސިސްޓަމް 12 ކޮލަމް އާއި އެކު ރެސްޕޮންސިވް ޓްވިސްޓެއް

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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


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

4
4 އޮފްސެޓް 4
3 އޮފްސެޓް 3
3 އޮފްސެޓް 3
8 އޮފްސެޓް 4 
  1. <div ކްލާސް = "ރޯ" > 
  2.   <div ކްލާސް = "ސްޕަން4" > ... </div> 
  3.   <div ކްލާސް = "ސްޕަން4 އޮފްސެޓް4" > ... </div> 
  4. </div> އެވެ

ނެސްޓިންގ ކޮލަމްތައް

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

މިސާލު

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

ކޮލަމްގެ ލެވެލް 1
ލެވެލް 2
ލެވެލް 2 
  1. <div ކްލާސް = "ރޯ" > 
  2.   <div ކްލާސް = "ސްޕަން6" > 
  3.     ލެވެލް 1 ކޮލަމް
  4.     <div ކްލާސް = "ރޯ" > 
  5.       <div class = "span3" > ލެވެލް 2 </div> 
  6.       <div class = "span3" > ލެވެލް 2 </div> 
  7.     </div> އެވެ
  8.   </div> އެވެ
  9. </div> އެވެ

ފްލޫޑް ގްރިޑް ސިސްޓަމް 12 ރެސްޕޮންސިވް، ޕަސެންޓް ބެސްޓް ކޮލަމް

ފްލޫޑް ކޮލަމްތަކެވެ

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

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

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

މާކަޕް

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

ފްލޫޑް ނެސްޓިންގ

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

ފްލޫޑް 12
ފްލޫޑް 6
ފްލޫޑް 6 
  1. <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
  2.   <div ކްލާސް = "ސްޕަން12" > 
  3.     ކޮލަމްގެ ލެވެލް 1
  4.     <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
  5.       <div class = "span6" > ލެވެލް 2 </div> 
  6.       <div class = "span6" > ލެވެލް 2 </div> 
  7.     </div> އެވެ
  8.   </div> އެވެ
  9. </div> އެވެ

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

ވެރިއޭބަލް އެވެ ޑިފޯލްޓް ވެލިއު ތަފްޞީލު
@gridColumns 12 ކޮލަމްތަކުގެ އަދަދު
@gridColumnWidth 60ޕީއެކްސް އެވެ ކޮންމެ ކޮލަމެއްގެ ފުޅާމިން
@gridGutterWidth 20ޕީއެކްސް އެވެ ކޮލަމްތަކުގެ މެދުގައި ނެގެޓިވް ޖާގަ

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

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

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

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

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

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

ލޭއައުޓްސް ވެބްޕޭޖްތައް އުފެއްދުމަށް ބޭނުންވާ އަސާސީ ޓެމްޕްލޭޓްތައް

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

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

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

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

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

  1. <div class = "ކޮންޓެއިނަރ-ފްލޫޑް" > 
  2.   <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
  3.     <div ކްލާސް = "ސްޕަން2" > 
  4.       <!--ސައިޑްބާރ ކޮންޓެންޓް-->
  5.     </div> އެވެ
  6.     <div ކްލާސް = "ސްޕަން10" > 
  7.       <!--ހަށިގަނޑުގެ ކޮންޓެންޓް-->
  8.     </div> އެވެ
  9.   </div> އެވެ
  10. </div> އެވެ

ރެސްޕޮންސިވް ޑިޒައިން އެކި ޑިވައިސްތަކާއި ރިޒޮލިއުޝަންތަކަށް މީޑިއާ ކިއުއަރީތައް ހެދުން

ރެސްޕޮންސިވް ޑިވައިސްތަކެވެ

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

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

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

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

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

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

ލޭބަލް ލޭއައުޓް ފުޅާމިން ކޮލަމް ފުޅާމިން ގަޓަރުގެ ފުޅާމިން
ސްމާޓްފޯނުތަކެވެ 480px އަދި އެއަށްވުރެ ދަށުގައެވެ ފްލޫޑް ކޮލަމްތައް، ވަކި ފުޅާމިންތަކެއް ނެތެވެ
ސްމާޓްފޯނުން ޓެބްލެޓްތަކަށް 767px އަދި އެއަށްވުރެ ދަށުގައެވެ ފްލޫޑް ކޮލަމްތައް، ވަކި ފުޅާމިންތަކެއް ނެތެވެ
ޕޯޓްރެއިޓް ޓެބްލެޓްތަކެވެ 768px އާއި އެއަށްވުރެ މަތީގެ އެއްޗެކެވެ 42ޕީއެކްސް އެވެ 20ޕީއެކްސް އެވެ
ޑީފޯލްޓް 980px އާއި މަތީގެ އެވެ 60ޕީއެކްސް އެވެ 20ޕީއެކްސް އެވެ
ބޮޑު ޑިސްޕްލޭއެކެވެ 1200px އާއި މަތީގެ އެވެ 70ޕީއެކްސް އެވެ 30ޕީއެކްސް އެވެ

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

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

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

މީޑިއާ ސުވާލުތައް ބޭނުންކޮށްގެންނެވެ

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

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

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

  1.   /* ލޭންޑްސްކޭޕް ފޯނުތަކާއި ޑައުން */
  2.   @މީޑިއާ ( މެކްސް - ވިޑްތް : 480px ) { ... }     
  3.  
  4.   /* ލޭންޑްސްކޭޕް ފޯނުން ޕޯޓްރެއިޓް ޓެބްލެޓަށް */
  5.   @މީޑިއާ ( މެކްސް - ވިޑްތް : 767px ) { ... }     
  6.  
  7.   /* ޕޯޓްރެއިޓް ޓެބްލެޓް ލޭންޑްސްކޭޕް އަދި ޑެސްކްޓޮޕް އަށް */
  8.   @media ( މިން - ވިޑްތް : 768px ) އަދި ( މެކްސް - ވިޑްތް : 979px ) { ... }        
  9.  
  10.   /* ބޮޑު ޑެސްކްޓޮޕް */
  11.   @މީޑިއާ ( މިން - ވިޑްތް : 1200px ) { ... }

ރެސްޕޮންސިވް ޔުޓިލިޓީ ކްލާސްތަކެވެ

އެއީ ކޮންކަމެއް ހެއްޔެވެ

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

ބޭނުންކުރާނީ ކޮން އިރަކުތޯއެވެ

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

މިސާލަކަށް <select>މޯބައިލް ލޭއައުޓްތަކުގައި nav އަށް އެލިމެންޓެއް ދައްކާފާނެ ނަމަވެސް ޓެބްލެޓް ނުވަތަ ޑެސްކްޓޮޕްގައި ނުދައްކާފާނެއެވެ.

ސަޕޯޓް ކްލާސްތަކަށް

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

ކްލާސް ފޯނުތަކެވެ480px އަދި އެއަށްވުރެ ދަށުގައެވެ ޓެބްލެޓްތަކެވެ767px އަދި އެއަށްވުރެ ދަށުގައެވެ ޑެސްކްޓޮޕްތަކެވެ768px އާއި އެއަށްވުރެ މަތީގެ އެއްޗެކެވެ
.visible-phone ފެންނަން ހުރެއެވެ
.visible-tablet ފެންނަން ހުރެއެވެ
.visible-desktop ފެންނަން ހުރެއެވެ
.hidden-phone ފެންނަން ހުރެއެވެ ފެންނަން ހުރެއެވެ
.hidden-tablet ފެންނަން ހުރެއެވެ ފެންނަން ހުރެއެވެ
.hidden-desktop ފެންނަން ހުރެއެވެ ފެންނަން ހުރެއެވެ

ޓެސްޓް ކޭސް

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

ފެންނަނީ...

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

  • ފޯނު✔ ފޯނު
  • ޓެބްލެޓް އެވެ✔ ޓެބްލެޓް
  • ޑެސްކްޓޮޕް އެވެ✔ ޑެސްކްޓޮޕް

ފޮރުވިފައި އޮތީ...

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

  • ފޯނު✔ ފޯނު
  • ޓެބްލެޓް އެވެ✔ ޓެބްލެޓް
  • ޑެސްކްޓޮޕް އެވެ✔ ޑެސްކްޓޮޕް