ތާރީޚް

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

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

އިތުރަށް ކިޔައިލައްވާ dev.twitter.com ›

ބްރައުޒާ ސަޕޯޓް ދިނުން

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

• އެންމެ ފަހުގެ ސަފާރީ
• އެންމެ ފަހުގެ ގޫގުލް ކްރޯމް
• ފަޔަރފޮކްސް 4+ އެވެ
• އިންޓަރނެޓް އެކްސްޕްލޯރަރ 7+
• އޮޕެރާ 11

ހިމެނޭ އެއްޗެއް

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

• ހުރިހާ އަސްލު .ލެސް ފައިލްތަކެއް
• ފުރިހަމައަށް ކޮމްޕައިލްކޮށް މިނިފައިޑް ސީއެސްއެސް
• ސްޓައިލްގައިޑް ޑޮކިއުމަންޓޭޝަން ފުރިހަމަކުރުން
• މިސާލު ޕޭޖް ޓެމްޕްލޭޓް (އިތުރަށް އަވަހަށް އަންނާނެ)

ޑިފޯލްޓް ގްރިޑް

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

މިސާލު ގްރިޑް މާކަޕް

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

<div ކްލާސް = "ރޯ" > 
  <div class = "span6 ކޮލަމްސް" > 
    ...
  </div> އެވެ
  <div class = "span10 ކޮލަމް" > 
    ...
  </div> އެވެ
</div> އެވެ

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

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

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

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

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

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

ހެޑިންގސް & ކޮޕީ

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

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

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

ހ1. ސުރުޚީ 1

ހ2. ސުރުޚީ 2

ހ3. ސުރުޚީ 3

ހ4. ސުރުޚީ 4

ހ5. ސުރުޚީ 5

ހ6. ސުރުޚީ 6

މިސާލު ޕެރެގްރާފް

ނޫލަމް ކުއިސް ރިސަސް އެގޭޓް އުރްނާ މޮލިސް އޮރްނާރޭ ވެލް އެއު ލިއޯ. ކަމް ސޯޝިއަސް ނަޓޯކް ޕެނަޓިބަސް އެޓް މެގްނިސް ޑިސް ޕާޗުރިއަންޓް މޮންޓެސް، ނަސްސެޓަރ ރިޑިކިއުލަސް މުސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކިއުލާ އުޓް އައިޑީ އެލިޓް.

މިސާލު ސުރުޚީ ސަބް ހެޑިންގ އެއް ހުރެއެވެ...

މިސްކް. އުނިއިތުރުތަކެވެ

ބާރުއެޅުން، އެޑްރެސް، & ކުރުކުރުންތައް ބޭނުންކޮށްގެން

<strong> <em> <address> <abbr>

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

ބާރުއަޅާ ޓެގް ( <strong>އަދި <em>) ބޭނުންކުރަންވާނީ ލަފުޒެއް ނުވަތަ ޢިބާރާތެއްގެ ވަށައިގެންވާ ކޮޕީއާ އަޅާބަލާއިރު އިތުރު މުހިންމުކަން ނުވަތަ ބާރުއެޅުން ދައްކުވައިދިނުމަށެވެ. <strong>މުހިންމުކަމަށްޓަކައި އަދި <em>ސްޓްރެސްއަށް ބާރުއެޅުމަށް ބޭނުންކުރުން .

ޕެރެގްރާފެއްގައި ބާރުއެޅުން

ފުސްސޭ ޑަޕިބަސް , ޓެލަސް އެކް ކަރސަސް ކޮމޮޑޯ , ޓޯރޓޯރ މައުރިސް ކޮންޑިމެންޓަމް ނިބް , އުޓް ފަރމަންޓަމް މަސާ ޖަސްޓޯ ސިޓް އަމެޓް ރިސަސް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް.

ނޯޓް: އަދިވެސް އެޗްޓީއެމްއެލް5 ގައި <b>އަދި <i>ޓެގްތައް ބޭނުންކުރުމަކީ އޯކޭ ކަމެއް ކަމަށާއި އެއީ ބޮލްޑް އަދި އިޓަލިކް ސްޓައިލް ކޮށްފައި ހުންނަން ނުޖެހޭނެ ކަމަށް ވެސް ވިދާޅުވި އެވެ (އެއަށްވުރެ މާނަހުރި އުނިއިތުރެއް އޮތް ނަމަވެސް ބޭނުންކުރައްވާށެވެ). <b>އިތުރު މުހިންމުކަމެއް ނުދީ ލަފުޒުތައް ނުވަތަ ޢިބާރާތްތަކަށް އަލިއަޅުވާލުމަށް މާނަކޮށްފައިވާއިރު، <i>ގިނައިން ވާހަކަ ދައްކާފައިވަނީ އަޑާއި، ފަންނީ ޝަރުޠުތަކާއި، ފަދަ ކަންކަމަށެވެ.

