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

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

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

ޓައިޕޮގްރަފީ ހެޑިންގސް، ޕެރެގްރާފްސް، ލިސްޓްސް، އަދި އެހެނިހެން އިންލައިން ޓައިޕް އެލިމެންޓްސް

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

ޓައިޕޮގްރަފިކް ސްކޭލް

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

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

މިސާލު ބޮޑީ ޓެކްސްޓް

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

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

ހ1. ސުރުޚީ 1

ހ2. ސުރުޚީ 2

ހ3. ސުރުޚީ 3

ހ4. ސުރުޚީ 4

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

ބާރުއެޅުމާއި، މުޚާޠަބުކުރުމާއި، ކުރުކުރުން

އެއްޗެއްގެ ބައެއް ބޭނުން ކުރުން އިޚްތިޔާރީ
<strong> މުހިންމު ލިޔުމަކާއެކު ލިޔުމެއްގެ ސްނިޕެޓަކަށް ބާރުއެޅުމަށްޓަކައި އެއްޗެއްނޫން
<em> ސްޓްރެސް އާއި އެކު ލިޔުމެއްގެ ސްނިޕެޓަކަށް ބާރުއެޅުމަށްޓަކައި އެއްޗެއްނޫން
<abbr> ހޯވަރގައި ފުޅާކޮށްފައިވާ ވަރޝަން ދައްކާލުމަށްޓަކައި ކުރުކުރުންތަކާއި ކުޑަކުޑަ ނަންތައް ވަށާލައެވެ

titleފުޅާކޮށްފައިވާ ލިޔުމަކަށް އިޚްތިޔާރީ އެޓްރިބިއުޓް ހިމަނާށެވެ

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

ބާރުއެޅުން ބޭނުންކޮށްގެން

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

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

މިސާލު އެޑްރެސްތަކެވެ

<address>މިއީ ޓެގް ބޭނުންކުރެވޭނެ ގޮތުގެ ދެ މިސާލެކެވެ.

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

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

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

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

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

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

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

އެއްޗެއްގެ ބައެއް ބޭނުން ކުރުން އިޚްތިޔާރީ
<blockquote> އެހެން މަސްދަރަކުން ކޮންޓެންޓް ކޯޓް ކުރުމަށް ބްލޮކް ލެވެލްގެ އެލިމެންޓް

citeސޯސް ޔޫ.އާރ.އެލް އަށް އެޓްރިބިއުޓް އިތުރުކުރުން

ފްލޯޓެޑް އޮޕްޝަންތަކަށް ބޭނުންކުރުމާއި .pull-leftކްލާސްތައް.pull-right
<small> ޔޫޒަރ ފޭސިންގ ސައިޓޭޝަނެއް އިތުރުކުރުމަށް އިޚްތިޔާރީ އެލިމެންޓެއް، އާންމުކޮށް މަސައްކަތުގެ ސުރުޚީ ލިބިފައިވާ ލިޔުންތެރިއެކެވެ <cite>މަސްދަރުގެ ސުރުޚީ ނުވަތަ ނަމުގެ ވަށައިގެން ޖައްސާށެވެ

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

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

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

މިސާލު ބްލޮކްކޯޓްސް

ޑިފޯލްޓް ބްލޮކްކޯޓްތައް ސްޓައިލް ކުރެވިފައިވަނީ މިގޮތަށެވެ:

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

ބޮޑީ އޮފް ވޯކްގައި މަޝްހޫރު މީހެކެވެ

ތިބާގެ ބްލޮކްކޯޓް ކަނާތްފަރާތަށް ފްލޯޓް ކުރުމަށްޓަކައި، އިތުރުކުރައްވާ class="pull-right":

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

ބޮޑީ އޮފް ވޯކްގައި މަޝްހޫރު މީހެކެވެ

ލިސްޓްތައް

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

<ul>

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

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

<ul class="unstyled">

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

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

<ol>

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

ތަފްޞީލު

<dl>

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

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

<dl class="dl-horizontal">

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

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

ކޯޑް އިންލައިން އަދި ބްލޮކް ކޯޑް ސްނިޕެޓްސް

