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

ބޭސް ސީއެސްއެސް

ފަންޑަމަންޓަލް އެޗްޓީއެމްއެލް އެލިމެންޓްސް ސްޓައިލްކޮށް އެކްސްޓެންސިބަލް ކްލާސްތަކާއެކު އިތުރުކޮށްފައި.

ޓައިޕޮގްރަފީ އެވެ

ސުރުޚީތައް

ހުރިހާ އެޗްޓީއެމްއެލް ހެޑިންގްސް، <h1>މެދުވެރިކޮށް <h6>ލިބެން ހުރެއެވެ.

ހ1. ސުރުޚީ 1

ހ2. ސުރުޚީ 2

ހ3. ސުރުޚީ 3

ހ4. ސުރުޚީ 4

ހ5. ސުރުޚީ 5
ހ6. ސުރުޚީ 6

ބޮޑީ ކޮޕީ

ބޫޓްސްޓްރެޕްގެ ގްލޯބަލް ޑިފޯލްޓަކީ font-size14px , with a line-heightof 20px . މިކަން ތަންފީޒު ކުރެވެނީ <body>އަދި ހުރިހާ ޕެރެގްރާފަކަށެވެ. މީގެ އިތުރުން <p>(ޕެރެގްރާފްތަކަށް) ލިބެނީ އެމީހުންގެ ލައިން-ހައިޓްގެ ދެބައިކުޅަ އެއްބައި (ޑިފޯލްޓްކޮށް 10px) ގެ ތިރީ މާރޖިންއެކެވެ.

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

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

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

<p> ... </p> އެވެ

ލީޑް ބޮޑީ ކޮޕީ

އިތުރުކޮށްގެން ޕެރެގްރާފެއް ވަކިން ފާހަގަކޮށްލާށެވެ .lead.

ވިވަމަސް ސެޖިޓިސް ލެކަސް ވެލް އޮގް ލައޯރީޓް ރޫޓްރަމް ފޯސިބަސް ޑޮލޯރ އޮކްޓަރ. ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލަކްޓަސް އެވެ.

<p ކްލާސް = "ލީޑް" > ... </p>

ބިލްޑް ވިތް ލެސް

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

ފާހަގަކުރެވިފައި

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

<small>

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

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

<p> <small> މި ލިޔުމުގެ ސަފުހާއަކީ ފައިން ޕްރިންޓްގެ ގޮތުގައި ބެލުމަށް ނިންމާފައިވާ ސަފުހާއެކެވެ. </small> </p> އެވެ

ބޯލްޑް

ފޮންޓް-ވޭޓް އަށް ވުރެ ބަރު ލިޔުމެއްގެ ސްނިޕެޓަކަށް ބާރުއެޅުމަށްޓަކައި.

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

<strong> ބޮލްޑް ޓެކްސްޓެއްގެ ގޮތުގައި ރެންޑަރ ކުރެވިފައިވާ </strong>

އިޓަލިކްސް އެވެ

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

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

<em> އިޓަލިކްސް ކޮށްފައިވާ ލިޔުމެއްގެ ގޮތުގައި ރެންޑަރ ކުރެވިފައިވާ </em>

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

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

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

ކަނާތްފަރާތަށް އެއްވަރުކޮށްފައިވާ ލިޔުން.

ސެންޓަރ އެލައިންޑް ޓެކްސްޓް.

ކަނާތްފަރާތަށް އެއްވަރުކޮށްފައިވާ ލިޔުން.

  1. <p class = "text-left" > ކަނާތްފަރާތަށް އެއްވަރުކޮށްފައިވާ ލިޔުން. </p> އެވެ 
  2. <p class = "text-center" > ސެންޓަރ އެލައިންޑް ޓެކްސްޓް. </p> އެވެ 
  3. <p class = "text-right" > ކަނާތްފަރާތަށް އެއްވަރުކޮށްފައިވާ ލިޔުން. </p> އެވެ

ބާރުއަޅާ ކްލާސްތަކެވެ

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

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

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

ޑޮނެކް އުލަމްކޯޕަރ ނޫލާ ނޮން މެޓަސް އޮކްޓަރ ފްރިންޖިލާ.

އެނިއަން އީއު ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް އެވެ.

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

  1. <p class = "muted" > ފުސްސޭ ޑަޕިބަސް، ޓެލަސް އެސީ ކަރސަސް ކޮމޮޑޯ، ޓޯރޓޯރ މައުރިސް ނިބް. </p> އެވެ 
  2. <p class = "ޓެކްސްޓް-އިންޒާރު" > އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މެގްނާ މޮލިސް ޔޫސްމޮޑް. </p> އެވެ 
  3. <p class = "text-error" > ޑޮނެކް އުލަމްކޯޕަރ ނޫލާ ނޮން މެޓަސް އޮކްޓަރ ފްރިންޖިލާ. </p> އެވެ 
  4. <p class = "ޓެކްސްޓް-އިންފޯ" > އެނިއަން އީޔޫ ލިއޯ ކުއަމް. ޕެލެންޓެސްކް އޯނަރ ސެމް ލެސިނިއާ ކުއަމް ވެނެނެޓިސް އެވެ. </p> އެވެ 
  5. <p class = "ޓެކްސްޓް-ސަކްސެސް" > ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލުކްޓަސް، ނިސީ އެރަޓް ޕޯޓިޓޯރ ލިގުލާ. </p> އެވެ

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

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

<abbr>

ކުރުކުރުމެއްގެ ދިގު ހޯވަރެއްގައި ފުޅާކޮށްފައިވާ ލިޔުމަކަށްޓަކައި، titleއެޓްރިބިއުޓް ހިމަނާށެވެ.

އެޓްރިބިއުޓް މި ލަފުޒުގެ ކުރުކޮށް ލިޔެފައިވާ ލިޔުމަކީ attr އެވެ.

<abbr title = "އެޓްރިބިއުޓް" > އެޓްރ </abbr>

<abbr class="initialism">

.initialismތަންކޮޅެއް ކުޑަ ފޮންޓް-ސައިޒަކަށް ކުރުކުރުމަކަށް އިތުރުކޮށްލާށެވެ .

އެޗްޓީއެމްއެލް އަކީ ރޮށި ކޮށާފައި ހުންނަ ފަހުން އެންމެ ރަނގަޅު އެއްޗެކެވެ.

<abbr title = "ހައިޕަރޓެކްސްޓް މާކަޕް ލޭންގުއޭޖް" class = "އިނިޝިއަލިޒަމް" > އެޗްޓީއެމްއެލް </abbr>

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

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

<address>

އިން ހުރިހާ ލައިންތަކެއް ނިންމާލައިގެން ފޯމެޓިންގ ރައްކާތެރިކުރުން <br>.

ޓްވިޓަރ، އިންކް
795 ފޯލްސަމް އެވޭ، ސުއިޓް 600
ސެން ފްރެންސިސްކޯ، ސީއޭ 94107
ޕީ: (123) 456-7890
ފުރިހަމަ ނަން
[email protected] 
  1. <އެޑްރެސް> އެވެ
  2.   <strong> ޓްވިޓަރ، އިންކް </strong><br>
  3.   795 ފޯލްސަމް އެވޭ، ސުއިޓް 600 <br>
  4.   ސެން ފްރެންސިސްކޯ، ސީއޭ 94107 <br>
  5.   <abbr title = "ފޯނު" > ސ : </abbr> (123) 456-7890 
  6. </އެޑްރެސް> އެވެ
  7.  
  8. <އެޑްރެސް> އެވެ
  9.   <strong> ފުރިހަމަ ނަން </strong><br>
  10.   <a href = "mailto:#" > ފުރަތަމަ.އެންމެ ފަހުން@މިސާލު.ކޮމް </a> 
  11. </އެޑްރެސް> އެވެ

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

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