އެޑްރެސްތަކެވެ

މި <address>އުނިއިތުރު ބޭނުންކުރަނީ އޭގެ އެންމެ ކައިރީގައި ހުންނަ ކާބަފައިން، ނުވަތަ މުޅި މަސައްކަތުގެ ހަށިގަނޑަށް ގުޅޭނެ މައުލޫމާތަކަށެވެ. މިއޮތީ ފެންނަ ގޮތް:

ޓްވިޓަރ، އިންކް
795 ފޯލްސަމް އެވޭ، ސުއިޓް 600
ސެން ފްރެންސިސްކޯ، ސީއޭ 94107
ޕީ: (123) 456-7890

ނޯޓް: ކޮންޓެންޓް ރަނގަޅަށް ސްޓްރަކްޗަރ ކުރުމަށްޓަކައި ލައިން-ބްރޭކް ( ) އިން ނުވަތަ ބްލޮކް ލެވެލް ޓެގެއް (އެބަހީ، ) ގައި <address>އޮޅާލަން <br />ޖެހޭނެއެވެ .<p>

ކުރުކުރުންތަކެވެ

ކުރުކުރުންތަކާއި ކުޑަކުޑަ ނަންތަކަށް، <abbr>ޓެގް ބޭނުންކުރައްވާ ( HTML5<acronym> ގައި ޑިޕްރެކޭޓެޑް ވެއެވެ ). ޓެގްގެ ތެރޭގައި ޝޯޓްހެންޑް ފޯމް ޖައްސައި ފުރިހަމަ ނަމަށް ސުރުޚީއެއް ސެޓް ކުރާށެވެ.

ބްލޮކްކޯޓްސް އެވެ

<blockquote> <p> <small>

ކޯޓް ކުރާނެ ގޮތް

ބްލޮކްކޯޓެއް ހިމެނުމަށްޓަކައި <blockquote>ވަށައިގެން ވަށާލާ ޓެގް ޖަހާށެވެ <p>. <small>އެލިމެންޓް ބޭނުންކޮށްގެން <small>ތިމާގެ ސޯސް ނަކަލުކޮށްލުމުން އޭގެ —ކުރިން އެމް ޑޭޝް އެއް ލިބޭނެއެވެ.

ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް ޑަޕިބަސް ޕޮސުއެރެ ވެލިޓް އެލިކެޓް.

ޖޫލިއަސް ހިބަރޓް ޑރ

އޯޑަރު ނުކުރެވިގެންނެވެ<ul>

• ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
• ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
• އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
• ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
• ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
  • ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
  • ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
  • ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
  • އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
• ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
• އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
• އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް

ސްޓައިލް ނުކުރެވިގެންނެވެ<ul.unstyled>

• ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
• ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
• އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
• ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
• ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
  • ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
  • ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
  • ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
  • އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
• ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
• އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
• އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް

އަމުރުކޮށްފިއެވެ<ol>

1. ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
2. ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
3. އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
4. ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
5. ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
6. ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
7. އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
8. އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް

ތަފްޞީލުdl

ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ

ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.

ޔޫއިސްމޮޑް އެވެ

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

ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް.

މަލެސުއަދާ ޕޯޓާ އެވެ

އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް.

މޭޒުތައް ބިނާކުރުން

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

އަބަދުވެސް ތިމާގެ ކޮލަމް ހެޑަރުތައް އޮޅާލާނީ <thead>ހައިރާކީ <thead>> <tr>> ވާނެ ގޮތަކަށެވެ <th>.

ކޮލަމް ހެޑަރސް އާއި އެއްގޮތަށް، ތިބާގެ ޓޭބަލްގެ ހުރިހާ ބޮޑީ ކޮންޓެންޓެއް އޮޅާފައި އޮންނަންވާނީ އެއް އެއްގެ ގޮތުގައި <tbody>ކަމުން ތިބާގެ ހައިރާކީ އަކީ <tbody>> <tr>> <td>އެވެ.

