މަތި
ވާތް
ކަނާތް
ތިރީގައި

ބޫޓްސްޓްރެޕް، ޓްވިޓާ އިންނެވެ

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

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

ސީއެސްއެސް އަށް ހޮޓްލިންކް ކޮށްލާށެވެ

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

ލެސް އާއި އެކު ބޭނުން ކުރާށެވެ

ލެސް ބޭނުން ކުރުމުގެ ފޭނެއް ހެއްޔެވެ؟ މައްސަލައެއް ނެތް، ހަމައެކަނި ރެޕޯ ކްލޯންކޮށް މި ލައިންތައް އިތުރުކޮށްލާށެވެ:

ގިޓްހަބްގައި ފޯކް ކޮށްލާށެވެ

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

ގިޓްހަބްގައި ބޫޓްސްޓްރެޕް ކުރުން »

މިވަގުތު v1.3.0 އެވެ

ތާރީޚް

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

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

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

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

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

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

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

އަވަހަށް ފެށޭ މިސާލުތައް

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

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

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

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

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

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

  1. <div ކްލާސް = "ރޯ" >
  2. <div ކްލާސް = "ސްޕަން6" >
  3. ...
  4. </div> އެވެ
  5. <div ކްލާސް = "ސްޕަން10" >
  6. ...
  7. </div> އެވެ
  8. </div> އެވެ
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3 އެވެ
1/3 އެވެ
1/3 އެވެ
1/3 އެވެ
2/3 އެވެ
4
6
6
8
8
5
11
16

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

4
8 އޮފްސެޓް 4
1/3 އޮފްސެޓް 2/3s
4 އޮފްސެޓް 4
4 އޮފްސެޓް 4
5 އޮފްސެޓް 3
5 އޮފްސެޓް 3
10 އޮފްސެޓް 6

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

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

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

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

އަމިއްލައަށް ގްރިޑް ރޯލް ކޮށްލާށެވެ

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

ގްރިޑްގެ އެތެރޭގައެވެ

ގްރިޑް ސިސްޓަމް ބަދަލުކުރުމަށް ބޭނުންވާ ވެރިއޭބަލްތައް މިވަގުތު ހުރިހާ އެއްޗެއް ދިރިއުޅެނީ variables.less.

ވެރިއޭބަލް އެވެ ޑިފޯލްޓް ވެލިއު ތަފްޞީލު
@gridColumns 16 ގްރިޑްގެ ތެރޭގައި ހުންނަ ކޮލަމްތަކުގެ އަދަދު
@gridColumnWidth 40ޕީއެކްސް އެވެ ގްރިޑްގެ ތެރޭގައިވާ ކޮންމެ ކޮލަމެއްގެ ފުޅާމިން
@gridGutterWidth 20ޕީއެކްސް އެވެ ކޮންމެ ކޮލަމެއްގެ މެދުގައިވާ ނެގެޓިވް ސްޕޭސް އެވެ
@siteWidth ހުރިހާ ކޮލަމްތަކާއި ގަޓަރުތަކުގެ ޖުމްލަ ގުނާފައިވުން އަޅުގަނޑުމެން ކޮންމެވެސް އަސާސީ މެޗެއް ބޭނުންކޮށްގެން ކޮލަމްތަކާއި ގަޓަރުތަކުގެ އަދަދު ގުނާ މިކްސިންގެ ފުޅާމިން .fixed-container()ސެޓްކުރަމެވެ.

މިހާރު ކަސްޓަމައިޒް ކުރަން

ގްރިޑް ބަދަލުކުރުމުގެ މާނައަކީ ތިން @grid-*ވެރިއޭބަލް ބަދަލުކޮށް ލެސް ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރުމެވެ.

ބޫޓްސްޓްރެޕް އަންނަނީ 24 ކޮލަމް އާއި ހަމައަށް ގްރިޑް ސިސްޓަމެއް ހެންޑްލް ކުރެވޭނެ ގޮތަށް ތައްޔާރުކޮށްފައި؛ the default is just 16. މިއީ 24 ކޮލަމްގެ ގްރިޑަކަށް ކަސްޓަމައިޒް ކޮށްފައި ތިބާގެ ގްރިޑް ވެރިއޭބަލްތައް ފެންނާނެ ގޮތެވެ.

  1. @gridކޮލަމްސް : 24 ;
  2. @gridކޮލަމްވިޑްތް : 20px ;
  3. @gridGutterވިޑްތް : 20px ;