އިންލައިން

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

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

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

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

<p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>

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

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

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

ގޫގުލް ޕްރިޓިފައި އެވެ

ހަމަ އެ <pre>އެލިމެންޓް ނަގައިގެން އެންހަންސްޑް ރެންޑަރިންގ އަށް އިޚްތިޔާރީ ދެ ކްލާސް އިތުރުކޮށްލާށެވެ.

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

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

ޓޭބަލްސް ފޯރ، ތިޔަބޭފުޅުން ލަފާކުރެއްވި ގޮތުގައި، ޓޭބަލް ޑޭޓާ

ޓޭބަލް މާކަޕް

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

ތާވަލުގެ އިޚްތިޔާރުތައް

ނަން ކްލާސް ތަފްޞީލު
ޑީފޯލްޓް އެއްޗެއްނޫން ސްޓައިލްތަކެއް ނެތް، ހަމައެކަނި ކޮލަމްތަކާއި ރޯތަކެވެ
އާދައިގެ .table ހަމައެކަނި ސަފުތަކުގެ މެދުގައި ހުންނަ ހޮރައިޒޮންޓަލް ރޮނގުތަކެވެ
ބޯޑަރ ކޮށްފައި .table-bordered ކަނެއް ވަށާލައި ބޭރު ބޯޑަރ އިތުރުކޮށްދެއެވެ
ޒީބްރާ-ސްޓްރައިޕް އެވެ .table-striped އޯޑް ރޯތަކަށް (1، 3، 5، ފަދަ) ފަނޑު އަޅިކުލައިގެ ބެކްގްރައުންޑް ކުލަ އިތުރުކުރެއެވެ.
ކޮންޑެންސް ކޮށްފައި .table-condensed ވަރޓިކަލް ޕެޑިންގ ދެބައިކޮށް، 8px އިން 4px އަށް، ހުރިހާ tdއަދި thއެލިމެންޓްތަކުގެ ތެރޭގައި ކަނޑާލައެވެ

މިސާލު ތާވަލުތަކެވެ

1. ޑިފޯލްޓް ޓޭބަލް ސްޓައިލްތައް

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

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

2. ސްޓްރައިޕްޑް މޭޒު

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

ނޯޓް: ސްޓްރައިޕްޑް ޓޭބަލްތަކުގައި :nth-childސީއެސްއެސް ސެލެކްޓަރ ބޭނުންކުރާއިރު، IE7-IE8 ގައި މި ޓޭބަލްތައް ލިބެން ނެތެވެ.

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

3. ބޯޑަރު ޖަހާފައިވާ މޭޒު

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

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

4. ކޮންޑެންސްޑް ޓޭބަލް

.table-condensedޓޭބަލް ސެލް ޕެޑިންގ ދެބައިކުޅަ އެއްބައި (8px އިން 4px އަށް) ކަނޑާލުމަށް ކްލާސް އިތުރުކޮށްގެން ތިބާގެ ޓޭބަލްތައް އިތުރަށް ކޮމްޕެކްޓް ކުރާށެވެ .

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

5. އެ ހުރިހާ އެއްޗެއް އެއްކޮށްލާށެވެ!

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

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

ފޯމުތައް

ފްލެކްސިބަލް އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް އެވެ

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

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

ހަތަރު ލޭއައުޓް ހިމެނެ އެވެ

ބޫޓްސްޓްރެޕް އަށް ފޯމް ލޭއައުޓްގެ ހަތަރު ވައްތަރަކަށް ސަޕޯޓް ލިބެ އެވެ:

  • ވަރުގަދަ (ޑިފޯލްޓް) .
  • ހޯދުން
  • އިންލައިން
  • ދިގަށް

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

ކޮންޓްރޯލް ސްޓޭޓްސް އާއި އަދިވެސް އެތައް ކަމެއް

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

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

ހަތަރު ވައްތަރެއްގެ ފޯމެވެ

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