މިސާލު: ޑިފޯލްޓް ޓޭބަލް ސްޓައިލްސް

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

#	ފުރަތަމަ ނަން	ފަހު ނަން	ބަސް
1	ބައެއް	އެކެއް	އިނގިރޭސި
2	ޖޯ އެވެ	ސިކްސްޕެކް އެވެ	އިނގިރޭސި
3	ސްޓޫ	ޑެންޓް	ކޯޑް

<މޭޒު> އެވެ
  ...
</ޓޭބަލް> އެވެ

މިސާލު: ޒީބްރާ ސްޓްރައިޕްޑް

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

#	ފުރަތަމަ ނަން	ފަހު ނަން	ބަސް
1	ބައެއް	އެކެއް	އިނގިރޭސި
2	ޖޯ އެވެ	ސިކްސްޕެކް އެވެ	އިނގިރޭސި
3	ސްޓޫ	ޑެންޓް	ކޯޑް

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

<ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" > 
...
</ޓޭބަލް> އެވެ

މިސާލު: ޒީބްރާ-ސްޓްރައިޕްޑް w/ TableSorter.js

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

#	ފުރަތަމަ ނަން	ފަހު ނަން	ބަސް
1	ތިބާގެ	އެކެއް	އިނގިރޭސި
2	ޖޯ އެވެ	ސިކްސްޕެކް އެވެ	އިނގިރޭސި
3	ސްޓޫ	ޑެންޓް	ކޯޑް

<script src = "ޖޭއެސް/ޖޭކުއަރީ/ޖޭކިއުރީ.ޓޭބަލްސޯޓަރ.މިން.ޖޭއެސް" ></script> 
<ސްކްރިޕްޓް > އެވެ 
  $ ( ފަންކްޝަން () { 
    $ ( "ޓޭބަލް#ސޯޓްޓޭބަލްއެކްސްމްޕްލް" ). ޓޭބަލްސޯޓަރ ({ ސޯރޓްލިސްޓް : [[ 1 , 0 ]] });  
  });
</script> އެވެ
<ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" > 
  ...
</ޓޭބަލް> އެވެ

ޑިފޯލްޓް ސްޓައިލްތައް

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

މިސާލު ފޯމް ލެޖެންޑް

އެކްސް-ލާޖް އިންޕުޓް

ޚިޔާރުކުރުން

1 2 3 4 5

ޚިޔާރުކުރުން

1 2 3 4 5

އެޑިޓް ނުކުރެވޭ އިންޕުޓް

ބައެއް އަގު މިތަނުގައި

ޑިސެބަލްޑް އިންޕުޓް

އެކްސް-ލާޖް އިންޕުޓް

އެހީތެރިކަމުގެ ލިޔުމުގެ ކުޑަ ސްނިޕެޓެއް

މިސާލު ފޯމް ލެޖެންޑް

ޕްރީޕެންޑެޑް ޓެކްސްޓް

@

ޕްރީޕެންޑެޑް ޗެކްބޮކްސް

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

ފައިލް އިންޕުޓް

މިސާލު ފޯމް ލެޖެންޑް

އޮޕްޝަންތަކުގެ ލިސްޓް

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

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

ތާރީޚު ރޭންޖް

އަށް ހުރިހާ ގަޑިތަކެއް ދައްކާފައިވަނީ ޕެސިފިކް ސްޓޭންޑަރޑް ޓައިމް (ޖީއެމްޓީ -08:00) ގެ ގޮތުގައެވެ.

ޓެކްސްޓްއޭރިއާ އެވެ

ބޭނުން ނަމަ މަތީގައިވާ ދާއިރާ ބަޔާންކުރުމަށް އެހީތެރިކަމުގެ ލިޔުމުގެ ބްލޮކް.

އޮޕްޝަންތަކުގެ ލިސްޓް

• އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ
• އަދި އޮޕްޝަން ދެ ޗެކްކޮށް ފޯމް ނަތީޖާގައި ހިމަނާލެވޭނެ އެވެ

ބަދަލުތައް ރައްކާކުރުން  ކެންސަލް

ސްޓޭކްކޮށްފައިވާ ފޯމުތަކެވެ

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

މިސާލު ފޯމް ލެޖެންޑް