ޑިފޯލްޓް ބްލޮކްކޯޓް

<blockquote>ކޯޓްގެ ގޮތުގައި ކޮންމެ އެޗްޓީއެމްއެލްއެއްގެ ވަށައިގެން އޮޅާލާށެވެ . ސީދާ ކޯޓްތަކަށް އަޅުގަނޑުމެން ލަފާދެނީ އެއް <p>.

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

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

ބްލޮކްކޯޓް އޮޕްޝަންސް

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

މަސްދަރަކަށް ނަން ކިޔުން

<small>މަސްދަރު ދެނެގަތުމަށް ޓެގް އިތުރުކުރުން . ސޯސް ވޯކްގެ ނަން އޮޅާލާށެވެ <cite>.

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

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

ބަދަލު ޑިސްޕްލޭތައް ހެދުން

.pull-rightފްލޯޓް ކުރެވިފައިވާ، ކަނާތްފަރާތަށް އެލައިން ކުރެވިފައިވާ ބްލޮކްކޯޓަކަށް ބޭނުން ކުރާށެވެ .

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

ސޯސް ޓައިޓަލްގައި މަޝްހޫރު މީހެކެވެ 
  1. <blockquote class = "ދަމާ-ކަނާތް" > 
  2.   ...
  3. </blockquote> އެވެ

ލިސްޓްތައް

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

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

  • ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
  • ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
  • އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
  • ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
  • ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
    • ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
    • ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
    • ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
    • އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
  • ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
  • އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
  • އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް
  1. <ul> އެވެ
  2.   <li> ... </li> އެވެ
  3. </ul> އެވެ

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

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

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

ސްޓައިލް ނުކުރެވިގެންނެވެ

list-styleލިސްޓް އައިޓަމްތަކުގައި ހުންނަ ޑިފޯލްޓް އަދި ލެފްޓް ޕެޑިންގ ނައްތާލާ (ވަގުތީ ކުދިންނަށް އެކަނި).

  • ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް
  • ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް
  • އިންޓިޖަރ މޮލެސްޓީ ލޮރެމް އެޓް މަސާ
  • ފެސިލިސިސް އިން ޕްރީޓިއަމް ނިސްލް އެލިކެޓް
  • ނޫއްލާ ވޮލޫޓްޕަޓް އަލިކުއަމް ވެލިޓް
    • ފޭސެލަސް އިއަކުލިސް ނެކޭ އެވެ
    • ޕޫރަސް ސޮޑަލްސް އަލްޓްރިސީސް އެވެ
    • ވެސްޓިބިއުލަމް ލައޯރީޓް ޕޯޓިޓޯރ ސެމް
    • އެކް ޓްރިސްޓިކް ލިބަރޯ ވޮލޫޓްޕަޓް އެޓް
  • ފައުސިބަސް ޕޯޓާ ލެކަސް ފްރިންޖިލާ ވެލް
  • އެނިއަން ސިޓް އަމެޓް އެރަޓް ނަންކް
  • އެގޭޓް ޕޯޓިޓޯރ ލޮރެމް
  1. <ul ކްލާސް = "އަންސްޓައިލްޑް" > 
  2.   <li> ... </li> އެވެ
  3. </ul> އެވެ

އިންލައިން

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

  • ލޮރެމް އިޕްސަމް އެވެ
  • ފޭސެލަސް އިއަކުލިސް އެވެ
  • ނޫއްލާ ވޮލޫޓްޕަޓް
  1. <ul ކްލާސް = "އިންލައިން" > 
  2.   <li> ... </li> އެވެ
  3. </ul> އެވެ

ތަފްޞީލު

އެ ޝަރުޠުތަކާ ގުޅުންހުރި ސިފަތަކާއެކު ޝަރުޠުތަކުގެ ލިސްޓެއް.

ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ
ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.
ޔޫއިސްމޮޑް އެވެ
ވެސްޓިބިއުލަމް އައިޑީ ލިގުލާ ޕޯޓާ ފެލިސް ޔޫއިސްމޮޑް ސެމްޕަރ އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް.
ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް.
މަލެސުއަދާ ޕޯޓާ އެވެ
އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް. 
  1. <dl> އެވެ
  2.   <dt> ... </dt> އެވެ
  3.   <dd> ... </dd> އެވެ
  4. </dl> އެވެ

ހޮރައިޒޮންޓަލް ޑިސްކްރިޕްޝަން

ޝަރުޠުތަކާއި ސިފަތައް <dl>އެއްފަރާތަކަށް ޖެހިގެން ލައިން އަޕްގައި ހަދާށެވެ.

ޑިސްކްރިޕްޝަން ލިސްޓްތަކެވެ
ޑިސްކްރިޕްޝަން ލިސްޓަކީ ޝަރުތުތައް މާނަކުރުމަށް ފުރިހަމަ ލިސްޓެކެވެ.
ޔޫއިސްމޮޑް އެވެ
ވެސްޓިބިއުލަމް އައިޑީ ލިގުލާ ޕޯޓާ ފެލިސް ޔޫއިސްމޮޑް ސެމްޕަރ އެގޭޓް ލެސިނިއާ އޮޑިއޯ ސެމް ނެކް އެލިޓް.
ޑޮނެކް އައިޑީ އެލިޓް ނޮން މީ ޕޯޓާ ގްރެވިޑާ އެޓް އެގޭޓް މެޓަސް.
މަލެސުއަދާ ޕޯޓާ އެވެ
އެޓިއަމް ޕޯޓާ ސެމް މަލެސުއާޑާ މަގްނާ މޮލިސް ޔޫސްމޮޑް.
ފެލިސް ޔޫސްމޮޑް ސެމްޕަރ އެގޭޓް ލެސިނިއާ އެވެ
ފުސް ޑަޕިބަސް، ޓެލަސް އެކް ކަރސަސް ކޮމޮޑޯ، ޓޯރޓޯރ މައުރިސް ކޮންޑިމެންޓަމް ނިބް، އުޓް ފަރމަންޓަމް މަސާ ޖަސްޓޯ ސިޓް އަމެޓް ރިސަސް. 
  1. <dl ކްލާސް = "ޑީއެލް-ހޮރިޒޮންޓަލް" > 
  2.   <dt> ... </dt> އެވެ
  3.   <dd> ... </dd> އެވެ
  4. </dl> އެވެ

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

ކޯޑް

އިންލައިން

ކޯޑްގެ އިންލައިން ސްނިޕެޓްތައް <code>.

މިސާލަކަށް <section>އިންލައިންގެ ގޮތުގައި އޮޅާލަން ޖެހެއެވެ. 
  1. މިސާލަކަށް < code > & lt ; section & gt ;</ code > އިންލައިން ގެ ގޮތުގައި އޮޅާލަން ޖެހެއެވެ .

އަސާސީ ބްލޮކް

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

<p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>
  1. <ޕްރީ> އެވެ
  2.   <p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>
  3. </pre> އެވެ

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

.pre-scrollable350px ގެ މެކްސް-ހައިޓް ސެޓްކޮށް ވައި-އެކްސިސް ސްކްރޯލްބާރ އެއް ފޯރުކޮށްދޭނެ ކްލާސް އިޚްތިޔާރީ ގޮތެއްގައި އިތުރުކުރެވިދާނެއެވެ .