އެއްފަހަރު ރީކޮމްޕައިލް ކޮށްލުމުން ސެޓް ވާނެ!

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

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

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

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

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

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

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

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

މުޅި ޓައިޕޮގްރަފިކް ގްރިޑް ބިނާވެފައިވަނީ އަޅުގަނޑުމެންގެ variables.less ފައިލްގައިވާ ދެ Less ވެރިއޭބަލްގެ މައްޗަށެވެ: @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
ފުރިހަމަ ނަން
[email protected]

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

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

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

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

<blockquote> <p> <small>

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

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

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

ޖޫލިއަސް ހިބަރޓް ޑރ
  1. <ބްލޮކްކޯޓް> އެވެ
  2. <p> ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް ޑަޕިބަސް ޕޮސުއެރެ ވެލިޓް އެލިކެޓް. </p> އެވެ
  3. <small> ޑރ.ޖޫލިއަސް ހިބަރޓް </small>
  4. </blockquote> އެވެ

ލިސްޓްތައް

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

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

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

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

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

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

ތަފްޞީލުdl

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

ކޯޑް

<code> <pre>

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

ކޯޑް ހުށަހެޅުން

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

އެއްޗެއްގެ ބައެއް ނަތީޖާ
<code> މިފަދަ ލިޔުމެއްގެ ސަފުހާއެއްގައި ތިބާގެ އޮޅާފައިވާ ކޯޑް މި <html>އެލިމެންޓް ފަދައިން ފެންނާނެއެވެ.
<pre>
<ޑިވް> އެވެ
  <h1>ސުރުޚީ</h1>
  <p>ކޮންމެވެސް ކަމެއް ހަމަ މިތާ...</p>
</div> އެވެ

ނޯޓް:<pre> ޓެގްތަކުގެ ތެރޭގައި ކޯޑް ވީހާވެސް ކަނާތްފަރާތާ ކައިރިއަށް ބެހެއްޓުން ޔަގީން ކުރައްވާ ؛ އެއީ ހުރިހާ ޓެބްތަކެއް ރެންޑަރ ކުރާނެ އެއްޗެކެވެ.

<pre class="prettyprint">

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

<div> <h1> ސުރުޚީ </h1> <p> ހަމަ މިތަނުގައި އެއްޗެއް... </p> </div>
  
  

google-code-prettify ޑައުންލޯޑްކޮށް ބޭނުންކުރާނެ ގޮތް ރީޑްމީ ބަލާށެވެ.

އިންލައިން ލޭބަލްތަކެވެ

<span class="label">

ހަށިގަނޑުގެ ލިޔުމުގައިވާ އެއްވެސް ޢިބާރާތަކަށް ސަމާލުކަން ގޮވާ ނުވަތަ ދިދަ ޖަހާށެވެ.

އެއްވެސް އެއްޗެއް ލޭބަލް ކުރާށެވެ

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

ލޭބަލް ނަތީޖާ
<span class="label">Default</span> ޑީފޯލްޓް
<span class="label success">New</span> އާ
<span class="label warning">Warning</span> އިންޒާރު
<span class="label important">Important</span> މުހިންމު
<span class="label notice">Notice</span> ނޯޓިސް

މީޑިއާ ގްރިޑް

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

މިސާލު ތަމްބްނެއިލްސް

ތަމްބްނެއިލްސް އިން ދަ .media-gridކޮންމެ ސައިޒެއްގެ ވެސް ވެދާނެ ނަމަވެސް އެއީ ސީދާ ބިލްޓް-އިން ބޫޓްސްޓްރެޕް ގްރިޑް ސިސްޓަމަށް މެޕް ކުރުމުން އެންމެ ރަނގަޅަށް މަސައްކަތް ކުރާ އެއްޗެކެވެ. 90، 210، އަދި 330 ފަދަ ތަސްވީރުގެ ފުޅާމިންތައް މަދު ޕިކްސެލްތަކެއްގެ ޕެޑިންގ އާއި ގުޅިގެން .span2, .span4, އަދި .span6ކޮލަމް ސައިޒްތަކާ އެއްވަރު ވެއެވެ.

ވަރަށް ބޮޑު

މީޑިއަމް

ކުޑަ

