ސްކެފޯލްޑިންގ · ބޫޓްސްޓްރެޕް މޯލްޑިވިއަންގައެވެ

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

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

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

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

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

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

މި ސްޓައިލްތައް ސްކެފޯލްޑިންގ ގެ ތެރެއިން ފެންނާނެއެވެ.less .

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

ބޫޓްސްޓްރެޕް 2 އާއެކު، ކުރީގެ ރީސެޓް ބްލޮކް ދޫކޮށްލާފައިވަނީ ނޯމަލައިޒް.ސީއެސްއެސް ގެ ފަރާތުން ކަމަށާއި، މިއީ އެޗްޓީއެމްއެލް5 ބޮއިލަރޕްލޭޓް އަށް ވެސް ބާރު ލިބޭ ނިކޮލަސް ގަލަގާ އާއި ޖޮނަތަން ނީލް ގެ ޕްރޮޖެކްޓެކެވެ . އަޅުގަނޑުމެންގެ reset.less ގެ ތެރޭގައި ނޯމަލައިޒްގެ ބޮޑު ބައެއް ބޭނުންކުރާއިރު ، ބޫޓްސްޓްރެޕް އަށް ޚާއްޞަކޮށްގެން ބައެއް އެލިމެންޓްތައް ނައްތާލާފައިވެއެވެ.

ލައިވް ގްރިޑް މިސާލު

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

އަސާސީ ގްރިޑް އެޗްޓީއެމްއެލް

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

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

މި މިސާލަށް ބަލާއިރު، އަޅުގަނޑުމެންނަށް ލިބިފައިވަނީ .span4އަދި .span8, ޖުމްލަ 12 ކޮލަމް އާއި ފުރިހަމަ ރޯއަކަށް ހެދުމެވެ.

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

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

3 އޮފްސެޓް 2

3 އޮފްސެޓް 1

3 އޮފްސެޓް 2

6 އޮފްސެޓް 3

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

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

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

ލެވެލް 1 ކޮލަމް

ލެވެލް 2

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

ލައިވް ފްލޫޑް ގްރިޑް މިސާލެއް

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

އަސާސީ ފްލޫޑް ގްރިޑް އެޗްޓީއެމްއެލް

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

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

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

ފިކްސްޑް ގްރިޑް ސިސްޓަމް އޮފްސެޓިންގ އާއި އެއްގޮތަށް އޮޕަރޭޓް ކުރެއެވެ: .offset*އެ ގިނަ ކޮލަމްތަކުން އޮފްސެޓް ކުރުމަށް ކޮންމެ ކޮލަމަކަށް އިތުރުކުރުން.

4 އޮފްސެޓް 4

3 އޮފްސެޓް 3

6 އޮފްސެޓް 6

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

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

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

ފްލޫޑް 12

ފްލޫޑް 6

<div ކްލާސް = "ރޯ-ފްލޫޑް" > 
  <div ކްލާސް = "ސްޕަން12" > 
    ފްލޫޑް 12
    <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
      <div ކްލާސް = "ސްޕަން6" > 
        ފްލޫޑް 6
        <div ކްލާސް = "ރޯ-ފްލޫޑް" > 
          <div class = "span6" > ފްލޫޑް 6 </div> 
          <div class = "span6" > ފްލޫޑް 6 </div> 
        </div> އެވެ
      </div> އެވެ
      <div class = "span6" > ފްލޫޑް 6 </div> 
    </div> އެވެ
  </div> އެވެ
</div> އެވެ

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

ހަމައެކަނި ބޭނުންވާ ގޮތަށް އާންމު ފިކްސްޑް-ވިޑްތް (އަދި އިޚްތިޔާރީ ގޮތެއްގައި ރެސްޕޮންސިވް) ލޭއައުޓެއް ފޯރުކޮށްދެއެވެ <div class="container">.

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

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

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

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

ރެސްޕޮންސިވް ފީޗާސް އެނެބަލް ކުރުން

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

<meta name = "ވިއުޕޯޓް" ކޮންޓެންޓް = "ވިޑްތް=ޑިވައިސް-ވިޑްތް، އިންޓިޝިއަލް-ސްކޭލް=1.0" >  
<link href = "އެސެޓްސް/ސީއެސްއެސް/ބޫޓްސްޓްރެޕް-ރެސްޕޮންސިވް.ސީއެސްއެސް" rel = "ސްޓައިލްޝީޓް" >

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

ރެސްޕޮންސިވް ބޫޓްސްޓްރެޕް އާއި ބެހޭގޮތުން

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

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

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

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

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

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

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

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

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

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

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

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

ރެސްޕޮންސިވް ޔުޓިލިޓީސް ޓެސްޓް ކޭސް

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

ފެންނަނީ...

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

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

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

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

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

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

ގްލޯބަލް ސެޓިންގްސް އެވެ