ސްކެފޯލްޑިންގގެ މަތީގައި، އަސާސީ އެޗްޓީއެމްއެލް އެލިމެންޓްތައް ސްޓައިލްކޮށް، އެކްސްޓެންސިބަލް ކްލާސްތަކާއެކު ފުރިހަމަކޮށް، ތާޒާ، އެއްގޮތަކަށް ވެސް ލޫކް އެންޑް ފީލްއެއް ލިބިގެންދެއެވެ.
މުޅި ޓައިޕޮގްރަފިކް ގްރިޑް ބިނާވެފައިވަނީ އަޅުގަނޑުމެންގެ variables.less ފައިލްގައިވާ ދެ Less ވެރިއޭބަލްގެ މައްޗަށެވެ: @baseFontSizeއަދި @baseLineHeight. ފުރަތަމަ ކަމަކީ މުޅިން ބޭނުންކުރާ ބޭސް ފޮންޓް-ސައިޒް އަދި ދެވަނަ ކަމަކީ ބޭސް ލައިން-ހައިޓް އެވެ.
އަޅުގަނޑުމެން އެ ވެރިއޭބަލްތައް، އަދި ބައެއް ހިސާބުތައް ބޭނުންކޮށްގެން، އަޅުގަނޑުމެންގެ ހުރިހާ ވައްތަރެއްގެ މާރޖިންސް، ޕެޑިންގސް، އަދި ލައިން-ހައިޓްސް އުފެއްދުމަށް އަދި އެއަށްވުރެ ގިނަ ވައްތަރުތައް އުފައްދަމެވެ.
ނޫލަމް ކުއިސް ރިސަސް އެގޭޓް އުރްނާ މޮލިސް އޮރްނާރޭ ވެލް އެއު ލިއޯ. ކަމް ސޯޝިއަސް ނަޓޯކް ޕެނަޓިބަސް އެޓް މެގްނިސް ޑިސް ޕާޗުރިއަންޓް މޮންޓެސް، ނަސްސެޓަރ ރިޑިކިއުލަސް މުސް. ނޫލަމް އައިޑީ ޑޮލޯރ އައިޑީ ނިބް އުލްޓްރިސީސް ވެހިކުލާ.
އިތުރުކޮށްގެން ޕެރެގްރާފެއް ވަކިން ފާހަގަކޮށްލާށެވެ .lead.
ވިވަމަސް ސެޖިޓިސް ލެކަސް ވެލް އޮގް ލައޯރީޓް ރޫޓްރަމް ފޯސިބަސް ޑޮލޯރ އޮކްޓަރ. ޑޫއިސް މޮލިސް، އެސްޓް ނޮން ކޮމޮޑޯ ލަކްޓަސް އެވެ.
| އެއްޗެއްގެ ބައެއް | ބޭނުން ކުރުން | އިޚްތިޔާރީ |
|---|---|---|
<strong> |
މުހިންމު ލިޔުމަކާއެކު ލިޔުމެއްގެ ސްނިޕެޓަކަށް ބާރުއެޅުމަށްޓަކައި | އެއްޗެއްނޫން |
<em> |
ސްޓްރެސް އާއި އެކު ލިޔުމެއްގެ ސްނިޕެޓަކަށް ބާރުއެޅުމަށްޓަކައި | އެއްޗެއްނޫން |
<abbr> |
ހޯވަރގައި ފުޅާކޮށްފައިވާ ވަރޝަން ދައްކާލުމަށްޓަކައި ކުރުކުރުންތަކާއި ކުޑަކުޑަ ނަންތައް ވަށާލައެވެ |
.initialismބޮޑު އަކުރު ކުރުކުރުންތަކަށް ކްލާސް ބޭނުން ކުރާށެވެ . |
<address> |
އޭގެ އެންމެ ކައިރީގައި ހުންނަ ކާބަފައިން ނުވަތަ މަސައްކަތުގެ މުޅި ހަށިގަނޑާ ގުޅޭނެ މަޢުލޫމާތަށްޓަކައި | އިން ހުރިހާ ލައިންތަކެއް ނިންމާލައިގެން ފޯމެޓިންގ ރައްކާތެރިކުރުން<br> |
ފުސްސޭ ޑަޕިބަސް , ޓެލަސް އެކް ކަރސަސް ކޮމޮޑޯ , ޓޯރޓޯރ މައުރިސް ކޮންޑިމެންޓަމް ނިބް , އުޓް ފަރމަންޓަމް މަސާ ޖަސްޓޯ ސިޓް އަމެޓް ރިސަސް. މެސެނަސް ފައުސިބަސް މޮލިސް އިންޓަރޑަމް އެވެ. ނޫލާ ވިޓޭ އެލިޓް ލިބަރޯ، އަ ފަރެޓްރާ އޮގް.
ނޯޓް: ހިތްހަމަޖެހިގެން ބޭނުންކޮށް <b>އަދި <i>އެޗްޓީއެމްއެލް5 ގައި ނަމަވެސް އެމީހުންގެ ބޭނުންތަކަށް ތަންކޮޅެއް ބަދަލު އައިސްފައިވެއެވެ. <b>އިތުރު މުހިންމުކަމެއް ފޯރުކޮށްނުދީ ލަފުޒުތައް ނުވަތަ ޢިބާރާތްތައް އަލިއަޅުވާލުމަށް މާނަކޮށްފައިވާއިރު <i>ގިނައިން އަޑާއި، ފަންނީ ލަފުޒުތައް ފަދަ ކަންކަމަށް ވެއެވެ.
<address>މިއީ ޓެގް ބޭނުންކުރެވޭނެ ގޮތުގެ ދެ މިސާލެކެވެ.
އެޓްރިބިއުޓެއް ހުންނަ ކުރުކުރުންތަކުގައި titleފަނޑު ޑޮޓް ޖަހާފައިވާ ތިރީ ބޯޑަރެއް ހުންނައިރު ހޯވަރ ކުރާއިރު ހެލްޕް ކަރސަރެއް ހުރެއެވެ. މިއީ ހޯވަރުގައި އެއްޗެއް ދައްކާނެ ކަމުގެ އިތުރު އިޝާރާތެއް ޔޫޒަރުންނަށް ލިބޭ ކަމެކެވެ.
initialismތަންކޮޅެއް ކުޑަ ޓެކްސްޓް ސައިޒެއް ދީގެން ޓައިޕޮގްރަފިކް ހާރމޮނީ އިތުރުކުރުމަށްޓަކައި ކްލާސް ކުރުކުރުމަކަށް އިތުރުކޮށްލާށެވެ .
އެޗްޓީއެމްއެލް އަކީ ރޮށި ކޮށާފައި ހުންނަ ފަހުން އެންމެ ރަނގަޅު އެއްޗެކެވެ.
އެޓްރިބިއުޓް މި ލަފުޒުގެ ކުރުކޮށް ލިޔެފައިވާ ލިޔުމަކީ attr އެވެ.
| އެއްޗެއްގެ ބައެއް | ބޭނުން ކުރުން | އިޚްތިޔާރީ |
|---|---|---|
<blockquote> |
އެހެން މަސްދަރަކުން ކޮންޓެންޓް ކޯޓް ކުރުމަށް ބްލޮކް ލެވެލްގެ އެލިމެންޓް |
.pull-leftކްލާސްތައް.pull-right |
<small> |
ޔޫޒަރ ފޭސިންގ ސައިޓޭޝަނެއް އިތުރުކުރުމަށް އިޚްތިޔާރީ އެލިމެންޓް، އާންމުކޮށް މަސައްކަތުގެ ސުރުޚީ ލިބިފައިވާ ލިޔުންތެރިއެކެވެ | <cite>މަސްދަރުގެ ސުރުޚީ ނުވަތަ ނަމުގެ ވަށައިގެން ޖައްސާށެވެ |
ބްލޮކްކޯޓެއް ހިމަނަން ބޭނުންނަމަ، ކޯޓްގެ ގޮތުގައި <blockquote>ކޮންމެ އެޗްޓީއެމްއެލްއެއް ވެސް ވަށައިގެން އޮޅާލާށެވެ. ސީދާ ކޯޓްތަކަށް އަޅުގަނޑުމެން ލަފާދެނީ އެއް <p>.
<small>ތިމާގެ ސޯސް ސައިޓް ކުރުމަށް އިޚްތިޔާރީ އެލިމެންޓެއް ހިމަނާލުމުން —ސްޓައިލިންގެ ބޭނުމުގައި އޭގެ ކުރިން އެމް ޑޭޝް ލިބޭނެ އެވެ.
- <ބްލޮކްކޯޓް> އެވެ
- <p> ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް. </p> އެވެ
- <ކުޑަ> މީހަކު މަޝްހޫރު </small>
- </blockquote> އެވެ
ޑިފޯލްޓް ބްލޮކްކޯޓްތައް ސްޓައިލް ކުރެވިފައިވަނީ މިގޮތަށެވެ:
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް.
ބޮޑީ އޮފް ވޯކްގައި މަޝްހޫރު މީހެކެވެ
ތިބާގެ ބްލޮކްކޯޓް ކަނާތްފަރާތަށް ފްލޯޓް ކުރުމަށްޓަކައި، އިތުރުކުރައްވާ class="pull-right":
ލޮރެމް އިޕްސަމް ޑޮލޯރ ސިޓް އަމެޓް، ކޮންސެކްޓެޓަރ އެޑިޕިސިންގ އެލިޓް. އިންޓިޖަރ ޕޮސުއެރެ އެރަޓް އަ އެންޓޭ ވެނެނެޓިސް.
ބޮޑީ އޮފް ވޯކްގައި މަޝްހޫރު މީހެކެވެ
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
ހެޑްސް އަޕް! ހޮރައިޒޮންޓަލް ޑިސްކްރިޕްޝަން ލިސްޓްތަކުން ކަނާތު ކޮލަމް ފިކްސް އަށް ފިޓްވާ ވަރަށް ދިގު ޓާމްސްތައް ކަނޑާލާނެއެވެ text-overflow. ހަނި ވިއުޕޯޓްތަކުގައި، އެމީހުން ބަދަލުވާނީ ޑިފޯލްޓް ސްޓޭކްޑް ލޭއައުޓަށެވެ.
ކޯޑްގެ އިންލައިން ސްނިޕެޓްތައް <code>.
- މިސާލަކަށް < code > ބައި </ code > އިންލައިން ގެ ގޮތުގައި އޮޅާލަން ޖެހެއެވެ .
<pre>ކޯޑްގެ އެތައް ސަފުހާއަކަށް ބޭނުން ކުރާށެވެ . ރަނގަޅަށް ރެންޑަރ ކުރުމަށްޓަކައި ކޯޑްގައިވާ އެއްވެސް އެންގްލް ބްރެކެޓެއް ފިލައިގެން ދިއުން ޔަގީން ކުރައްވާށެވެ.
<p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>
- <ޕްރީ> އެވެ
- <p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>
- </pre> އެވެ
ނޯޓް:<pre> ޓެގްތަކުގެ ތެރޭގައި ކޯޑް ވީހާވެސް ކަނާތްފަރާތާ ކައިރިއަށް ބެހެއްޓުން ޔަގީން ކުރައްވާ ؛ އެއީ ހުރިހާ ޓެބްތަކެއް ރެންޑަރ ކުރާނެ އެއްޗެކެވެ.
.pre-scrollable350px ގެ މެކްސް-ހައިޓް ސެޓްކޮށް ވައި-އެކްސިސް ސްކްރޯލްބާރ އެއް ފޯރުކޮށްދޭނެ ކްލާސް އިޚްތިޔާރީ ގޮތެއްގައި އިތުރުކުރެވިދާނެއެވެ .
ހަމަ އެ <pre>އެލިމެންޓް ނަގައިގެން އެންހަންސްޑް ރެންޑަރިންގ އަށް އިޚްތިޔާރީ ދެ ކްލާސް އިތުރުކޮށްލާށެވެ.
- <p> މިތަނުން ނަމޫނާ ލިޔުމެއް... </p>
- <ޕްރީ ކްލާސް = "ޕްރިޓީޕްރިންޓް ."
- ލައިނަމްސް" >
- <p>މިތަނުގައި ނަމޫނާ ލިޔުމެއް...</p>
- </pre> އެވެ
google-code-prettify ޑައުންލޯޑްކޮށް ބޭނުންކުރާނެ ގޮތް ރީޑްމީ ބަލާށެވެ.
| ޓެގް | ތަފްޞީލު |
|---|---|
<table> |
ޓޭބަލް ފޯމެޓެއްގައި ޑޭޓާ ދައްކާލުމަށްޓަކައި ރެޕިންގ އެލިމެންޓް |
<thead> |
<tr>ޓޭބަލް ކޮލަމްތަކަށް ލޭބަލް ކުރުމަށް ޓޭބަލް ހެޑަރ ރޯސް ( ) އަށް ކޮންޓެއިނަރ އެލިމެންޓް |
<tbody> |
<tr>ތާވަލުގެ ހަށިގަނޑުގައިވާ ތާވަލު ރޯތަކަށް ( ) ކޮންޓެއިނަރ އެލިމެންޓް |
<tr> |
އެއް ރޯއެއްގައި ފެންނަ ޓޭބަލް ސެލްތަކުގެ ސެޓަކަށް ( <td>ނުވަތަ ) ކޮންޓެއިނަރ އެލިމެންޓް<th> |
<td> |
ޑިފޯލްޓް ޓޭބަލް ސެލް |
<th> |
ކޮލަމް (ނުވަތަ ރޯ، ސްކޯޕާއި ޕްލޭސްމަންޓަށް ބަލާފައި) ލޭބަލްތަކަށް ޚާއްޞަ ޓޭބަލް ސެލް ބޭނުންކުރަންވާނީ ކ <thead> |
<caption> |
ޚާއްޞަކޮށް ސްކްރީން ރީޑަރުންނަށް ބޭނުންތެރި ތާވަލުގައި ހިމެނޭ އެއްޗެއްގެ ބަޔާން ނުވަތަ ޚުލާޞާ |
- <މޭޒު> އެވެ
- <ބޮލުގައި> އެވެ
- <tr> އެވެ
- <ތް> ... </th> އެވެ
- <ތް> ... </th> އެވެ
- </tr> އެވެ
- </thead> އެވެ
- <ޓްބޮޑީ> އެވެ
- <tr> އެވެ
- <td> ... </td> އެވެ
- <td> ... </td> އެވެ
- </tr> އެވެ
- </tބޮޑީ> އެވެ
- </ޓޭބަލް> އެވެ
| ނަން | ކްލާސް | ތަފްޞީލު |
|---|---|---|
| ޑީފޯލްޓް | އެއްޗެއްނޫން | ސްޓައިލްތަކެއް ނެތް، ހަމައެކަނި ކޮލަމްތަކާއި ރޯތަކެވެ |
| އާދައިގެ | .table |
ހަމައެކަނި ސަފުތަކުގެ މެދުގައި ހުންނަ ހޮރައިޒޮންޓަލް ރޮނގުތަކެވެ |
| ބޯޑަރ ކޮށްފައި | .table-bordered |
ކަނެއް ވަށާލައި ބޭރު ބޯޑަރ އިތުރުކޮށްދެއެވެ |
| ޒީބްރާ-ސްޓްރައިޕް އެވެ | .table-striped |
އޯޑް ރޯތަކަށް (1، 3، 5، ފަދަ) ފަނޑު އަޅިކުލައިގެ ބެކްގްރައުންޑް ކުލަ އިތުރުކުރެއެވެ. |
| ކޮންޑެންސް ކޮށްފައި | .table-condensed |
ވަރޓިކަލް ޕެޑިންގ ދެބައިކޮށް، 8px އިން 4px އަށް، ހުރިހާ tdއަދި thއެލިމެންޓްތަކުގެ ތެރޭގައި ކަނޑާލައެވެ |
ޓޭބަލްތައް އޮޓޮމެޓިކުން ސްޓައިލްކޮށްފައި ހުންނަނީ ކިޔޭނެ ގޮތް ކަށަވަރުކޮށްދީ ސްޓްރަކްޗަރ ބެލެހެއްޓުމަށްޓަކައި މަދު ބޯޑަރތަކަކާއެކުގައެވެ. 2.0 އާއެކު .tableކްލާސް ހޯދަން ޖެހެ އެވެ.
- <ޓޭބަލް ކްލާސް = "ޓޭބަލް" >
- ...
- </ޓޭބަލް> އެވެ
| # | ފުރަތަމަ ނަން | ފަހު ނަން | ޔޫޒަރނޭމް |
|---|---|---|---|
| 1 | މާކިން އެވެ | އޮޓޯ އެވެ | @mdo |
| 2 | ޔަޢުޤޫބުވެ | ތޯންޓަން އެވެ | @ފަލަ |
| 3 | ލާރީ އެވެ | ދަ ބާރޑް އެވެ | @twitter އިން ލިބޭނެއެވެ |
ޒީބްރާ-ސްޓްރައިޕިންގ އިތުރުކޮށްގެން ތިބާގެ މޭޒުތަކާއެކު ކުޑަކޮށް ފެންސީ ކޮށްލައްވާ- ހަމައެކަނި .table-stripedކްލާސް އިތުރުކޮށްލާށެވެ.
ނޯޓް: ސްޓްރައިޕްޑް ޓޭބަލްތަކުގައި :nth-childސީއެސްއެސް ސެލެކްޓަރ ބޭނުންކުރާއިރު، IE7-IE8 ގައި މި ޓޭބަލްތައް ލިބެން ނެތެވެ.
- <ޓޭބަލް ކްލާސް = "ޓޭބަލް ޓޭބަލް-ސްޓްރައިޕްޑް" >
- ...
- </ޓޭބަލް> އެވެ
| # | ފުރަތަމަ ނަން | ފަހު ނަން | ޔޫޒަރނޭމް |
|---|---|---|---|
| 1 | މާކިން އެވެ | އޮޓޯ އެވެ | @mdo |
| 2 | ޔަޢުޤޫބުވެ | ތޯންޓަން އެވެ | @ފަލަ |
| 3 | ލާރީ އެވެ | ދަ ބާރޑް އެވެ | @twitter އިން ލިބޭނެއެވެ |
ރީތިކަމުގެ ބޭނުމުގައި މުޅި މޭޒުގެ ވަށައިގެން ބޯޑަރުތަކާއި ވަށައިގެންވާ ކޮޅުތައް އަޅާށެވެ.
- <ޓޭބަލް ކްލާސް = "ޓޭބަލް-ބޯޑަރޑް" >
- ...
- </ޓޭބަލް> އެވެ
| # | ފުރަތަމަ ނަން | ފަހު ނަން | ޔޫޒަރނޭމް |
|---|---|---|---|
| 1 | މާކިން އެވެ | އޮޓޯ އެވެ | @mdo |
| މާކިން އެވެ | އޮޓޯ އެވެ | @ގެޓްބޫޓްސްޓްރެޕް އެވެ | |
| 2 | ޔަޢުޤޫބުވެ | ތޯންޓަން އެވެ | @ފަލަ |
| 3 | ލެރީ ދަ ބާރޑް އެވެ | @twitter އިން ލިބޭނެއެވެ | |
.table-condensedޓޭބަލް ސެލް ޕެޑިންގ ދެބައިކުޅަ އެއްބައި (8px އިން 4px އަށް) ކަނޑާލުމަށް ކްލާސް އިތުރުކޮށްގެން ތިބާގެ ޓޭބަލްތައް އިތުރަށް ކޮމްޕެކްޓް ކުރާށެވެ .
- <ޓޭބަލް ކްލާސް = "ޓޭބަލް ޓޭބަލް-ކޮންޑެންސްޑް" >
- ...
- </ޓޭބަލް> އެވެ
| # | ފުރަތަމަ ނަން | ފަހު ނަން | ޔޫޒަރނޭމް |
|---|---|---|---|
| 1 | މާކިން އެވެ | އޮޓޯ އެވެ | @mdo |
| 2 | ޔަޢުޤޫބުވެ | ތޯންޓަން އެވެ | @ފަލަ |
| 3 | ލެރީ ދަ ބާރޑް އެވެ | @twitter އިން ލިބޭނެއެވެ | |
ލިބެން ހުރި އެއްވެސް ކްލާހެއް ބޭނުންކޮށްގެން ތަފާތު ލޫކްސް ހޯދުމަށްޓަކައި ޓޭބަލް ކްލާސްތަކުގެ ތެރެއިން އެއްވެސް ކްލާހެއް އެއްކޮށްލަން ހިތްހަމަޖެހިގެން އުޅެވޭނެއެވެ.
- <table class = "ޓޭބަލް-ސްޓްރައިޕްޑް ޓޭބަލް-ބޯޑަރޑް ޓޭބަލް-ކޮންޑެންސްޑް" >
- ...
- </ޓޭބަލް> އެވެ
| ފުރިހަމަ ނަން | |||
|---|---|---|---|
| # | ފުރަތަމަ ނަން | ފަހު ނަން | ޔޫޒަރނޭމް |
| 1 | މާކިން އެވެ | އޮޓޯ އެވެ | @mdo |
| 2 | ޔަޢުޤޫބުވެ | ތޯންޓަން އެވެ | @ފަލަ |
| 3 | ލެރީ ދަ ބާރޑް އެވެ | @twitter އިން ލިބޭނެއެވެ | |
ބޫޓްސްޓްރެޕްގައި ފޯމްތަކާ ބެހޭ އެންމެ ރަނގަޅު ބަޔަކީ މާކަޕްގައި ކިތަންމެ ވަރަކަށް ބިލްޑް ކުރިޔަސް ހުރިހާ އިންޕުޓްތަކާއި ކޮންޓްރޯލްތައް މޮޅު ވުމެވެ. އެއްވެސް މާބޮޑަށް އެޗްޓީއެމްއެލް ބޭނުން ނުވާ ނަމަވެސް، އެ އެޗްޓީއެމްއެލް ބޭނުންވާ ފަރާތްތަކަށް އަޅުގަނޑުމެން ޕެޓަރންތައް ފޯރުކޮށްދެމެވެ.
މިއަށްވުރެ ކޮމްޕްލިކޭޓެޑް ލޭއައުޓްތައް އަންނަނީ ފަސޭހައިން ސްޓައިލިންގ އާއި އިވެންޓް ބައިންޑިންގ އަށް ސުސިންކްޓް އަދި ސްކޭލް ކުރެވޭ ކްލާސްތަކާއެކު ކަމުން ކޮންމެ ފިޔަވަޅެއްގައި ވެސް ކަވަރ ކުރެވެއެވެ.
ބޫޓްސްޓްރެޕް އަށް ފޯމް ލޭއައުޓްގެ ހަތަރު ވައްތަރަކަށް ސަޕޯޓް ލިބެ އެވެ:
އެކި ވައްތަރުގެ ފޯމް ލޭއައުޓްތަކަށް މާކަޕް ކުރުމަށް ބައެއް ބަދަލުތައް ގެންނަން ޖެހޭ ނަމަވެސް ޚުދު ކޮންޓްރޯލްތައް ވެސް ހުރެ، އަމަލު ކުރަނީ އެއްގޮތަކަށެވެ.
ބޫޓްސްޓްރެޕްގެ ފޯމްތަކުގައި އިންޕުޓް، ޓެކްސްޓްއޭރިއާ، އަދި ތިބާ އުންމީދުކުރާ ސެލެކްޓް ފަދަ ހުރިހާ ބޭސް ފޯމް ކޮންޓްރޯލްތަކަށް ސްޓައިލްތައް ހިމެނެ އެވެ. އެކަމަކު އެޕެންޑެޑް އަދި ޕްރީޕެންޑެޑް އިންޕުޓްސް ފަދަ ގިނަ އަދަދެއްގެ ކަސްޓަމް ކޮމްޕޯނެންޓްތަކާއި ޗެކްބޮކްސްތަކުގެ ލިސްޓްތަކަށް ސަޕޯޓް ވެސް ލިބެ އެވެ.
ފޯމް ކޮންޓްރޯލްގެ ކޮންމެ ވައްތަރަކަށް ގޯސް، އިންޒާރު، އަދި ކާމިޔާބީ ފަދަ ސްޓޭޓްތައް ހިމަނާފައިވެއެވެ. އަދި ނުކުޅެދުންތެރިކަން ހުންނަ ކޮންޓްރޯލްތަކަށް ސްޓައިލްތައް ވެސް ހިމެނެ އެވެ.
ބޫޓްސްޓްރެޕް އިން އާންމު ވެބް ފޯމްތަކުގެ ހަތަރު ސްޓައިލަކަށް ސާދާ މާކަޕް އާއި ސްޓައިލްތައް ފޯރުކޮށްދެ އެވެ.
| ނަން | ކްލާސް | ތަފްޞީލު |
|---|---|---|
| ވަރުގަދަ (ޑިފޯލްޓް) . | .form-vertical (ނުޖެހޭ) |
ކޮންޓްރޯލްތަކުގެ މައްޗަށް ސްޓޭކްކޮށްފައިވާ، ކަނާތްފަރާތަށް އެލައިންކޮށްފައިވާ ލޭބަލްތައް |
| އިންލައިން | .form-inline |
ކޮމްޕެކްޓް ސްޓައިލަށް ލެފްޓް އެލައިންޑް ލޭބަލް އަދި އިންލައިން-ބްލޮކް ކޮންޓްރޯލްސް |
| ހޯދުން | .form-search |
އާދައިގެ ސަރޗް އެސްތެޓިކް އަކަށް އިތުރު ވަށައިގެންވާ ޓެކްސްޓް އިންޕުޓް |
| ދިގަށް | .form-horizontal |
ކޮންޓްރޯލްތަކާ އެއް ލައިނެއްގައި ކަނާތްފަރާތަށް، ވާތްފަރާތަށް އެލައިންކޮށްފައިވާ ލޭބަލްތައް ފްލޯޓް ކުރާށެވެ |
އިތުރު މާކަޕް ނުކޮށް ސްމާޓް އަދި ލައިޓްވޭޓް ޑިފޯލްޓް ކުރެވެއެވެ.
- <ފޯމް ކްލާސް = "ރަނގަޅު" >
- <label> ލޭބަލް ނަން </label>
- <input type = "text" class = "span3" ޕްލޭސްހޯލްޑަރ = "އެއްޗެއް ޓައިޕް ކުރާށެވެ..." >
- <span class = "help-block" > މިތަނުގައި ބްލޮކް ލެވެލްގެ އެހީތެރިކަމުގެ ލިޔުމުގެ މިސާލު. </span> އެވެ
- <label class = "ޗެކްބޮކްސް" >
- <input type = "checkbox" > އަހަރެން ޗެކްކޮށްލާށެވެ
- </label> އެވެ
- <button type = "ހުށަހެޅުން" class = "btn" > ހުށަހެޅުން </button>
- </form> އެވެ
.form-searchފޯމަށް އިތުރުކޮށް .search-queryއަދި input.
- <form class = "ރަނގަޅަށް ފޯމް-ހޯދުން" >
- <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-މީޑިއަމް ސަރޗް-ކުއަރީ" >
- <button type = "submit" class = "btn" > ހޯދުން </button>
- </form> އެވެ
.form-inlineފޯމް ކޮންޓްރޯލްތަކުގެ ވަރުގަދަ އެލައިންމަންޓާއި ސްޕޭސިންގ ފައިންސް ކުރުމަށް އިތުރުކުރުން .
- <ފޯމް ކްލާސް = "ރަނގަޅު ފޯމް-އިންލައިން" >
- <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-ސްމޯލް" ޕްލޭސްހޯލްޑަރ = "އީމެއިލް" >
- <އިންޕުޓް ޓައިޕް = "ޕާސްވޯޑް" ކްލާސް = "އިންޕުޓް-ކުޑަ" ޕްލޭސްހޯލްޑަރ = "ޕާސްވޯޑް" >
- <label class = "ޗެކްބޮކްސް" >
- <input type = "checkbox" > އަހަރެންގެ މަތިން ހަނދާން ކުރާށެވެ
- </label> އެވެ
- <button type = "submit" class = "btn" > ސައިން އިން </button>
- </form> އެވެ
ކަނާތްފަރާތުގައި ދައްކާފައިވަނީ އަޅުގަނޑުމެން ސަޕޯޓްކުރާ ހުރިހާ ޑިފޯލްޓް ފޯމް ކޮންޓްރޯލްތަކެކެވެ. މިއީ ބުލެޓް ޖަހާފައިވާ ލިސްޓެވެ.
މަތީގައިވާ މިސާލު ފޯމް ލޭއައުޓަށް ބަލާއިރު، މިއީ ފުރަތަމަ އިންޕުޓް އަދި ކޮންޓްރޯލް ގްރޫޕާ ގުޅިފައިވާ މާކަޕް އެވެ. އެ .control-group, .control-label, އަދި .controlsކްލާސްތައް ހުރިހާ ގޮތަކުން ވެސް ސްޓައިލިންގ އަށް ބޭނުންވެއެވެ.
- <ފޯމް ކްލާސް = "ފޯމް-ހޮރިޒޮންޓަލް" >
- <ފީލްޑްސެޓް> އެވެ
- <legend> ލެޖެންޑް ޓެކްސްޓް </legend>
- <div class = "ކޮންޓްރޯލް-ގްރޫޕް" >
- <label class = "control-label" for = "އިންޕުޓް01" > ޓެކްސްޓް އިންޕުޓް </label>
- <div class = "ކޮންޓްރޯލްސް" >
- <އިންޕުޓް ޓައިޕް = "ޓެކްސްޓް" ކްލާސް = "އިންޕުޓް-އެކްސްލާޖް" id = "އިންޕުޓް01" >
- <p class = "help-block" > އެހީތެރިކަމުގެ ލިޔުމަށް ތާއީދުކުރުން </p>
- </div> އެވެ
- </div> އެވެ
- </ފީލްޑްސެޓް> އެވެ
- </form> އެވެ
disabledބޫޓްސްޓްރެޕްގައި ބްރައުޒާ ސަޕޯޓްކުރާ ފޯކަސްޑް އަދި ސްޓޭޓްސް އަށް ސްޓައިލްތައް ހިމެނެ އެވެ . އަޅުގަނޑުމެން ޑިފޯލްޓް ވެބްކިޓް ނައްތާލައި އޭގެ ބަދަލުގައި outlineއޭ އަށް އެޕްލައި ކުރަން .box-shadow:focus
އަދި ގޯސްތަކާއި، އިންޒާރުތަކާއި، ކާމިޔާބީއަށް ވެލިޑޭޝަން ސްޓައިލްތައް ވެސް ހިމެނެ އެވެ. ބޭނުން ކުރުމަށްޓަކައި، ވަށައިގެންވާ ކްލާސް އަށް އެރަރ ކްލާސް އިތުރު ކުރާށެވެ .control-group.
- <ފީލްޑްސެޓް
- class = "ކޮންޓްރޯލް-ގްރޫޕް އެރަރ" >
- ...
- </ފީލްޑްސެޓް> އެވެ
އިންޕުޓް ގްރޫޕްތަކުން- އެޕެންޑް ނުވަތަ ޕްރީޕެންޑް ޓެކްސްޓާއެކު- ތިބާގެ އިންޕުޓްތަކަށް އިތުރު ކޮންޓެކްސްޓް ދިނުމަށް ފަސޭހަ ގޮތެއް ލިބިގެންދެއެވެ. މޮޅު މިސާލުތަކުގެ ތެރޭގައި ޓްވިޓަރ ޔޫޒަރނޭމްތަކަށް @ ނިޝާން ނުވަތަ ފައިނޭންސްއަށް $ ނިޝާން ހިމެނެއެވެ.
v1.4 އާ ހަމައަށް ބޫޓްސްޓްރެޕް އަށް ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތައް ސްޓޭކް ކުރުމަށްޓަކައި ވަށައިގެން އިތުރު މާކަޕް ކުރަން ޖެހުނެވެ. މިހާރު، އެއީ ސާދާ ކަމެއް ތަކުރާރު ކުރުމަކީ <label class="checkbox">ދަޓް ރެޕްސް ދަ <input type="checkbox">.
އަދި އިންލައިން ޗެކްބޮކްސް އާއި ރޭޑިއޯ އަށް ވެސް ސަޕޯޓް ކުރެ އެވެ. ހަމައެކަނި .inlineއެއްވެސް .checkboxނުވަތަ އަށް އިތުރުކޮށްލާފައި .radioތިޔަ ނިމުނީ.
އިންލައިން ފޯމެއްގައި ޕްރީޕެންޑް ނުވަތަ އެޕެންޑް އިންޕުޓްތައް ބޭނުންކުރުމަށްޓަކައި، .add-onއަދި inputއެއް ލައިނެއްގައި، ޖާގައެއް ނެތި ބެހެއްޓުން ޔަޤީންކުރައްވާށެވެ.
ފޯމް އިންޕުޓްތަކަށް އެހީ ޓެކްސްޓް އިތުރުކުރުމަށްޓަކައި، އިންޕުޓް އެލިމެންޓަށްފަހު އިންލައިން ހެލްޕް ޓެކްސްޓް ވިތު <span class="help-inline">ނުވަތަ ހެލްޕް ޓެކްސްޓް ބްލޮކް ވިތު ހިމަނާށެވެ.<p class="help-block">
ކޮންމެ އައިކޮނަކަށް އިތުރު ރިކުއެސްޓަކަށް ހެދުމުގެ ބަދަލުގައި، އަޅުގަނޑުމެން އެތަކެތި ކޮމްޕައިލް ކޮށްފައި މިވަނީ ސްޕްރައިޓަކަށް- އެއް ފައިލްގައި ހުންނަ ތަސްވީރުތަކުގެ ޖަމާއަތެއް ކަމުގައިވާ ސީއެސްއެސް ބޭނުންކޮށްގެން ތަސްވީރުތައް ޕޮޒިޝަން ކުރުމަށް background-position. މިއީ ހަމަ އަޅުގަނޑުމެން ޓްވިޓަރ ޑޮޓްކޮމްގައި ބޭނުންކުރާ ގޮތް ކަމަށާއި މިއީ އަޅުގަނޑުމެންނަށް ރަނގަޅަށް މަސައްކަތް ކޮށްފައިވާ ގޮތް ކަމަށް ވެސް ވިދާޅުވިއެވެ.
ހުރިހާ އައިކޮންސް ކްލާސްތަކެއްގައި ވެސް ޕްރިފިކްސްކޮށްފައިވަނީ .icon-ރަނގަޅު ނަންސްޕޭސިންގ އާއި ސްކޯޕިންގ އަށްޓަކައި، އަޅުގަނޑުމެންގެ އެހެން ކޮމްޕޯނެންޓްތަކާ ވަރަށް ވައްތަރު ގޮތަކަށެވެ. މިއީ އެހެން ވަސީލަތްތަކާ ފުށުއެރުންތަކުން ސަލާމަތްވުމަށް އެހީތެރިވެދޭނެ ކަމެކެވެ.
ގްލައިފިކޮންސް އިން ވަނީ އަޅުގަނޑުމެންގެ އޯޕަން ސޯސް ޓޫލްކިޓްގައިވާ ހާފްލިންގްސް ސެޓް ބޭނުން ކުރުމުގެ ހުއްދަ ދީފައި، މިތަނުގައި ޑޮކްސްގައި ލިންކާއި ކްރެޑިޓެއް ފޯރުކޮށްދީފިހާ ހިނދަކު. ތިޔަބޭފުޅުންގެ ޕްރޮޖެކްޓްތަކުގައިވެސް ހަމަ އެގޮތަށް ކަންތައް ކުރުމަށް ވިސްނާލައްވާ.
ބޫޓްސްޓްރެޕް އިން <i>ހުރިހާ އައިކޮންތަކަށް ޓެގެއް ބޭނުންކުރި ނަމަވެސް އެ އައިކޮންތަކުގައި ކޭސް ކްލާހެއް ނެތް- ހަމައެކަނި ޝެއަރޑް ޕްރިފިކްސްއެކެވެ. ބޭނުން ކުރުމަށްޓަކައި ތިރީގައިވާ ކޯޑް ގާތްގަނޑަކަށް ކޮންމެ ތަނެއްގައި ވެސް ބަހައްޓާށެވެ.
- <i ކްލާސް = "އައިކޮން-ހޯދުން" ></i>
އަދި އިންވާޓްޑް (ހުދު) އައިކޮންތަކަށް ވެސް ސްޓައިލްތައް ލިބެން ހުރެއެވެ، އިތުރު އެއް ކްލާހަކާއެކު ތައްޔާރުކޮށްފައި ހުރެއެވެ:
- <i class = "އައިކޮން-ހޯދުން އައިކޮން-ހުދު" ></i>
ތިބާގެ އައިކޮންތަކަށް 140 ކްލާސް އިންތިހާބު ކުރެވޭނެ އެވެ. ހަމައެކަނި <i>ރަނގަޅު ކްލާސްތަކާއެކު ޓެގެއް އިތުރުކޮށްލުމުން ތިޔަ ސެޓް ވެއްޖެއެވެ. ފުރިހަމަ ލިސްޓް sprites.less އިން ނުވަތަ ހަމަ މިތަނުން މި ލިޔުމުން ލިބިވަޑައިގަންނަވާނެއެވެ.
ހެޑްސް އަޕް! <i>ބަޓަން ނުވަތަ ނެވް ލިންކްތަކުގައި ވާ ފަދައިން ލިޔުމުގެ ސްޓްރިންގްތަކުގެ ކައިރީގައި ބޭނުންކުރާއިރު، ރަނގަޅު ޖާގައެއް ބެހެއްޓުމަށްޓަކައި ޓެގްގެ ފަހަތުގައި ޖާގައެއް ދޫކޮށްލުން ޔަގީން ކުރައްވާށެވެ .
އައިކޮންތަކަކީ މޮޅު އެއްޗެހި ނަމަވެސް އެތަކެތި ބޭނުންކުރާނީ ކޮންތާކު ހެއްޔެވެ؟ ތިރީގައި މިވަނީ މަދު ޚިޔާލުތަކެކެވެ.
މުހިންމު ގޮތެއްގައި <i>ޓެގް ޖަހާލެވޭ ކޮންމެ ތަނެއްގައި އައިކޮން ޖަހާލެވޭނެ އެވެ.
އެއީ ބަޓަންތަކުގައި، ޓޫލްބާރަކަށް ބަޓަން ގްރޫޕްތަކުގައި، ނޭވިގޭޝަންގައި، ނުވަތަ ޕްރީޕެންޑް ފޯމް އިންޕުޓްތަކުގައި ބޭނުންކުރާށެވެ.