މޭޒުތަކެވެ

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

އަސާސީ ސްޓައިލިންގ އަށް- ލައިޓް ޕެޑިންގ އަދި ހަމައެކަނި ހޮރައިޒޮންޓަލް ޑިވައިޑަރސް އަށް- .tableކޮންމެ <table>.

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ 
  1. <ޓޭބަލް ކްލާސް = "ޓޭބަލް" > 
  2.   ...
  3. </ޓޭބަލް> އެވެ

އިޚްތިޔާރީ ކްލާސްތަކެވެ

ތިރީގައިވާ އެއްވެސް .tableކްލާހެއް ބޭސް ކްލާހަށް އިތުރުކުރުން.

.table-striped

<tbody>ވިއާ ސީއެސްއެސް ސެލެކްޓަރ ގެ ތެރޭގައިވާ ކޮންމެ ޓޭބަލް ރޯއަކަށް ޒީބްރާ-ސްޓްރައިޕިންގ އިތުރުކުރެއެވެ :nth-child(އައިއީ7-8 ގައި ނުލިބޭ).

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ 
  1. <ޓޭބަލް ކްލާސް = "ޓޭބަލް ޓޭބަލް-ސްޓްރައިޕްޑް" > 
  2.   ...
  3. </ޓޭބަލް> އެވެ

.table-bordered

މޭޒުމައްޗަށް ބޯޑަރުތަކާއި ވަށައިގެންވާ ކޮޅުތައް އަޅާށެވެ.

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
މާކިން އެވެ އޮޓޯ އެވެ @ގެޓްބޫޓްސްޓްރެޕް އެވެ
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ 
  1. <ޓޭބަލް ކްލާސް = "ޓޭބަލް-ބޯޑަރޑް" > 
  2.   ...
  3. </ޓޭބަލް> އެވެ

.table-hover

ގެ ތެރޭގައި ހުންނަ ޓޭބަލް ރޯތަކުގައި ހޯވަރ ސްޓޭޓެއް އެނެބަލް ކުރުން <tbody>.

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ 
  1. <ޓޭބަލް ކްލާސް = "ޓޭބަލް-ހޯވަރ" > 
  2.   ...
  3. </ޓޭބަލް> އެވެ

.table-condensed

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

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލެރީ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ 
  1. <ޓޭބަލް ކްލާސް = "ޓޭބަލް ޓޭބަލް-ކޮންޑެންސްޑް" > 
  2.   ...
  3. </ޓޭބަލް> އެވެ

އިޚްތިޔާރީ ރޯ ކްލާސްތަކެވެ

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

ކްލާސް ތަފްޞީލު
.success ކާމިޔާބު ނުވަތަ ހެޔޮ ޢަމަލެއް ހިންގިކަން އަންގައިދެއެވެ.
.error ނުރައްކާތެރި ނުވަތަ ނޭދެވޭ ޢަމަލެއް ހިންގިދާނެކަން އަންގައިދެއެވެ.
.warning ސަމާލުކަން ދޭން ޖެހިދާނެ އިންޒާރެއް އިޝާރާތް ކުރެއެވެ.
.info ޑިފޯލްޓް ސްޓައިލްތަކަށް ބަދަލެއްގެ ގޮތުގައި ބޭނުންކުރެއެވެ.
# މުދާ ޕޭމަންޓް ނަގާފައި ޙާލަތު
1 ޓީބީ - މަހުން މަހަށް 01/04/2012 ވަނަ ދުވަހުއެވެ ހުއްދަލިބިފައިވުން
2 ޓީބީ - މަހުން މަހަށް 02/04/2012 ވަނަ ދުވަހުއެވެ އިންކާރު ކޮށްފި އެވެ
3 ޓީބީ - މަހުން މަހަށް 03/04/2012 ވަނަ ދުވަހުއެވެ ނުނިމި
4 ޓީބީ - މަހުން މަހަށް 04/04/2012 ވަނަ ދުވަހުއެވެ ކޮންފަރމް ކުރުމަށް ގުޅާލާށެވެ 
  1. ...
  2.   < tr class = "ކާމިޔާބު" >
  3.     <td> 1 < /td> އެވެ
  4.     <td>ޓީބީ - މަހުން މަހަށް</ td >
  5.     <td> 01 / 04 / 2012 < /td> ގައި ލިޔެފައިވެއެވެ
  6.     <td>ފާސްކޮށްފައި</ td >
  7.   </ tr > އެވެ
  8. ...

ސަޕޯޓް ކުރެވޭ ޓޭބަލް މާކަޕް

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

ޓެގް ތަފްޞީލު
<table> ޓޭބަލް ފޯމެޓެއްގައި ޑޭޓާ ދައްކާލުމަށްޓަކައި ރެޕިންގ އެލިމެންޓް
<thead> <tr>ޓޭބަލް ކޮލަމްތަކަށް ލޭބަލް ކުރުމަށް ޓޭބަލް ހެޑަރ ރޯސް ( ) އަށް ކޮންޓެއިނަރ އެލިމެންޓް
<tbody> <tr>ތާވަލުގެ ހަށިގަނޑުގައިވާ ތާވަލު ރޯތަކަށް ( ) ކޮންޓެއިނަރ އެލިމެންޓް
<tr> އެއް ރޯއެއްގައި ފެންނަ ޓޭބަލް ސެލްތަކުގެ ސެޓަކަށް ( <td>ނުވަތަ ) ކޮންޓެއިނަރ އެލިމެންޓް<th>
<td> ޑިފޯލްޓް ޓޭބަލް ސެލް
<th> ކޮލަމް (ނުވަތަ ރޯ، ސްކޯޕް އަދި ޕްލޭސްމަންޓަށް ބަލާފައި) ލޭބަލްތަކަށް ޚާއްޞަ ޓޭބަލް ސެލް
<caption> ޚާއްޞަކޮށް ސްކްރީން ރީޑަރުންނަށް ބޭނުންތެރި ތާވަލުގައި ހިމެނޭ އެއްޗެއްގެ ބަޔާން ނުވަތަ ޚުލާޞާ 
  1. <މޭޒު> އެވެ
  2.   <ކެޕްޝަން> ... </ކެޕްޝަން> އެވެ
  3.   <ބޮލުގައި> އެވެ
  4.     <tr> އެވެ
  5.       <ތް> ... </th> އެވެ
  6.       <ތް> ... </th> އެވެ
  7.     </tr> އެވެ
  8.   </thead> އެވެ
  9.   <ޓްބޮޑީ> އެވެ
  10.     <tr> އެވެ
  11.       <td> ... </td> އެވެ
  12.       <td> ... </td> އެވެ
  13.     </tr> އެވެ
  14.   </tބޮޑީ> އެވެ
  15. </ޓޭބަލް> އެވެ

ފޯމުތައް

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

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

ލެޖެންޑް މިސާލު ބްލޮކް-ލެވެލް ހެލްޕް ޓެކްސްޓް މިތަނުގައި. 
  1. <ފޯމް> އެވެ
  2.   <ފީލްޑްސެޓް> އެވެ
  3.     <ލެޖެންޑް> ލެޖެންޑް </legend> އެވެ
  4.     <label> ލޭބަލް ނަން </label>
  5.     <input type = "text" placeholder = "އެއްޗެއް ޓައިޕް ކުރާށެވެ..." >  
  6.     <span class = "help-block" > މިތަނުގައި ބްލޮކް ލެވެލްގެ އެހީތެރިކަމުގެ ލިޔުމުގެ މިސާލު. </span> އެވެ 
  7.     <label class = "ޗެކްބޮކްސް" > 
  8.       <input type = "checkbox" > އަހަރެން ޗެކްކޮށްލާށެވެ 
  9.     </label> އެވެ
  10.     <button type = "ހުށަހެޅުން" class = "btn" > ހުށަހެޅުން </button>  
  11.   </ފީލްޑްސެޓް> އެވެ
  12. </form> އެވެ