އެމީހުންނަށް ކޯޑް ކުރުން

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

  1. <ul class = "މީޑިއާ-ގްރިޑް" >
  2. <li> އެވެ
  3. <a href = "#" >
  4. <img class = "ތަމްބްނެއިލް" src = "https://placehold.it/330x230" alt = "" >
  5. </a> އެވެ
  6. </li> އެވެ
  7. <li> އެވެ
  8. <a href = "#" >
  9. <img class = "ތަމްބްނެއިލް" src = "https://placehold.it/330x230" alt = "" >
  10. </a> އެވެ
  11. </li> އެވެ
  12. </ul> އެވެ

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

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

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

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

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

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

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

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

މިސާލު: ކޮންޑެންސްޑް ޓޭބަލް

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

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

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

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

# ފުރަތަމަ ނަން ފަހު ނަން ބަސް
1 ބައެއް އެކެއް އިނގިރޭސި
2 ޖޯ އެވެ ސިކްސްޕެކް އެވެ އިނގިރޭސި
3 ސްޓޫ ޑެންޓް ކޯޑް
  1. <ޓޭބަލް ކްލާސް = "ބޯޑަރޑް-ޓޭބަލް" >
  2. ...
  3. </ޓޭބަލް> އެވެ

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

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

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

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

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

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

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

# ފުރަތަމަ ނަން ފަހު ނަން ބަސް
2 ޖޯ އެވެ ސިކްސްޕެކް އެވެ އިނގިރޭސި
3 ސްޓޫ ޑެންޓް ކޯޑް
1 ތިބާގެ އެކެއް އިނގިރޭސި
  1. <script src = "ޖޭއެސް/ޖޭކުއަރީ/ޖޭކިއުރީ.ޓޭބަލްސޯޓަރ.މިން.ޖޭއެސް" ></script>
  2. <ސްކްރިޕްޓް > އެވެ
  3. $ ( ފަންކްޝަން () {
  4. $ ( "ޓޭބަލް#ސޯޓްޓޭބަލްއެކްސްމްޕްލް" ). ޓޭބަލްސޯޓަރ ({ ސޯރޓްލިސްޓް : [[ 1 , 0 ]] });
  5. });
  6. </script> އެވެ
  7. <ޓޭބަލް ކްލާސް = "ޒީބްރާ-ސްޓްރައިޕްޑް" >
  8. ...
  9. </ޓޭބަލް> އެވެ

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

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

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

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

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

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

ފޯމް ފީލްޑް ސައިޒްތައް

ކޮންމެ ފޯމެއް input, select, ނުވަތަ textareaފުޅާމިނެއް ކަސްޓަމައިޒް ކުރާނީ މާކަޕް އަށް މަދު ކްލާސްތަކެއް އިތުރުކޮށްގެންނެވެ.

v1.3.0 އިން ފެށިގެން އަޅުގަނޑުމެން މިވަނީ ފޯމް އެލިމެންޓްތަކަށް ގްރިޑް ބެސްޓް ސައިޒިންގ ކްލާސްތައް އިތުރުކޮށްފައެވެ. މިހާރު ހުރި , , ފަދަ ކްލާސްތަކުގެ މައްޗަށް މިކަންކަން ބޭނުން ކުރައްވާށެވެ ..mini.small

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

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

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

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

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

       

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

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

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

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

ލިންކްތައް

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

 

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

.alert-message

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

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

×

މާތް ގުއަކަމޯލް! ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ނޮޓް ލޫކިންގ ޓޫ ގޯޑް .

×

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

×

ވަރަށް ފުރިހަމަ! މި އެލާޓް މެސެޖު ކާމިޔާބުކަމާއެކު ކިޔައިފިއެވެ .

×

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

މިސާލު ކޯޑެވެ

  1. <div class = "އެލާޓް-މެސެޖް އިންޒާރު" >
  2. <a class = "ބަންދުކުރުން" href = "#" > × </a>
  3. <p><strong> މާތް ގުއަކަމޯލް! </strong> ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް. </p> އެވެ
  4. </div> އެވެ

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

.alert-message.block-message

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

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

×

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

×

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

  • ޑޫއިސް މޮލިސް އެސްޓް ނޮން ކޮމޮޑޯ ލޫކްޓަސް
  • ނިސީ އެރަތު ޕޯޓިޓޯރ ލިގުލާ
  • އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް
×

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

×

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