އެކްސް-ލާޖް އިންޕުޓް

ޚިޔާރުކުރުން

1 2 3 4 5

މިސާލު ފޯމް ލެޖެންޑް

އެކްސް-ލާޖް އިންޕުޓް

އެހީތެރިކަމުގެ ލިޔުމުގެ ކުޑަ ސްނިޕެޓެއް

އޮޕްޝަންތަކުގެ ލިސްޓް

• އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ
• އަދި އޮޕްޝަން ދެ ޗެކްކޮށް ފޯމް ނަތީޖާގައި ހިމަނާލެވޭނެ އެވެ

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

ބަދަލުތައް ރައްކާކުރުން  ކެންސަލް

ބަޓަންތަކެވެ

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

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

މިސާލު ބަޓަންތަކެވެ

ބަޓަން ސްޓައިލްތައް ކޮންމެ އެއްޗަކަށް ވެސް .btnޖަހާލެވޭނެ އެވެ. އާންމުކޮށް މިކަންކަން ތަންފީޒު ކުރަން ބޭނުންވާނީ ހަމައެކަނި <a>, <button>, އަދި ސެލެކްޓް <input>އެލިމެންޓްތަކަށެވެ. މިއޮތީ ފެންނަ ގޮތް:

ބަދަލު ސައިޒްތައް ހެދުން

ފެންސީ ބޮޑެތި ނުވަތަ ކުދި ބަޓަންތަކެއް ހެއްޔެވެ؟ ހޭވް އެޓް އިޓް!

ނުކުޅެދުންތެރިކަން ހުންނަ ހާލަތެވެ

އެކްޓިވް ނުވާ ނުވަތަ އެއް ސަބަބަކާހުރެ ނުވަތަ އަނެއް ސަބަބަކާހުރެ އެޕް އިން ޑިސެބިލް ކޮށްފައިވާ ބަޓަންތަކަށް ޑިސެބިލް ސްޓޭޓް ބޭނުން ކުރާށެވެ. އެއީ .disabledލިންކްތަކަށް އަދި :disabledއެލިމެންޓްތަކަށްޓަކައެވެ <button>.

ލިންކްތައް

ބަޓަންތަކެވެ

އެއީ ކޮންކަމެއް

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

ކަސްޓަމައިޒް ކުރެވޭ

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

ޑްރޮޕްޑައުންސް ވެސް ހިމެނެ އެވެ

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

ޓެބްތަކާއި ގިތެޔޮ ގިތެޔޮ

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

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

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް
• ސެޓިންގސް
• ކޮންޓެކްޓް

<ul ކްލާސް = "ޓެބްސް" > 
  <li class = "އެކްޓިވް" ><a href = "#" > ގެ </a> </li>  
  <li><a href = "#" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#" > މެސެޖުތައް </a></li> 
  <li><a href = "#" > ސެޓިންގސް </a></li> 
  <li><a href = "#" > ގުޅުން </a></li> 
</ul> އެވެ

• ގެ
• ޕްރޮފައިލް
• މެސެޖުތައް
• ސެޓިންގސް
• ކޮންޓެކްޓް

<ul class = "ގިތެޔޮ" > 
  <li class = "އެކްޓިވް" ><a href = "#" > ގެ </a> </li>  
  <li><a href = "#" > ޕްރޮފައިލް </a></li> 
  <li><a href = "#" > މެސެޖުތައް </a></li> 
  <li><a href = "#" > ސެޓިންގސް </a></li> 
  <li><a href = "#" > ގުޅުން </a></li> 
</ul> އެވެ

ޕޭޖިނޭޝަން

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

<div ކްލާސް = "ޕޭޖިނޭޝަން" > 
  <ul> އެވެ
    <li class = "ކުރިން ނުކުޅެދިފައިވާ" ><a href = "#" > ← ކުރީގެ </a></li>  
    <li ކްލާސް = "އެކްޓިވް" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "ދެން" ><a href = "#" > ކުރިއަށް → </a></li> އެވެ  
  </ul> އެވެ
</div> އެވެ

އަސާސީ އެލާޓްތަކެވެ

div.alert-message

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

މެސެޖުތައް ބްލޮކް ކުރާށެވެ

div.alert-message.block-message

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

މޮޑަލްސް އެވެ