އިޚްތިޔާރީ ލޭއައުޓްތަކެވެ

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

ސަރޗް ފޯމް

އިތުރު ވަށައިގެންވާ ޓެކްސްޓް އިންޕުޓަކަށް .form-searchފޯމަށް އަދި ފޯމަށް .search-queryއިތުރުކުރުން .<input>

  1. <ފޯމް ކްލާސް = "ފޯމް-ހޯދުން" > 
  2.   <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-މީޑިއަމް ސަރޗް-ކުއަރީ" >  
  3.   <button type = "submit" class = "btn" > ހޯދުން </button>  
  4. </form> އެވެ

އިންލައިން ފޯމެވެ

.form-inlineކޮމްޕެކްޓް ލޭއައުޓަކަށް ކަނާތްފަރާތަށް އެލައިން ކުރެވިފައިވާ ލޭބަލްތަކާއި އިންލައިން-ބްލޮކް ކޮންޓްރޯލްތަކަށް އިތުރުކުރުން .

  1. <ފޯމް ކްލާސް = "ފޯމް-އިންލައިން" > 
  2.   <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-ސްމޯލް" ޕްލޭސްހޯލްޑަރ = "އީމެއިލް" >   
  3.   <އިންޕުޓް ޓައިޕް = "ޕާސްވޯޑް" ކްލާސް = "އިންޕުޓް-ކުޑަ" ޕްލޭސްހޯލްޑަރ = "ޕާސްވޯޑް" >   
  4.   <label class = "ޗެކްބޮކްސް" > 
  5.     <input type = "checkbox" > އަހަރެންގެ މަތިން ހަނދާން ކުރާށެވެ 
  6.   </label> އެވެ
  7.   <button type = "submit" class = "btn" > ސައިން އިން </button>  
  8. </form> އެވެ

ހޮރައިޒޮންޓަލް ފޯމެވެ

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

  • .form-horizontalފޯމަށް އިތުރުކޮށްލާށެވެ
  • ލޭބަލްތަކާއި ކޮންޓްރޯލްތައް ވަށާލާށެވެ.control-group
  • .control-labelލޭބަލަށް އިތުރުކޮށްލާށެވެ
  • .controlsރަނގަޅަށް އެލައިން ކުރުމަށްޓަކައި އެއާ ގުޅުންހުރި އެއްވެސް ކޮންޓްރޯލްތަކެއް ވަށާލާށެވެ
  1. <ފޯމް ކްލާސް = "ފޯމް-ހޮރިޒޮންޓަލް" > 
  2.   <div class = "ކޮންޓްރޯލް-ގްރޫޕް" > 
  3.     <label class = "control-label" for = "އިންޕުޓްއީމެއިލް" > އީމެއިލް </label>  
  4.     <div class = "ކޮންޓްރޯލްސް" > 
  5.       <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" id = "އިންޕުޓްއީމެއިލް" ޕްލޭސްހޯލްޑަރ = "އީމެއިލް" >   
  6.     </div> އެވެ
  7.   </div> އެވެ
  8.   <div class = "ކޮންޓްރޯލް-ގްރޫޕް" > 
  9.     <label class = "control-label" for = "އިންޕުޓްޕާސްވޯޑް" > ޕާސްވޯޑް </label>  
  10.     <div class = "ކޮންޓްރޯލްސް" > 
  11.       <އިންޕުޓް ޓައިޕް = "ޕާސްވޯޑް" id = "އިންޕުޓްޕާސްވޯޑް" ޕްލޭސްހޯލްޑަރ = "ޕާސްވޯޑް" >   
  12.     </div> އެވެ
  13.   </div> އެވެ
  14.   <div class = "ކޮންޓްރޯލް-ގްރޫޕް" > 
  15.     <div class = "ކޮންޓްރޯލްސް" > 
  16.       <label class = "ޗެކްބޮކްސް" > 
  17.         <input type = "checkbox" > އަހަރެންގެ މަތިން ހަނދާން ކުރާށެވެ 
  18.       </label> އެވެ
  19.       <button type = "submit" class = "btn" > ސައިން އިން </button>  
  20.     </div> އެވެ
  21.   </div> އެވެ
  22. </form> އެވެ

ސަޕޯޓް ކުރެވޭ ފޯމް ކޮންޓްރޯލްތައް

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

އިންޕުޓްސް

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

typeހުރިހާ ވަގުތެއްގައިވެސް ކަނޑައެޅިފައިވާ އެއްޗެއް ބޭނުންކުރަންޖެހެއެވެ .

  1. <input type = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = "ޓެކްސްޓް އިންޕުޓް" >

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

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

  1. <ޓެކްސްޓްއޭރިއާ ރޯސް = "3" ></textarea>

ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތަކެވެ

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

ޑިފޯލްޓް (ސްޓޭކްކޮށްފައި)


  1. <label class = "ޗެކްބޮކްސް" > 
  2.   <އިންޕުޓް ޓައިޕް = "ޗެކްބޮކްސް" ވެލިއު = "" >  
  3.   އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ
  4. </label> އެވެ
  5.  
  6. <label class = "ރޭޑިއޯ" > 
  7.   <އިންޕުޓް ޓައިޕް = "ރޭޑިއޯ" ނަން = "އޮޕްޝަންސްރޭޑިއޯސް" id = "އޮޕްޝަންސްރޭޑިއޯސް1" އަގު = "އޮޕްޝަން1" ޗެކްކޮށްފައި >     
  8.   އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ
  9. </label> އެވެ
  10. <label class = "ރޭޑިއޯ" > 
  11.   <އިންޕުޓް ޓައިޕް = "ރޭޑިއޯ" ނަން = "އޮޕްޝަންސްރޭޑިއޯސް" id = "އޮޕްޝަންސްރޭޑިއޯސް2" އަގު = "އޮޕްޝަން2" >    
  12.   އޮޕްޝަން ދެ އަކީ އެހެން އެއްޗަކަށް ވެދާނެ ކަމަށާއި އެ ސެލެކްޓް ކުރުމުން އޮޕްޝަން ވަން ޑިސެލެކްޓް ވާނެ ކަމަށެވެ
  13. </label> އެވެ

އިންލައިން ޗެކްބޮކްސްތަކެވެ

.inlineކްލާސް ޗެކްބޮކްސް ނުވަތަ ރޭޑިއޯތަކުގެ ސިލްސިލާއަކަށް އިތުރުކޮށް ކޮންޓްރޯލްތައް އެއް ލައިނެއްގައި ފެންނާނެއެވެ.

  1. <label class = "ޗެކްބޮކްސް އިންލައިން" > 
  2.   <އިންޕުޓް ޓައިޕް = "ޗެކްބޮކްސް" id = "އިންލައިންޗެކްބޮކްސް1" އަގު = "އޮޕްޝަން1" > 1   
  3. </label> އެވެ
  4. <label class = "ޗެކްބޮކްސް އިންލައިން" > 
  5.   <އިންޕުޓް ޓައިޕް = "ޗެކްބޮކްސް" id = "އިންލައިންޗެކްބޮކްސް2" އަގު = "އޮޕްޝަން2" > 2   
  6. </label> އެވެ
  7. <label class = "ޗެކްބޮކްސް އިންލައިން" > 
  8.   <އިންޕުޓް ޓައިޕް = "ޗެކްބޮކްސް" id = "އިންލައިންޗެކްބޮކްސް3" އަގު = "އޮޕްޝަން3" > 3   
  9. </label> އެވެ