މިސާލު ކޯޑެވެ

  1. <div class = "އެލާޓް-މެސެޖް ބްލޮކް-މެސެޖް އިންޒާރު" >
  2. <a class = "ބަންދުކުރުން" href = "#" > × </a>
  3. <p><strong> މާތް ގުއަކަމޯލް! މިއީ އިންޒާރެއް! </strong> ބެސްޓް ޗެކް ޔޯ ސެލްފް، ޔޫ އާ ލޫކިންގ ޓޫ ގޯޑް. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް. ޕްރެސެންޓް ކޮމޮޑޯ ކަރސަސް މެގްނާ، ވެލް ސެލެރިސްކް ނިސްލް ކޮންސެކްޓެޓަރ އެޓް. </p> އެވެ
  4. <div class = "އެލާޓް-އެކްޝަންސް" >
  5. <a class = "btn small" href = "#" > މި ފިޔަވަޅު އަޅާ </a> <a class = "btn small" href = "#" > ނުވަތަ މިކަން ކުރައްވާ </a>
  6. </div> އެވެ
  7. </div> އެވެ

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

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

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

ޓޫލްޓިޕްސް އެވެ

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

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

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

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

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

ޖާވާސްކްރިޕްޓް ހޯއްދަވާ »

ޕޮޕޯވަރ ޓައިޓަލް އެވެ

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

ފަށަންވީ ގޮތް

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

ޖާވާސްކްރިޕްޓް ޑޮކްސް ބަލާ »

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

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

ފައިލް ތަފްޞީލު
ބޫޓްސްޓްރެޕް-މޮޑަލް.ޖޭއެސް އެވެ އަޅުގަނޑުމެންގެ މޮޑަލް ޕްލަގިން އަކީ ސަގާފީ މޮޑަލް ޖޭއެސް ޕްލަގިން އަށް ސުޕަ ސްލިމް ޓޭކެއް! އަޅުގަނޑުމެން ޚާއްޞަ ފަރުވާތެރިކަމެއް ކުރީ ޓްވިޓަރގައި އަޅުގަނޑުމެން ބޭނުންވާ ހަމައެކަނި ހުސް ފަންކްޝަނަލިޓީ ހިމަނައިދިނުމަށެވެ.
ބޫޓްސްޓްރެޕް-އެލާޓްސް.ޖޭއެސް އެވެ އެލާޓް ޕްލަގިން އަކީ އެލާޓްތަކަށް ކްލޯސް ފަންކްޝަނަލިޓީ އިތުރުކުރުމަށް ބޭނުންކުރާ ސުޕަ ޓައިނީ ކްލާހެކެވެ.
ބޫޓްސްޓްރެޕް-ޑްރޮޕްޑައުން.ޖޭއެސް އެވެ މި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާރ ނުވަތަ ޓެބްޑް ނެވިގޭޝަންތަކަށް ޑްރޮޕްޑައުން އިންޓަރެކްޝަން އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ.
ބޫޓްސްޓްރެޕް-ސްކްރޯލްސްޕީ.ޖޭއެސް އެވެ ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާއަށް ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޯ އަޕްޑޭޓިން ނެވް އެއް އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ.
ބޫޓްސްޓްރެޕް-ބަޓަންސް.ޖޭއެސް އެވެ ސްކްރޯލްސްޕައި ޕްލަގިން އަކީ ބޫޓްސްޓްރެޕް ޓޮޕްބާއަށް ސްކްރޯލް ޕޮޒިޝަނަށް ބަލައިގެން އޮޓޯ އަޕްޑޭޓިން ނެވް އެއް އިތުރުކުރުމަށް ބޭނުންކުރާ ޕްލަގިންއެކެވެ.
ބޫޓްސްޓްރެޕް-ޓެބްސް.ޖޭއެސް އެވެ މި ޕްލަގިން އިން ލޯކަލް ކޮންޓެންޓް މެދުވެރިކޮށް ސައިކަލް ކުރުމަށް އަވަސް، ޑައިނަމިކް ޓެބް އަދި ޕިލް ފަންކްޝަނަލިޓީ އިތުރުކޮށްދެއެވެ.
ބޫޓްސްޓްރެޕް-ޓްވިޕްސީ.ޖޭއެސް އެވެ ޖޭސަން ފްރޭމް ލިޔެފައިވާ މޮޅު jQuery.tipsy ޕްލަގިންގެ މައްޗަށް ބިނާކޮށް؛ twipsy އަކީ އަޕްޑޭޓް ކުރެވިފައިވާ ވަރޝަނެއް ކަމަށާއި، މިއީ ތަސްވީރުތަކަށް ބަރޯސާ ނުވާ، އެނިމޭޝަންތަކަށް css3 ބޭނުންކުރާ، އަދި ލޯކަލް ޓައިޓަލް ސްޓޯރޭޖަށް ޑޭޓާ-އެޓްރިބިއުޓްސް ބޭނުންކުރާ ވަރޝަނެކެވެ!
ބޫޓްސްޓްރެޕް-ޕޮޕޯވަރ.ޖޭއެސް އެވެ ޕޮޕޯވަރ ޕްލަގިން އިން ތިބާގެ އެޕްލިކޭޝަނަށް ޕޮޕޯވަރސް އިތުރުކުރުމަށް ފަސޭހަ އިންޓަރފޭސްއެއް ލިބިގެންދެއެވެ. އެއީ boostrap-twipsy.js ޕްލަގިން ފުޅާކޮށްދޭ އެއްޗެއް ކަމުން ޕްރޮޖެކްޓްގައި ޕޮޕޯވަރސް ހިމަނާއިރު އެ ފައިލް ވެސް ހިފެހެއްޓުން ޔަގީން ކުރައްވާށެވެ!