މޮޑަލްސް-ޑައިލޮގްސް ނުވަތަ ލައިޓްބޮކްސް- އަކީ ބެކްގްރައުންޑް ކޮންޓެކްސްޓް ބެލެހެއްޓުން މުހިންމު ހާލަތްތަކުގައި ކޮންޓެކްސްޗުއަލް އެކްޝަންތަކަށް ވަރަށް ރަނގަޅު އެއްޗެކެވެ.

ޓޫލް ޓިޕްސް

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

ޕޮޕޯވަރސް އެވެ

ލޭއައުޓަށް އަސަރު ނުކޮށް ޞަފްޙާއަކަށް ސަބްޓެކްސްޗުއަލް މަޢުލޫމާތު ފޯރުކޮށްދިނުމަށް ޕޮޕޯވަރސް ބޭނުން ކުރާށެވެ.

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

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

ބޭނުންކުރާނެ ގޮތް

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

<link rel = "ސްޓައިލްޝީޓް/މަދު" href = "މަދު/ބޫޓްސްޓްރެޕް.ލެސް" media = "ހުރިހާ" />    
<script src = "ޖޭއެސް/ލެސް-1.1.3.މިނިޓް.ޖޭއެސް" ></script> 

.js ގެ ހައްލު އިހުސާސް ނުކުރެވޭތަ؟ ކޯޑް ޑިޕްލޮއި ކުރާއިރު ކޮމްޕައިލް ކުރުމަށް ލެސް މެކް އެޕް ޓްރައިކޮށްލައްވާ ނުވަތަ Node.js ބޭނުން ކުރައްވާށެވެ.

ހިމެނޭ އެއްޗެއް

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

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

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

// ލިންކްތައް
@linkColor : #8b59c2؛         
@linkColorHover :     އަނދިރިވުން ( @linkColor , 10 ); 
 
// ގްރޭސް
@ކަޅު : #000؛             
@grayDark : އަލިކުރުން (           @black , 25 %)؛ 
@gray :               ލުއިކުރުން ( @black , 50 %)؛ 
@grayLight :          ލުއިކުރުން ( @ކަޅު , 70 %)؛ 
@grayLighter :        ލުއިކުރުން ( @black , 90 %)؛ 
@ދޮން : #fff ؛             
 
// އެކްސެންޓް ކުލަތައް
@ބްލޫ : #08b5fb ؛              
@ގްރީނ�� : #46a546 ؛             
@red : #9d261d؛               
@ރީނދޫ : #ffc40d ؛            
@އޮރެންޖް : #f89406 ؛            
@ޕިންކް : #c3325f ؛              
@ޕަރޕްލް : #7a43b6 ؛            
 
// ބޭސްލައިން ގްރިޑް
@ބޭސްފޮންޓް : 13px ;          
@ ބޭސްލައިން : 18px ;          

ކޮމެންޓް ކުރަމުންނެވެ

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

// މިއީ ކޮމެންޓެކެވެ
/* މިއީ ވެސް ކޮމެންޓެއް */

މިކްސިންސް އަޕް ދަ ވަޒޫ

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

ފޮންޓް ސްޓޭކްތައް

#ފޮންޓް {
  . ޝޯޓްހެންޑް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {     
    ފޮންޓް - ސައިޒް : @size ; 
    ފޮންޓް - ބަރުދަން : @ ބަރުދަން ; 
    ލައިން - އުސްމިން : @lineHeight ; 
  } .
  . sans - serif ( @ބަރުދަން : އާދައިގެ ، @ސައިޒް : 14px ، @lineHeight : 20px ) {     
    font - family : "ހެލްވެޓިކާ ނިއު" , ހެލްވެޓިކާ , އެރިއަލް , sans - serif ;   
    ފޮންޓް - ސައިޒް : @size ; 
    ފޮންޓް - ބަރުދަން : @ ބަރުދަން ; 
    ލައިން - އުސްމިން : @lineHeight ; 
  } .
  . serif ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {     
    font - family : "ޖޯޖިއާ" , ޓައިމްސް ނިއު ރޯމަން , ޓައިމްސް , sans - serif ;     
    ފޮންޓް - ސައިޒް : @size ; 
    ފޮންޓް - ބަރުދަން : @ ބަރުދަން ; 
    ލައިން - އުސްމިން : @lineHeight ; 
  } .
  . މޮނޮސްޕޭސް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 12px , @lineHeight : 20px ) {     
    font - family : "މޮނާކޯ" , ކުއަރިއަރ ނިއު , މޮނޮސްޕޭސް ;   
    ފޮންޓް - ސައިޒް : @size ; 
    ފޮންޓް - ބަރުދަން : @ ބަރުދަން ; 
    ލައިން - އުސްމިން : @lineHeight ; 
  } .
} .