ހޮވައެވެ

multiple="multiple"އެއްފަހަރާ އެތައް އިޚްތިޔާރެއް ދައްކާލުމަށް ޑިފޯލްޓް އޮޕްޝަން ބޭނުން ނުވަތަ a ކަނޑައަޅާށެވެ .


  1. <ހޮވާ> އެވެ
  2.   <އޮޕްޝަން> 1 </option>
  3.   <އޮޕްޝަން> 2 </option>
  4.   <އޮޕްޝަން> 3 </option>
  5.   <އޮޕްޝަން> 4 </option>
  6.   <އޮޕްޝަން> 5 </option>
  7. </ހޮވާ> އެވެ
  8.  
  9. < ގިނަ ހޮވުން = "ގިނަ" > 
  10.   <އޮޕްޝަން> 1 </option>
  11.   <އޮޕްޝަން> 2 </option>
  12.   <އޮޕްޝަން> 3 </option>
  13.   <އޮޕްޝަން> 4 </option>
  14.   <އޮޕްޝަން> 5 </option>
  15. </ހޮވާ> އެވެ

ފޯމް ކޮންޓްރޯލްތައް ދިގުކުރުން

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

ޕްރީޕެންޑް އަދި އެޕެންޑެޑް އިންޕުޓްސް

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

ޑިފޯލްޓް އޮޕްޝަންސް

އިންޕުޓަކަށް ޓެކްސްޓް ޕްރީޕެންޑް ނުވަތަ އެޕެންޑް ކުރުމަށް ދެ ކްލާހުގެ ތެރެއިން އެއް ކްލާސް އާއި އެކު an .add-on​​އަދި an ވަށާލާށެވެ .input

@

.00 އެވެ 
  1. <div class = "އިންޕުޓް-ޕްރީޕެންޑް" > 
  2.   <span class = "އެޑް-އޮން" > @ </span> 
  3.   <އިންޕުޓް ކްލާސް = "span2" id = "ޕްރީޕެންޑެޑްއިންޕުޓް" ޓައިޕް = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = "ޔޫޒަރނޭމް" >    
  4. </div> އެވެ
  5. <div class = "އިންޕުޓް-އެޕެންޑް" > 
  6.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްއިންޕުޓް" ޓައިޕް = "ޓެކްސްޓް" >   
  7.   <span class = "އެޑް-އޮން" > .00 </span> 
  8. </div> އެވެ

އެއްކޮށްލައިގެންނެވެ

.add-onއިންޕުޓެއް ޕްރީޕެންޑްކޮށް އެޕެންޑް ކުރުމަށް ދެ ކްލާސް އާއި ދެ އިންސްޓޭންސް އޮފް ވެސް ބޭނުން ކުރާށެވެ .

$ އެވެ .00 އެވެ 
  1. <div class = "އިންޕުޓް-ޕްރީޕެންޑް އިންޕުޓް-އެޕެންޑް" > 
  2.   <span class = "އެޑް-އޮން" > $ </span> 
  3.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްޕްރެޕެންޑެޑްއިންޕުޓް" ޓައިޕް = "ޓެކްސްޓް" >   
  4.   <span class = "އެޑް-އޮން" > .00 </span> 
  5. </div> އެވެ

ލިޔުމުގެ ބަދަލުގައި ބަޓަންތައް ޖަހާށެވެ

<span>ޓެކްސްޓާއެކު އެއްގެ ބަދަލުގައި .btnއިންޕުޓަކަށް ބަޓަނެއް (ނުވަތަ ދެ ބަޓަނެއް) ޖައްސައިލުމަށް a ބޭނުން ކުރާށެވެ.

  1. <div class = "އިންޕުޓް-އެޕެންޑް" > 
  2.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްއިންޕުޓްބަޓަން" ޓައިޕް = "ޓެކްސްޓް" >   
  3.   <ބަޓަން ކްލާސް = "ބީޓީއެން" ޓައިޕް = "ބަޓަން" > ދާށެވެ! </ބަޓަން> އެވެ  
  4. </div> އެވެ
  1. <div class = "އިންޕުޓް-އެޕެންޑް" > 
  2.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްއިންޕުޓްބަޓަންސް" ޓައިޕް = "ޓެކްސްޓް" >   
  3.   <button class = "btn" type = "ބަޓަން" > ހޯދުން </button>  
  4.   <ބަޓަން ކްލާސް = "ބީޓީއެން" ވައްތަރު = "ބަޓަން" > އިޚްތިޔާރުތައް </ބަޓަން>  
  5. </div> އެވެ

ބަޓަން ޑްރޮޕްޑައުންސް

  1. <div class = "އިންޕުޓް-އެޕެންޑް" > 
  2.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްޑްރޮޕްޑައުންބަޓަން" ޓައިޕް = "ޓެކްސްޓް" >   
  3.   <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  4.     <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
  5.       ޢަމަލު
  6.       <span class = "ކެރެޓް" ></span> 
  7.     </ބަޓަން> އެވެ
  8.     <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
  9.       ...
  10.     </ul> އެވެ
  11.   </div> އެވެ
  12. </div> އެވެ
  1. <div class = "އިންޕުޓް-ޕްރީޕެންޑް" > 
  2.   <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  3.     <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
  4.       ޢަމަލު
  5.       <span class = "ކެރެޓް" ></span> 
  6.     </ބަޓަން> އެވެ
  7.     <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
  8.       ...
  9.     </ul> އެވެ
  10.   </div> އެވެ
  11.   <އިންޕުޓް ކްލާސް = "span2" id = "ޕްރީޕެންޑެޑްޑްރޮޕްޑައުންބަޓަން" ޓައިޕް = "ޓެކްސްޓް" >   
  12. </div> އެވެ
  1. <div class = "އިންޕުޓް-ޕްރީޕެންޑް އިންޕުޓް-އެޕެންޑް" > 
  2.   <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  3.     <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
  4.       ޢަމަލު
  5.       <span class = "ކެރެޓް" ></span> 
  6.     </ބަޓަން> އެވެ
  7.     <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
  8.       ...
  9.     </ul> އެވެ
  10.   </div> އެވެ
  11.   <އިންޕުޓް ކްލާސް = "span2" id = "އެޕެންޑެޑްޕްރެޕެންޑެޑްޑްރޮޕްޑައުންބަޓަން" type = "ޓެކްސްޓް" >   
  12.   <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  13.     <button class = "ބީޓީއެން ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" >  
  14.       ޢަމަލު
  15.       <span class = "ކެރެޓް" ></span> 
  16.     </ބަޓަން> އެވެ
  17.     <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
  18.       ...
  19.     </ul> އެވެ
  20.   </div> އެވެ
  21. </div> އެވެ

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

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

ސަރޗް ފޯމް

  1. <ފޯމް ކްލާސް = "ފޯމް-ހޯދުން" > 
  2.   <div class = "އިންޕުޓް-އެޕެންޑް" > 
  3.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "ސްޕަން2 ސަރޗް-ކުއަރީ" >  
  4.     <button type = "submit" class = "btn" > ހޯދުން </button>  
  5.   </div> އެވެ
  6.   <div class = "އިންޕުޓް-ޕްރީޕެންޑް" > 
  7.     <button type = "submit" class = "btn" > ހޯދުން </button>  
  8.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "ސްޕަން2 ސަރޗް-ކުއަރީ" >  
  9.   </div> އެވެ
  10. </form> އެވެ