ނަން ކްލާސް ތަފްޞީލު
ވަރުގަދަ (ޑިފޯލްޓް) . .form-vertical (ނުޖެހޭ) ކޮންޓްރޯލްތަކުގެ މައްޗަށް ސްޓޭކްކޮށްފައިވާ، ކަނާތްފަރާތަށް އެލައިންކޮށްފައިވާ ލޭބަލްތައް
އިންލައިން .form-inline ކޮމްޕެކްޓް ސްޓައިލަށް ލެފްޓް އެލައިންޑް ލޭބަލް އަދި އިންލައިން-ބްލޮކް ކޮންޓްރޯލްސް
ހޯދުން .form-search އާދައިގެ ސަރޗް އެސްތެޓިކް އަކަށް އިތުރު ވަށައިގެންވާ ޓެކްސްޓް އިންޕުޓް
ދިގަށް .form-horizontal ކޮންޓްރޯލްތަކާ އެއް ލައިނެއްގައި ކަނާތްފަރާތަށް، ވާތްފަރާތަށް އެލައިންކޮށްފައިވާ ލޭބަލްތައް ފްލޯޓް ކުރާށެވެ

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

އަސާސީ ފޯމެވެ

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

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

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

ސަރޗް ފޯމް

.form-searchފޯމަށް އިތުރުކޮށް . .search-query_input

  1. <form class = "ރަނގަޅަށް ފޯމް-ހޯދުން" > 
  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> އެވެ

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

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

  • ޓެކްސްޓް އިންޕުޓްސް (ޓެކްސްޓް، ޕާސްވޯޑް، އީމެއިލް، ފަދަ)
  • ޗެކްބޮކްސް އެވެ
  • ރޭޑިއޯ އެވެ
  • ޚިޔާރުކުރުން
  • މަލްޓިޕަލް ސެލެކްޓް ކުރާށެވެ
  • ފައިލް އިންޕުޓް ކުރުން
  • ޓެކްސްޓްއޭރިއާ އެވެ

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

މިސާލު މާކަޕް

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

  1. <ފޯމް ކްލާސް = "ފޯމް-ހޮރިޒޮންޓަލް" > 
  2.   <ފީލްޑްސެޓް> އެވެ
  3.     <legend> ލެޖެންޑް ޓެކްސްޓް </legend>
  4.     <div class = "ކޮންޓްރޯލް-ގްރޫޕް" > 
  5.       <label class = "control-label" for = "އިންޕުޓް01" > ޓެކްސްޓް އިންޕުޓް </label>  
  6.       <div class = "ކޮންޓްރޯލްސް" > 
  7.         <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-އެކްސްލާޖް" id = "އިންޕުޓް01" >   
  8.         <p class = "help-block" > އެހީތެރިކަމުގެ ލިޔުން </p> 
  9.       </div> އެވެ
  10.     </div> އެވެ
  11.   </ފީލްޑްސެޓް> އެވެ
  12. </form> އެވެ

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

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

ފޯމު ސައްހަކުރުން

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

  1. <ފީލްޑްސެޓް
  2.   class = "ކޮންޓްރޯލް-ގްރޫޕް އެރަރ" >
  3.   ...
  4. </ފީލްޑްސެޓް> އެވެ
މިތަނުގައި ބައެއް އަގު
ކޮންމެވެސް ކަމެއް ގޯސްވެދާނެއެވެ
އެ ގޯސް އިސްލާހު ކުރައްވާށެވެ
ވޫހޫ!
ވޫހޫ!

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

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

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

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

v1.4 އާ ހަމައަށް ބޫޓްސްޓްރެޕް އަށް ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތައް ސްޓޭކް ކުރުމަށްޓަކައި ވަށައިގެން އިތުރު މާކަޕް ކުރަން ޖެހުނެވެ. މިހާރު، އެއީ ސާދާ ކަމެއް ތަކުރާރު ކުރުމަކީ <label class="checkbox">ދަޓް ރެޕްސް ދަ <input type="checkbox">.

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

އިންލައިން ފޯމްތަކާއި އެޕެންޑް/ޕްރީޕެންޑް ކުރުން