ގްރޭޑިއަންޓްސް އެވެ

#ގްރޭޑިއަންޓް {
  . ހޮރައިޒޮންޓަލް ( @ސްޓާޓްކުލަ : #555، @އެންޑްކަލަރ: #333) { 
    ބެކްގްރައުންޑް - ކުލަ : @endColor ; 
    ބެކްގްރައުންޑް - ރިޕީޓް : ރިޕީޓް - x ;
    background - image : - khtml - gradient ( ލައިނަރ , ކަނާތު މަތީ , ވާތް މަތީ , އިން ( @startColor ), އަށް ( @endColor )); // ކޮންކުއަރ   
    ބެކްގްރައުންޑް - އިމޭޖް : - މޮޒް - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އެފްއެފް 3.6+    
    ބެކްގްރައުންޑް - އިމޭޖް : - ms - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އައިއީ10    
    ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ވާތް މަތީ , ކުލަ - ހުއްޓުވުން ( 0 %, @startColor ), ކުލަ - ހުއްޓުވުން ( 100 %, @endColor )); // ސަފާރީ 4+، ކްރޯމް 2+    
    ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // ސަފާރީ 5.1+، ކްރޯމް 10+    
    ބެކްގްރައުންޑް - އިމޭޖް : - o - ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // އޮޕެރާ 11.10    
    ބެކްގްރައުންޑް - އިމޭޖް : ލައިނަރ - ގްރޭޑިއަންޓް ( ކަނާތް , @startColor , @endColor ); // ލެ ސްޓޭންޑަރޑް   
  } .
  . ވަރުގަދަ ( @startColor : #555, @endColor: #333) { 
    ބެކްގްރައުންޑް - ކުލަ : @endColor ; 
    ބެކްގްރައުންޑް - ރިޕީޓް : ރިޕީޓް - x ;
    ބެކްގްރައުންޑް - އިމޭޖް : - khtml - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , އިން ( @startColor ), އަށް ( @endColor )); // ކޮންކުއަރ   
    ބެކްގްރައުންޑް - އިމޭޖް : - މޮޒް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އެފްއެފް 3.6+   
    ބެކްގްރައުންޑް - އިމޭޖް : - އެމްއެސް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އައިއީ10   
    ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , ކުލަ - ހުއްޓުވުން ( 0 %, @startColor ), ކުލަ - ހުއްޓުވުން ( 100 %, @endColor )); // ސަފާރީ 4+، ކްރޯމް 2+    
    ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސަފާރީ 5.1+، ކްރޯމް 10+   
    ބެކްގްރައުންޑް - އިމޭޖް : - o - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އޮޕެރާ 11.10   
    ބެކްގްރައުންޑް - އިމޭޖް : ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސްޓޭންޑަރޑް  
  } .
  . ޑިރެކްޝަނަލް ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  } .
  . ވަށައިގެން - ތިން - ކުލަ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  } .
} .

އޮޕަރޭޝަންސް އަދި ގްރިޑް ސިސްޓަމް

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

// ގްރިޑިޓިއުޑް
@gridކޮލަމްސް : 16 ;       
@gridކޮލަމްވިޑްތް : 40px ;   
@gridGutterވިޑްތް : 20px ;   
@siteWidth : ( @ގްރިޑްކޮލަމްސް * @ގްރިޑްކޮލަމްވިޑްތް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ގްރިޑްކޮލަމްސް - 1 ));                 
 
// ގްރިޑް ސިސްޓަމް
. ކޮންޓެއިނަރ { .
  ފުޅާމިން : @ސައިޓްވިޑްތް ; 
  މާރޖިން : 0 އޮޓޯ ;  
  . ކްލިއަރފިކްސް ();
} .
. ކޮލަމްސް ( @columnSpan : 1 ) {  
  width : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްސްޕަން ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްސްޕަން - 1 ));         
} .
. އޮފްސެޓް ( @columnOffset : 1 ) {  
  margin - left : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްއޮފްސެޓް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްއޮފްސެޓް - 1 )) + @extraSpace ;           
} .