ސައިޒިންގ ކޮންޓްރޯލް ކުރުން

.input-largeކްލާސްތައް ބޭނުންކޮށްގެން ތިމާގެ އިންޕުޓްތައް ގްރިޑް ކޮލަމް ސައިޒްތަކާ އެއްގޮތަށް ނުވަތަ މެޗްކޮށް ރިލޭޓިވް ސައިޒިންގ ކްލާސްތައް ބޭނުންކުރުން .span*.

ބްލޮކް ލެވެލް އިންޕުޓްސް

<input>އެއްވެސް ނުވަތަ <textarea>އެލިމެންޓެއް ބްލޮކް ލެވެލް އެލިމެންޓެއް ފަދައިން އަމަލުކުރާ ގޮތަށް ހަދާށެވެ .

  1. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-ބްލޮކް-ލެވެލް" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-ބްލޮކް-ލެވެލް" >

ރިލޭޓިވް ސައިޒިންގ

  1. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-މިނީ" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-މިނީ" >   
  2. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-ކުޑަ" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-ކުޑަ" >   
  3. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-މީޑިއަމް" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-މީޑިއަމް" >   
  4. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-ބޮޑު" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-ބޮޑު" >   
  5. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-އެކްސްލާޖް" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-އެކްސްލާޖް" >   
  6. <އިންޕުޓް ކްލާސް = "އިންޕުޓް-xxlarge" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".އިންޕުޓް-xxlarge" >

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

ގްރިޑް ސައިޒިންގ

ގްރިޑް ކޮލަމްތަކުގެ ސައިޒުތަކާ އެއްގޮތްވާ އިންޕުޓްތަކަށް .span1to ބޭނުން ކުރާށެވެ ..span12

  1. <އިންޕުޓް ކްލާސް = "ސްޕަން1" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span1" >   
  2. <އިންޕުޓް ކްލާސް = "ސްޕަން2" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span2" >   
  3. <އިންޕުޓް ކްލާސް = "ސްޕަން3" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span3" >   
  4. < ކްލާސް ހޮވާ = "span1" > 
  5.   ...
  6. </ހޮވާ> އެވެ
  7. < ކްލާސް ހޮވާ = "span2" > 
  8.   ...
  9. </ހޮވާ> އެވެ
  10. < ކްލާސް ހޮވާ = "span3" > 
  11.   ...
  12. </ހޮވާ> އެވެ

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

  1. <div class = "ކޮންޓްރޯލްސް" > 
  2.   <އިންޕުޓް ކްލާސް = "span5" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span5" >   
  3. </div> އެވެ
  4. <div class = "ކޮންޓްރޯލްސް-ރޯ ކޮންޓްރޯލް ކުރެއެވެ" > 
  5.   <އިންޕުޓް ކްލާސް = "ސްޕަން4" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span4" >   
  6.   <އިންޕުޓް ކްލާސް = "ސްޕަން1" ވައްތަރު = "ޓެކްސްޓް" ޕްލޭސްހޯލްޑަރ = ".span1" >   
  7. </div> އެވެ
  8. ...

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

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

މިތަނުގައި ބައެއް އަގު 
  1. <span class = "input-xlarge uneditable-input" > މިތަނުގައި ބައެއް އަގު </span>

ޢަމަލުތައް ފޯމްކުރުން

ފޯމެއް ނިންމާލާނީ ޢަމަލުތަކުގެ ގްރޫޕަކުން (ބަޓަންތަކެއް) އެވެ. ގެ ތެރޭގައި ބަހައްޓާއިރު .form-actions، ފޯމް ކޮންޓްރޯލްތަކާ ލައިން ކުރުމަށްޓަކައި ބަޓަންތައް އޮޓޮމެޓިކުން އިންޑެންޓް ވާނެއެވެ.

  1. <div class = "ފޯމް-އެކްޝަންސް" > 
  2.   <button type = "submit" class = "btn btn-primary" > ބަދަލުތައް ރައްކާކުރުން </button>  
  3.   <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "ބީޓީއެން" > ކެންސަލް </button>  
  4. </div> އެވެ

އެހީ ޓެކްސްޓް

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

އިންލައިން އެހީތެރިވެދިނުން

އިންލައިން ހެލްޕް ޓެކްސްޓް 
  1. <input type = "text" ><span class = "ހެލްޕް-އިންލައިން" > އިންލައިން ހެލްޕް ޓެކްސްޓް </span>

ބްލޮކް އެހީ

އާ ލައިނަކަށް ފަޅައިގެން ގޮސް އެއް ސަފުހާއަށް ވުރެ ކުރިއަށް ދިގުވެދާނެ އެހީތެރި ލިޔުމުގެ ދިގު ބްލޮކެއް. 
  1. <input type = "text" ><span class = "help-block" > އާ ލައިނަކަށް ފަޅައިގެން ގޮސް އެއް ސަފުހާއަށްވުރެ ކުރިއަށް ދިގުވެދާނެ އެހީތެރި ލިޔުމުގެ ދިގު ބްލޮކެއް. </span> އެވެ

ފޯމް ކޮންޓްރޯލް ސްޓޭޓްސް

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

އިންޕުޓް ފޯކަސް

outlineއަޅުގަނޑުމެން ބައެއް ފޯމް ކޮންޓްރޯލްތަކުގައި ހުންނަ ޑިފޯލްޓް ސްޓައިލްތައް ނައްތާލައި box-shadowއޭގެ ބަދަލުގައި a އަށް އަމަލުކުރަމެވެ :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "މިއީ ފޯކަސް ކުރެވިފައިވާ ކަމެއް..." >

ސައްހަ ނޫން އިންޕުޓްތަކެވެ

ސްޓައިލް އިންޕުޓްސް މެދުވެރިކޮށް ޑިފޯލްޓް ބްރައުޒާ ފަންކްޝަނަލިޓީ އާއި އެކު :invalid. a ކަނޑައަޅައި type، ފީލްޑް އިޚްތިޔާރީ ނޫންނަމަ އެޓްރިބިއުޓް އިތުރުކޮށް required، (އެޕްލިކޭޓް ކުރެވޭނަމަ) a ކަނޑައަޅާށެވެ pattern.

މިއީ ސީއެސްއެސް ސޫޑޯ ސެލެކްޓަރތަކަށް ސަޕޯޓް ނުލިބޭތީ އިންޓަރނެޓް އެކްސްޕްލޯރަރ 7-9 ގެ ވަރޝަންތަކުގައި ލިބެން ނެތް އެއްޗެކެވެ.

  1. <އިންޕުޓް ކްލާސް = "span3" ޓައިޕް = "އީމެއިލް" ބޭނުންވާ >

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

disabledއިންޕުޓެއްގައި އެޓްރިބިއުޓް އިތުރުކޮށް ޔޫޒަރ އިންޕުޓް ނުކޮށް ކުޑަކޮށް ތަފާތު ލޫކެއް ޓްރިގަރ ކޮށްލާށެވެ.

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "މިތަނުގައި އިންޕުޓް ނުކުޅެދުންތެރިކޮށްފި..." ޑިސެބަލްކޮށްފައި >

ވެލިޑޭޝަން ސްޓޭޓްސް

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