އިންލައިން ފޯމެއްގައި ޕްރީޕެންޑް ނުވަތަ އެޕެންޑް އިންޕުޓްތައް ބޭނުންކުރުމަށްޓަކައި، .add-onއަދި inputއެއް ލައިނެއްގައި، ޖާގައެއް ނެތި ބެހެއްޓުން ޔަޤީންކުރައްވާށެވެ.

ފޯމް ހެލްޕް ޓެކްސްޓް

ފޯމް އިންޕުޓްތަކަށް އެހީ ޓެކްސްޓް އިތުރުކުރުމަށްޓަކައި، އިންޕުޓް އެލިމެންޓަށްފަހު އިންލައިން ހެލްޕް ޓެކްސްޓް ވިތު <span class="help-inline">ނުވަތަ ހެލްޕް ޓެކްސްޓް ބްލޮކް ވިތު ހިމަނާށެވެ.<p class="help-block">

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

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

@

މިއޮތީ ކޮންމެވެސް އެހީތެރި ޓެކްސްޓެއް

.00 އެވެ
މިއޮތީ އިތުރު އެހީތެރިކަމުގެ ލިޔުމެކެވެ
$ އެވެ .00 އެވެ

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

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

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

ޢަމަލުތަކަށް ބޭނުންކުރާ ބަޓަންތަކެވެ

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

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

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

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

އެތައް ސައިޒެއް

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


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

ޑިސެބިލް ކުރެވިފައިވާ ބަޓަންތަކަށް، .disabledލިންކްތަކަށް ކްލާސް އިތުރުކޮށް، އެލިމެންޓްތަކަށް disabledއެޓްރިބިއުޓް އިތުރުކޮށްލާށެވެ .<button>

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

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

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

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

ލިންކް 
  1. <a class = "btn" href = "" > ލިންކް </a>  
  2. <ބަޓަން ކްލާސް = "ބީޓީއެން" ޓައިޕް = "ސަބްމިޓް" >  
  3.   ގޮށް
  4. </ބަޓަން> އެވެ
  5. <އިންޕުޓް ކްލާސް = "ބީޓީއެން" ޓައިޕް = "ބަޓަން"  
  6.          value = "އިންޕުޓް" >
  7. <އިންޕުޓް ކްލާސް = "ބީޓީއެން" ޓައިޕް = "ސަބްމިޓް"  
  8.          value = "ހުށަހަޅުއްވާ" >

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

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

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

ސްޕްރައިޓެއްގެ ގޮތުގައި ބިނާކޮށްފައިވެއެވެ

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

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

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

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

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

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

އަދި އިންވާޓްޑް (ހުދު) އައިކޮންތަކަށް ވެސް ސްޓައިލްތައް ލިބެން ހުރެއެވެ، ​​އިތުރު އެއް ކްލާހަކާއެކު ތައްޔާރުކޮށްފައި ހުރެއެވެ:

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

ތިމާގެ އައިކޮންތަކަށް 120 ކްލާސް އިންތިހާބު ކުރެވޭނެ އެވެ. ހަމައެކަނި <i>ރަނގަޅު ކްލާސްތަކާއެކު ޓެގެއް އިތުރުކޮށްލުމުން ތިޔަ ސެޓް ވެއްޖެއެވެ. ފުރިހަމަ ލިސްޓް sprites.less އިން ނުވަތަ ހަމަ މިތަނުން މި ލިޔުމުން ލިބިވަޑައިގަންނަވާނެއެވެ.

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

ކޭސްތައް ބޭނުން ކުރާށެވެ

އައިކޮންތަކަކީ މޮޅު އެއްޗެހި ނަމަވެސް އެތަކެތި ބޭނުންކުރާނީ ކޮންތާކު ހެއްޔެވެ؟ ތިރީގައި މިވަނީ މަދު ޚިޔާލުތަކެކެވެ.

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

މުހިންމު ގޮތެއްގައި <i>ޓެގް ޖަހާލެވޭ ކޮންމެ ތަނެއްގައި އައިކޮން ޖަހާލެވޭނެ އެވެ.

މިސާލުތަކެވެ

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

ޔޫޒަރެވެ

ރިފްރެޝް ކޮށްލާށެވެ ޗެކްއައުޓް ކުރާށެވެ ޑިލީޓް

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