ޖާވާސްކްރިޕްޓް ކޮންމެހެން ބޭނުންވޭ ހެއްޔެވެ؟

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. // ލިންކްތައް
  2. @linkColor : #8b59c2؛
  3. @linkColorHover : އަނދިރިވުން ( @linkColor , 10 );
  4.  
  5. // ގްރޭސް
  6. @ކަޅު : #000؛
  7. @grayDark : އަލިކުރުން ( @black , 25 %)؛
  8. @gray : ލުއިކުރުން ( @black , 50 %)؛
  9. @grayLight : ލުއިކުރުން ( @ކަޅު , 70 %)؛
  10. @grayLighter : ލުއިކުރުން ( @black , 90 %)؛
  11. @ދޮން : #fff ؛
  12.  
  13. // އެކްސެންޓް ކުލަތައް
  14. @ބްލޫ : #08b5fb ؛
  15. @ގްރީން : #46a546 ؛
  16. @red : #9d261d؛
  17. @ރީނދޫ : #ffc40d ؛
  18. @އޮރެންޖް : #f89406 ؛
  19. @ޕިންކް : #c3325f ؛
  20. @ޕަރޕްލް : #7a43b6 ؛
  21.  
  22. // ބޭސްލައިން ގްރިޑް
  23. @ބޭސްފޮންޓް : 13px ;
  24. @ ބޭސްލައިން : 18px ;

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

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

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

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

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

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

  1. #ފޮންޓް {
  2. . ޝޯޓްހެންޑް ( @ބަރުދަން : އާދައިގެ , @ސައިޒް : 14px , @lineHeight : 20px ) {
  3. ފޮންޓް - ސައިޒް : @size ;
  4. ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
  5. ލައިން - އުސްމިން : @lineHeight ;
  6. } .
  7. . sans - serif ( @ބަރުދަން : އާދައިގެ ، @ސައިޒް : 14px ، @lineHeight : 20px ) {
  8. font - family : "ހެލްވެޓިކާ ނިއު" , ހެލްވެޓިކާ , އެރިއަލް , sans - serif ;
  9. ފޮންޓް - ސައިޒް : @size ;
  10. ފޮންޓް - ބަރުދަން : @ ބަރުދަން ;
  11. ލައިން - އުސްމިން : @lineHeight ;
  12. } .
  13. ...
  14. } .

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

  1. #ގްރޭޑިއަންޓް {
  2. ...
  3. . ވަރުގަދަ ( @startColor : #555, @endColor: #333) {
  4. ބެކްގްރައުންޑް - ކުލަ : @endColor ;
  5. ބެކްގްރައުންޑް - ރިޕީޓް : ރިޕީޓް - x ;
  6. ބެކްގްރައުންޑް - އިމޭޖް : - khtml - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , އިން ( @startColor ), އަށް ( @endColor )); // ކޮންކުއަރ
  7. ބެކްގްރައުންޑް - އިމޭޖް : - މޮޒް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އެފްއެފް 3.6+
  8. ބެކްގްރައުންޑް - އިމޭޖް : - އެމްއެސް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އައިއީ10
  9. ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ގްރޭޑިއަންޓް ( ލައިނަރ , ކަނާތު މަތީ , ކަނާތު ތިރީ , ކުލަ - ހުއްޓުވުން ( 0 %, @startColor ), ކުލަ - ހުއްޓުވުން ( 100 %, @endColor )); // ސަފާރީ 4+، ކްރޯމް 2+
  10. ބެކްގްރައުންޑް - އިމޭޖް : - ވެބްކިޓް - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސަފާރީ 5.1+، ކްރޯމް 10+
  11. ބެކްގްރައުންޑް - އިމޭޖް : - o - ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // އޮޕެރާ 11.10
  12. ބެކްގްރައުންޑް - އިމޭޖް : ލައިނަރ - ގްރޭޑިއަންޓް ( @startColor , @endColor ); // ސްޓޭންޑަރޑް
  13. } .
  14. ...
  15. } .