ކޮންމެވެސް ކަމެއް ގޯސްވެދާނެއެވެ
އެ ގޯސް އިސްލާހު ކުރައްވާށެވެ
ޔޫޒަރނޭމް ނަގާފައިވެއެވެ
ވޫހޫ! 
  1. <div class = "ކޮންޓްރޯލް-ގްރޫޕް އިންޒާރު" > 
  2.   <label class = "control-label" for = "inputWarning" > އިންޒާރާއެކު އިންޕުޓް </label>  
  3.   <div class = "ކޮންޓްރޯލްސް" > 
  4.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" id = "އިންޕުޓްވާރނިންގ" >  
  5.     <span class = "help-inline" > ކަމެއް ގޯސްވެދާނެ </span> 
  6.   </div> އެވެ
  7. </div> އެވެ
  8.  
  9. <div class = "ކޮންޓްރޯލް-ގްރޫޕް އެރަރ" > 
  10.   <label class = "control-label" for = "އިންޕުޓްއެރޯރ" > އެރަރ އާއި އެކު އިންޕުޓް </label>  
  11.   <div class = "ކޮންޓްރޯލްސް" > 
  12.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" id = "އިންޕުޓްއެރޯރ" >  
  13.     <span class = "help-inline" > ގޯސް އިސްލާހު ކުރައްވާ </span> 
  14.   </div> އެވެ
  15. </div> އެވެ
  16.  
  17. <div class = "ކޮންޓްރޯލް-ގްރޫޕް އިންފޯ" > 
  18.   <label class = "control-label" for = "އިންޕުޓްއިންފޯ" > އިންފޯ އާއި އެކު އިންޕުޓް </label>  
  19.   <div class = "ކޮންޓްރޯލްސް" > 
  20.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" id = "އިންޕުޓްއިންފޯ" >  
  21.     <span class = "help-inline" > ޔޫޒަރނޭމް މިހާރުވެސް ނަގާފައި އެބަހުރި </span> 
  22.   </div> އެވެ
  23. </div> އެވެ
  24.  
  25. <div class = "ކޮންޓްރޯލް-ގްރޫޕް ކާމިޔާބީ" > 
  26.   <label class = "control-label" for = "inputSuccess" > ކާމިޔާބީއާއެކު އިންޕުޓް ކުރުން </label>  
  27.   <div class = "ކޮންޓްރޯލްސް" > 
  28.     <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" id = "އިންޕުޓްސަކްސެސް" >  
  29.     <span class = "އެހީ-އިންލައިން" > ވޫހޫ! </span> އެވެ 
  30.   </div> އެވެ
  31. </div> އެވެ

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

ޑިފޯލްޓް ބަޓަންތަކެވެ

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

ގޮށް ކްލާސް="" ތަފްޞީލު
btn ގްރޭޑިއަންޓާއެކު ސްޓޭންޑަރޑް ގްރޭ ބަޓަން
btn btn-primary އިތުރު ވިޝުއަލް ވެއިޓް ފޯރުކޮށްދީ، ބަޓަން ސެޓެއްގައި ޕްރައިމަރީ އެކްޝަން ދެނެގަނެވޭނެއެވެ
btn btn-info ޑިފޯލްޓް ސްޓައިލްތަކަށް ބަދަލެއްގެ ގޮތުގައި ބޭނުންކުރެއެވެ
btn btn-success ކާމިޔާބު ނުވަތަ ހެޔޮ ޢަމަލެއް ހިންގިކަން އަންގައިދެއެވެ
btn btn-warning މި ފިޔަވަޅާއެކު ސަމާލުކަން ދޭން ޖެހޭކަން އަންގައިދެއެވެ
btn btn-danger ނުރައްކާތެރި ނުވަތަ ނޭދެވޭ ޢަމަލެއް ހިންގިދާނެކަން އަންގައިދެއެވެ
btn btn-inverse ޑާކް ގްރޭ ބަޓަން ބަދަލުކޮށް، މާނަވީ ޢަމަލަކަށް ނުވަތަ ބޭނުންކުރުމަކާ ނުގުޅި
btn btn-link ބަޓަންގެ ސުލޫކު ދަމަހައްޓައިގެން ލިންކެއް ފަދަ ގޮތަކަށް ހަދައިގެން ބަޓަނަކަށް ބާރު ކުޑަކޮށްލާށެވެ

ކްރޮސް ބްރައުޒާ ކޮމްޕެޓިބިލިޓީ

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

ބަޓަން ސައިޒްތަކެވެ

ފެންސީ ބޮޑެތި ނުވަތަ ކުދި ބަޓަންތަކެއް ހެއްޔެވެ؟ އިތުރު ސައިޒްތަކަށް .btn-large, .btn-small, ނުވަތަ އިތުރުކުރުން ..btn-mini

  1. <p> އެވެ
  2.   <button class = "btn btn-large btn-primary" type = "ބަޓަން" > ބޮޑު ބަޓަން </button>  
  3.   <button class = "btn btn-large" type = "ބަޓަން" > ބޮޑު ބަޓަން </button>  
  4. </p> އެވެ
  5. <p> އެވެ
  6.   <button class = "btn btn-primary" type = "ބަޓަން" > ޑިފޯލްޓް ބަޓަން </button>  
  7.   <button class = "btn" type = "ބަޓަން" > ޑިފޯލްޓް ބަޓަން </button>  
  8. </p> އެވެ
  9. <p> އެވެ
  10.   <button class = "btn btn-small btn-primary" type = "ބަޓަން" > ކުޑަ ބަޓަން </button>  
  11.   <button class = "btn btn-small" type = "ބަޓަން" > ކުޑަ ބަޓަން </button>  
  12. </p> އެވެ
  13. <p> އެވެ
  14.   <ބަޓަން ކްލާސް = "ބީޓީއެން ބީޓީއެން-މިނީ ބީޓީއެން-ޕްރައިމަރީ" type = "ބަޓަން" > މިނީ ބަޓަން </ބަޓަން>  
  15.   <ބަޓަން ކްލާސް = "btn btn-mini" type = "ބަޓަން" > މިނީ ބަޓަން </button>  
  16. </p> އެވެ

ބްލޮކް ލެވެލް ބަޓަންތައް އުފެއްދުން- ބެލެނިވެރިއެއްގެ ފުރިހަމަ ފުޅާމިނުގައި ފުޅާވާ ބަޓަންތައް- އިތުރުކޮށްގެން .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "ބަޓަން" > ބްލޮކް ލެވެލް ބަޓަން </button>  
  2. <button class = "btn btn-large btn-block" type = "ބަޓަން" > ބްލޮކް ލެވެލް ބަޓަން </button>

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

ބަޓަންތައް %50 ފަހަތަށް ފޭޑްކޮށްގެން ކްލިކް ނުކުރެވޭ ގޮތަށް ހަދާށެވެ.

އެންކަރ އެލިމެންޓް

ބަޓަންތަކަށް .disabledކްލާސް އިތުރުކުރުން .<a>

ޕްރައިމަރީ ލިންކް ލިންކް 

  1. <a href = "#" class = "btn btn-large btn-ޕްރައިމަރީ ޑިސެބިލްޑް" > ޕްރައިމަރީ ލިންކް </a>  
  2. <a href = "#" class = "btn btn-large ޑިސެބިލްޑް" > ލިންކް </a>

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

ބަޓަން އެލިމެންޓް

disabledއެޓްރިބިއުޓް <button>ބަޓަންތަކަށް އިތުރުކުރުން .

  1. <button type = "button" class = "btn btn-large btn-ޕްރައިމަރީ ޑިސެބިލްޑް" disabled = "ޑިސެބަލްޑް" > ޕްރައިމަރީ ބަޓަން </button>   
  2. <ބަޓަން ވައްތަރު = "ބަޓަން" ކްލާސް = "btn btn-large" ޑިސެބިލްކޮށްފައި > ބަޓަން </ބަޓަން>

އެއް ކްލާސް، އެތައް ޓެގެއް

، , ނުވަތަ އެލިމެންޓެއްގެ .btnމައްޗަށް ކްލާސް ބޭނުން ކުރާށެވެ .<a><button><input>

ލިންކް 
  1. <a class = "btn" href = "" > ލިންކް </a>  
  2. <ބަޓަން ކްލާސް = "ބީޓީއެން" ޓައިޕް = "ސަބްމިޓް" > ބަޓަން </ބަޓަން>  
  3. <އިންޕުޓް ކްލާސް = "ބީޓީއެން" ވައްތަރު = "ބަޓަން" އަގު = "އިންޕުޓް" >   
  4. <input class = "btn" type = "ސަބްމިޓް" ވެލިއު = "ސަބްމިޓް" >

އެންމެ ރަނގަޅު އުސޫލެއްގެ ގޮތުން، ކްރޮސް ބްރައުޒަރ ރެންޑަރިންގ އެއްގޮތްވާކަން ކަށަވަރުކުރުމަށްޓަކައި، ތިބާގެ ކޮންޓެކްސްޓަށް އެލިމެންޓް މެޗް ކުރަން މަސައްކަތް ކުރާށެވެ. ތިބާގެ އަތުގައި ހުރިނަމަ ، ތިބާގެ ބަޓަންއަށް inputއެއް ބޭނުން ކުރާށެވެ.<input type="submit">

ތަސްވީރުތަކެވެ

<img>ކޮންމެ ޕްރޮޖެކްޓެއްގައިވެސް ފަސޭހައިން ތަސްވީރުތައް ސްޓައިލް ކުރުމަށް އެލިމެންޓަކަށް ކްލާސްތައް އިތުރުކުރުން .

140x140 އެވެ 140x140 އެވެ 140x140 އެވެ 
  1. <img src = "..." ކްލާސް = "އިމްޖީ-ވަށައިގެން" >  
  2. <img src = "..." ކްލާސް = "އިމްޖީ-ސަރކަލް" >  
  3. <img src = "..." ކްލާސް = "އިމްޖީ-ޕޮލާރޮއިޑް" >

ހެޑްސް އަޕް! .img-roundedއަދި ސަޕޯޓް .img-circleނެތުމުން އައިއީ7-8 ގައި މަސައްކަތް ނުކުރެއެވެ .border-radius

ގްލިފިކޮންސް އިން އުފައްދާފައިވާ އައިކޮންސް އެވެ

އައިކޮން ގްލައިފްސް އެވެ

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

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

ގްލައިފިކޮންސް އެޓްރިބިއުޝަން

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

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

ހުރިހާ އައިކޮންތަކެއްގައިވެސް ބޭނުންވަނީ <i>ޔުނިކް ކްލާހެއް ހުންނަ ޓެގެއް، އޭގެ ކުރިން icon-. ބޭނުން ކުރުމަށްޓަކައި ތިރީގައިވާ ކޯޑް ގާތްގަނޑަކަށް ކޮންމެ ތަނެއްގައި ވެސް ބަހައްޓާށެވެ.

  1. <i ކްލާސް = "އައިކޮން-ހޯދުން" ></i>

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

  1. <i class = "އައިކޮން-ހޯދުން އައިކޮން-ހުދު" ></i>

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

އައިކޮން މިސާލުތައް

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

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

ބަޓަން ޓޫލްބާރ އެއްގައި ހުންނަ ބަޓަން ގްރޫޕް
  1. <div ކްލާސް = "ބީޓީއެން-ޓޫލްބާ" > 
  2.   <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  3.     <a class = "btn" href = "#" ><i class = "އައިކޮން-އެލައިން-ކަނާތް" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "އައިކޮން-އެލައިން-ސެންޓަރ" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "އައިކޮން-އެލައިން-ރައިޓް" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "އައިކޮން-އެލައިން-ޖަސްޓިފައި" ></i></a>   
  7.   </div> އެވެ
  8. </div> އެވެ
ބަޓަން ގްރޫޕެއްގައި ޑްރޮޕްޑައުން ކޮށްލާށެވެ
ޔޫޒަރެވެ 
  1. <div ކްލާސް = "ބީޓީއެން-ގްރޫޕް" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "އައިކޮން-ޔޫޒަރ އައިކޮން-ވައިޓް" ></i> ޔޫޒަރ </a>   
  3.   <a ކްލާސް = "ބީޓީއެން ބީޓީއެން-ޕްރައިމަރީ ޑްރޮޕްޑައުން-ޓޮގްލް" data-toggle = "ޑްރޮޕްޑައުން" href = "#" ><span class = "ކެރެޓް" ></span></a>    
  4.   <ul class = "ޑްރޮޕްޑައުން-މެނޫ" > 
  5.     <li><a href = "#" ><i class = "އައިކޮން-ޕެންސިލް" ></i> އެޑިޓްކުރުން </a></li>  
  6.     <li><a href = "#" ><i class = "އައިކޮން-ޓްރެޝް" </i> ޑިލީޓްކުރުން </a></li>  
  7.     <li><a href = "#" ><i class = "އައިކޮން-ބޭން-ސަރކަލް" ></i> މަނާކުރުން </a></li>  
  8.     <li ކްލާސް = "ޑިވައިޑަރ" </li> 
  9.     <li><a href = "#" ><i class = "i" ></i> އެޑްމިން </a></li> ހެދުން  
  10.   </ul> އެވެ
  11. </div> އެވެ
ބަޓަން ސައިޒްތަކެވެ
ތަރި ތަރި ތަރި 
  1. <a class = "btn btn-large" href = "#" ><i class = "އައިކޮން-ސްޓާ" ></i> ތަރި </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "އައިކޮން-ސްޓާ" ></i> ތަރި </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "އައިކޮން-ސްޓާ" ></i> ތަރި </a>

ނޭވިގޭޝަން

  1. <ul ކްލާސް = "ނަވް ނެވް-ލިސްޓް" > 
  2.   <li class = "އެކްޓިވް" ><a href = "#" ><i class = "އައިކޮން-ހޯމް އައިކޮން-ވައިޓް" </i> ހޯމް </a></li>   
  3.   <li><a href = "#" ><i class = "އައިކޮން-ފޮތް" </i> ލައިބްރަރީ </a></li>  
  4.   <li><a href = "#" ><i class = "އައިކޮން-ޕެންސިލް" </i> އެޕްލިކޭޝަންތައް </a></li>  
  5.   <li><a href = "#" ><i ކްލާސް = "އަހަރެން" </i> މިސްކް </a></li>  
  6. </ul> އެވެ

ފޯމް ފީލްޑްސް

  1. <div class = "ކޮންޓްރޯލް-ގްރޫޕް" > 
  2.   <label class = "control-label" for = "އިންޕުޓްއައިކޮން" > އީމެއިލް އެޑްރެސް </label>  
  3.   <div class = "ކޮންޓްރޯލްސް" > 
  4.     <div class = "އިންޕުޓް-ޕްރީޕެންޑް" > 
  5.       <span class = "އެޑް-އޮން" ><i class = "އައިކޮން-އުރަ" ></i></span>  
  6.       <އިންޕުޓް ކްލާސް = "ސްޕަން2" id = "އިންޕުޓްއައިކޮން" ޓައިޕް = "ޓެކްސްޓް" >   
  7.     </div> އެވެ
  8.   </div> އެވެ
  9. </div> އެވެ