އޮޕަރޭޝަންސް

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

  1. // ގްރިޑިޓިއުޑް
  2. @gridކޮލަމްސް : 16 ;
  3. @gridކޮލަމްވިޑްތް : 40px ;
  4. @gridGutterވިޑްތް : 20px ;
  5. @siteWidth : ( @ގްރިޑްކޮލަމްސް * @ގްރިޑްކޮލަމްވިޑްތް ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ގްރިޑްކޮލަމްސް - 1 ));
  6.  
  7. // ބައެއް ކޮލަމްތައް ހަދާށެވެ
  8. . ކޮލަމްސް ( @columnSpan : 1 ) {
  9. width : ( @ގްރިޑްކޮލަމްވިޑްތް * @ކޮލަމްސްޕަން ) + ( @ގްރިޑްގަޓަރވިޑްތް * ( @ކޮލަމްސްޕަން - 1 ));
  10. } .

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

.less/lib/ ގައިވާ ފައިލްތައް ބަދަލުކުރުމަށްފަހު ، bootstrap-*.*.*.css އަދި bootstrap-*.*.*.min.css ފައިލްތައް އަލުން އުފެއްދުމަށްޓަކައި އެ ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރަން ޖެހޭނެއެވެ. ގިޓްހަބަށް ޕުލް ރިކުއެސްޓެއް ހުށަހަޅަމުންދާނަމަ އަބަދުވެސް އަލުން ކޮމްޕައިލް ކުރަން ޖެހެއެވެ.

ކޮމްޕައިލް ކުރެވޭނެ ގޮތްތައް

ގޮތް ފިޔަވަޅުތައް
މޭކްފައިލް އާއި އެކު ނޯޑް

ތިރީގައިވާ ކޮމާންޑް ހިންގައިގެން npm އާއެކު less ކޮމާންޑް ލައިން ކޮމްޕައިލަރ އިންސްޓޯލް ކުރާށެވެ.

$ npm އިންސްޓޯލް ކުރުން lessc

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

މީގެ އިތުރުން watchr އިންސްޓޯލްކޮށްފައި އޮތްނަމަ، make watchbootstrap lib ގައި ފައިލްއެއް އެޑިޓް ކުރާ ކޮންމެ ފަހަރަކު bootstrap އޮޓޮމެޓިކުން ރީބިލްޓް ކުރުމަށް ދުއްވައިލެވިދާނެ (މިއީ ކޮންމެހެން ކުރަންޖެހޭ ކަމެއް ނޫން، ހަމައެކަނި ފަސޭހަ ގޮތެކެވެ).

ޖާވާސްކްރިޕްޓް

އެންމެ ފަހުގެ Less.js ޑައުންލޯޑްކޮށް އެއަށް ދާނެ މަގު (އަދި Bootstrap) ގައި ހިމަނާށެވެ head.

  1. <link rel = "ސްޓައިލްޝީޓް/ލެސް" href = "/މަގު/އަށް/ބޫޓްސްޓްރެޕް.ލެސް" >
  2. <script src = "/މަގު/އަށް/ލެސް.ޖޭއެސް" ></script>

.less ފައިލްތައް އަލުން ކޮމްޕައިލް ކުރުމަށްޓަކައި ހަމައެކަނި ސޭވްކޮށް ޕޭޖް އަލުން ލޯޑް ކޮށްލާށެވެ. Less.js އިން އެތަކެތި ކޮމްޕައިލްކޮށް ލޯކަލް ސްޓޯރޭޖްގައި ރައްކާކުރެއެވެ.

ކޮމާންޑް ލައިން

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

$ lessc ./lib/bootstrap.less > ބޫޓްސްޓްރެޕް.ސީއެސްއެސް

--compressބައެއް ބައިޓްތައް ސޭވް ކުރަން އުޅޭނަމަ އެ ކޮމާންޑުގައި ހިމަނަން ޔަގީން ކުރައްވާ !

މަދު މެކް އެޕް

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

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