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

އެޗްޓީއެމްއެލް5 ޑޮކްޓައިޕް

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

<!DOCTYPE html>
<html lang="en">
  ...
</html>

މޮބައިލް ފުރަތަމަ

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

ޓައިޕޮގްރަފީ އާއި ލިންކްތައް

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

ސެޓް background-color: #fff;އޮން ދަ...body
އަޅުގަނޑުމެންގެ ޓައިޕޮގްރަފިކް ބޭސްގެ ގޮތުގައި @font-family-base, @font-size-base, އަދި އެޓްރިބިއުޓްސް ބޭނުން ކުރާށެވެ@line-height-base
ގްލޯބަލް ލިންކް ކުލަ މެދުވެރިކޮށް ސެޓްކޮށް @link-colorލިންކް އަންޑަލައިންސް އެކަނި އޮން ކޮށްލާށެވެ:hover

މި ސްޓައިލްތައް އެތެރެއިން ފެންނާނެއެވެ scaffolding.less.

ނޯމަލައިޒް ކުރުން.css

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

ކޮންޓެއިނަރުތައް

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

.containerރެސްޕޮންސިވް ފިކްސްޑް ވިޑްތް ކޮންޓެއިނަރަކަށް ބޭނުން ކުރާށެވެ .

<div class="container">
  ...
</div>

.container-fluidތިބާގެ ވިއުޕޯޓްގެ މުޅި ފުޅާމިނުގައި ފުޅާކޮށްފައިވާ ފުލް ވިޑްތް ކޮންޓެއިނަރަކަށް ބޭނުން ކުރާށެވެ .

<div class="container-fluid">
  ...
</div>

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

ތަޢާރަފު

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

ރަނގަޅަށް އެލައިންކޮށް ޕެޑިންގ ހެދުމަށްޓަކައި ސަފުތައް .container(ފިކްސްޑް-ވިޑްތް) ނުވަތަ (ފުލް-ވިޑްތް) ގެ ތެރޭގައި ބަހައްޓަންވާނެއެވެ..container-fluid
ކޮލަމްތަކުގެ ހޮރައިޒޮންޓަލް ގްރޫޕްތައް އުފެއްދުމަށް ރޯތައް ބޭނުން ކުރާށެވެ.
ކޮންޓެންޓް ކޮލަމްތަކުގެ ތެރޭގައި ބަހައްޓަންވާނެ ކަމަށާއި، ހަމައެކަނި ކޮލަމްތަކަކީ ސަފުތަކުގެ ވަގުތީ ދަރިން ކަމަށް ވެދާނެއެވެ.
ގްރިޑް ލޭއައުޓްތައް އަވަހަށް ހެދުމަށްޓަކައި ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް ފަދަ .rowއަދި .col-xs-4ލިބެން ހުރެއެވެ. އަދި މާ ސެމެންޓިކް ލޭއައުޓްތަކަށް ވެސް މަދު މިކްސިންސް ބޭނުން ކުރެވިދާނެ އެވެ.
ކޮލަމްތަކުން ގަޓަރސް (ކޮލަމް ކޮންޓެންޓާ ދެމެދު ހުންނަ ވަކިތަކެއް) އުފެދެނީ މެދުވެރިކޮށް padding. .rowއެ ޕެޑިންގ އޮފްސެޓް ކުރެވެނީ ފުރަތަމަ އަދި އެންމެ ފަހު ކޮލަމް އަށް ރޯތަކެއްގެ ގޮތުގައި s ގައިވާ ނެގެޓިވް މާރޖިން މެދުވެރިކޮށެވެ .
ނެގެޓިވް މާރޖިން އަކީ ތިރީގައިވާ މިސާލުތައް އައުޓްޑެންޓް ކުރެވޭ ސަބަބެވެ. އެއީ ގްރިޑް ކޮލަމްތަކުގެ ތެރޭގައި ހުންނަ ކޮންޓެންޓް ގްރިޑް ނޫން ކޮންޓެންޓާއެކު ލައިންކޮށްފައި ހުންނަ ގޮތަކަށެވެ.
ގްރިޑް ކޮލަމްތައް އުފައްދަނީ ސްޕަން ކުރަން ބޭނުންވާ ލިބެންހުރި ބާރަ ކޮލަމްގެ އަދަދު ކަނޑައަޅައިގެންނެވެ. މިސާލަކަށް އެއްވަރެއްގެ ތިން ކޮލަމް ބޭނުންކުރާނީ ތިން ކޮލަމް އެވެ .col-xs-4.
އެއް ސަފެއްގެ ތެރޭގައި 12 އަށްވުރެ ގިނަ ކޮލަމް ބަހައްޓާނަމަ، އިތުރު ކޮލަމްތަކުގެ ކޮންމެ ގްރޫޕެއް، އެއް ޔުނިޓެއްގެ ގޮތުގައި، އާ ރޮނގެއްގެ މައްޗަށް އޮޅާލާނެއެވެ.
ގްރިޑް ކްލާސްތައް ބްރޭކްޕޮއިންޓް ސައިޒްތަކަށްވުރެ ބޮޑު ނުވަތަ އެއާ އެއްވަރު ސްކްރީން ވިޑްތް ހުންނަ ޑިވައިސްތަކަށް އަމަލުކުރާއިރު، ކުދި ޑިވައިސްތަކަށް އަމާޒުކޮށްގެން ގްރިޑް ކްލާސްތައް އޯވަރރައިޑް ކުރެވެއެވެ. އެހެންކަމުން، މިސާލަކަށް އެއްވެސް .col-md-*ކްލާހެއް އެލިމެންޓަކަށް އެޕްލައި ކުރުމަކީ ހަމައެކަނި މީޑިއަމް ޑިވައިސްތަކުގައި އޭގެ ސްޓައިލިންގ އަށް އަސަރުކުރާނެ .col-lg-*ކަމެއް ނޫން ކަމަށާއި ކްލާހެއް ނެތްނަމަ ބޮޑެތި ޑިވައިސްތަކުގައި ވެސް އޭގެ ސްޓައިލިންގ އަށް އަސަރުކުރާނެ ކަމެކެވެ.

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

މީޑިއާގެ ސުވާލުތަކެވެ

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

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

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ގްރިޑް އޮޕްޝަންސް

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

	އިތުރު ކުދި ޑިވައިސްތައް ފޯނުތައް (<768px)	ކުދި ޑިވައިސްތައް ޓެބްލެޓް (≥768px)	މީޑިއަމް ޑިވައިސްތައް ޑެސްކްޓޮޕްސް (≥992px)	ބޮޑެތި ޑިވައިސްތައް ޑެސްކްޓޮޕްސް (≥1200px)
ގްރިޑް ސުލޫކު	ހުރިހާ ވަގުތެއްގައިވެސް ހޮރައިޒޮންޓަލް ކޮށްލާށެވެ	ފަށަން ކޮލަޕްސް ކޮށްފައި، ބްރޭކްޕޮއިންޓްތަކުގެ މަތީގައި ހޮރައިޒޮންޓަލް ކޮށްލާފައި
ކޮންޓެއިނަރުގެ ފުޅާމިން	އެއްވެސް އެއްޗެއް ނެތް (އޮޓޯ)	750ޕީއެކްސް އެވެ	970ޕީއެކްސް އެވެ	1170ޕީއެކްސް އެވެ
ކްލާސް ޕްރިފިކްސް	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# ކޮލަމްތަކުގެ	12
ކޮލަމް ފުޅާމިން	އޮޓޯ	~62px އެވެ	~81px އެވެ	~97px އެވެ
ގަޓަރުގެ ފުޅާމިން	30px (ކޮލަމެއްގެ ކޮންމެ ފަރާތެއްގައި 15px)
ނެސްޓެބަލް އެވެ	އާނ
އޮފްސެޓްތަކެވެ	އާނ
ކޮލަމް އޯޑަރު ކުރުން	އާނ

މިސާލު: ސްޓޭކްޑް-ޓު-ހޮރައިޒޮންޓަލް

ގްރިޑް ކްލާސްތަކުގެ އެއް ސެޓެއް ބޭނުންކޮށްގެން .col-md-*، ޑެސްކްޓޮޕް (މީޑިއަމް) ޑިވައިސްތަކުގައި ހޮރައިޒޮންޓަލް ވުމުގެ ކުރިން މޯބައިލް ޑިވައިސްތަކާއި ޓެބްލެޓް ޑިވައިސްތަކުގައި (އިތުރު ކުޑަ އިން ކުޑަ ރޭންޖް) ސްޓޭކްކޮށް ފެށޭ އަސާސީ ގްރިޑް ސިސްޓަމެއް އުފެއްދިދާނެއެވެ. އެއްވެސް ތަނެއްގައި ގްރިޑް ކޮލަމްތައް ބަހައްޓާށެވެ .row.

.ކޮލް-އެމްޑީ-1

.ކޮލް-އެމްޑީ-8

.ކޮލް-އެމްޑީ-4

.ކޮލް-އެމްޑީ-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

މިސާލު: ފްލޫޑް ކޮންޓެއިނަރ

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

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

މިސާލު: މޯބައިލް އަދި ޑެސްކްޓޮޕް

ތިބާގެ ކޮލަމްތައް ފަސޭހައިން ކުދި ޑިވައިސްތަކުގައި ސްޓޭކް ވާކަށް ބޭނުމެއް ނޫން ހެއްޔެވެ؟ .col-xs-* .col-md-*ތިމާގެ ކޮލަމްތަކަށް އިތުރުކޮށްގެން އިތުރު ކުދި އަދި މެދު ޑިވައިސް ގްރިޑް ކްލާސްތައް ބޭނުން ކުރާށެވެ. އެ ހުރިހާ ކަމެއް ހިނގާ ގޮތުގެ ރަނގަޅު ޚިޔާލެއް ހޯދުމަށް ތިރީގައިވާ މިސާލު ބައްލަވާށެވެ.

.ކޮލް-އެކްސްއެސް-12 .ކޮލް-އެމްޑީ-8

.ކޮލް-އެކްސް-6 .ކޮލް-އެމްޑީ-4

.ކޮލް-އެކްސް-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

މިސާލު: މޯބައިލް، ޓެބްލެޓް، ޑެސްކްޓޮޕް

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

.ކޮލް-އެކްސްއެސް-12 .ކޮލް-އެސްއެމް-6 .ކޮލް-އެމްޑީ-8

.ކޮލް-އެކްސް-6 .ކޮލް-އެމްޑީ-4

.ކޮލް-އެކްސް-6 .ކޮލް-އެސްއެމް-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

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

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

.ކޮލް-އެކްސް-9

.col-xs-4
9 + 4 = 13 > 12 ކަމުން، މި 4 ކޮލަމް ފުޅާ ޑިވް އެއް ޖެހިޖެހިގެން ހުންނަ ޔުނިޓެއްގެ ގޮތުގައި އާ ލައިނެއްގެ މައްޗަށް އޮޅާލައެވެ.

.col-xs-6
އޭގެ ފަހުން އަންނަ ކޮލަމްތައް އާ ލައިނާ އެއްވަރަށް ކުރިއަށް ގެންދެއެވެ.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

ރެސްޕޮންސިވް ކޮލަމް ރީސެޓް ވެއެވެ

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

.col-xs-6 .col-sm-3
ވިއުޕޯޓްގެ ސައިޒު ބަދަލުކުރުން ނުވަތަ މިސާލަކަށް ފޯނުން ޗެކްކޮށްލާށެވެ.

.ކޮލް-އެކްސްއެސް-6 .ކޮލް-އެސްއެމް-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

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

.col-md-offset-*ކްލާސްތައް ބޭނުންކޮށްގެން ކޮލަމްތައް ކަނާތްފަރާތަށް ގެންދާށެވެ . މި ކްލާސްތަކުން ކޮލަމެއްގެ ކަނާތްފަރާތުގެ މާރޖިން *ކޮލަމްތަކުން އިތުރުކޮށްދެއެވެ. މިސާލަކަށް ހަތަރު ކޮލަމެއްގެ މައްޗަށް .col-md-offset-4ދަތުރުކުރެއެވެ ..col-md-4

.ކޮލް-އެމްޑީ-4

.ކޮލް-އެމްޑީ-4 .ކޮލް-އެމްޑީ-އޮފްސެޓް-4

.ކޮލް-އެމްޑީ-3 .ކޮލް-އެމްޑީ-އޮފްސެޓް-3

.ކޮލް-އެމްޑީ-6 .ކޮލް-އެމްޑީ-އޮފްސެޓް-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0އަދި ކްލާސްތަކާއެކު ތިރީ ގްރިޑް ޓިއަރތަކުން އޮފްސެޓްތައް އޯވަރރައިޑް ކުރެވިދާނެއެވެ .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

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

ޑިފޯލްޓް ގްރިޑާއެކު ތިމާގެ ކޮންޓެންޓް ނެސްޓް ކުރުމަށްޓަކައި، މިހާރު ހުރި ކޮލަމެއްގެ ތެރޭގައި އާ .rowއަދި ސެޓެއްގެ ކޮލަމްތައް އިތުރުކުރުން . ނެސްޓްކޮށްފައިވާ ރޯތަކުގައި 12 ނުވަތަ އެއަށްވުރެ މަދު ކޮލަމްތަކުގެ ސެޓެއް ހިމަނަންވާނެއެވެ (ލިބެންހުރި ހުރިހާ 12 ކޮލަމްއެއް ބޭނުންކުރަން ނުޖެހެއެވެ)..col-sm-*.col-sm-*

ލެވެލް 1: .col-sm-9

ލެވެލް 2: .col-xs-8 .col-sm-6

ލެވެލް 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

ކޮލަމް އޯޑަރު ކުރުން

އަޅުގަނޑުމެންގެ ބިލްޓް-އިން ގްރިޑް ކޮލަމްތަކުގެ ތަރުތީބު ފަސޭހައިން ބަދަލުކޮށްލާނީ .col-md-push-*އަދި .col-md-pull-*މޮޑިފައި ކްލާސްތަކާއެކުގައެވެ.

.ކޮލް-އެމްޑީ-9 .ކޮލް-އެމްޑީ-ޕުޝް-3

.ކޮލް-އެމްޑީ-3 .ކޮލް-އެމްޑީ-ޕުލް-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

މިކްސިންސް އާއި ވެރިއޭބަލްސް މަދުވުން

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

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

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

މިކްސިންސް އެވެ

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

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

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ސުރުޚީތައް

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

ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 36px
ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 30px
ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 24px
ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 18px
ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 14px
ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ	ސެމީބޯލްޑް 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>ޖެނެރިކް ޓެގެއް ނުވަތަ .smallކްލާހަކުން ކޮންމެ ސުރުޚީއެއްގައި ވެސް ލުއި، ދެވަނަ ދަރަޖައިގެ ލިޔުން އުފެއްދުން .

ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ބޮޑީ ކޮޕީ

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

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

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

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

<p>...</p>

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

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

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

<p class="lead">...</p>

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

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

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

ފާހަގަކޮށްފައިވާ ލިޔުން

އެހެން ކޮންޓެކްސްޓެއްގައި އޭގެ ރިލެވަންސްގެ ސަބަބުން ޓެކްސްޓެއްގެ ރަންއެއް ހައިލައިޓް ކުރުމަށްޓަކައި، <mark>ޓެގް ބޭނުން ކުރާށެވެ.

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

You can use the mark tag to <mark>highlight</mark> text.

ޑިލީޓް ކޮށްފައިވާ ލިޔުން

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

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

<del>This line of text is meant to be treated as deleted text.</del>

ސްޓްރައިކްތްރޫ ޓެކްސްޓް

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

~~މި ލިޔުމުގެ ސަފުހާއަކީ މިހާރު ޞައްޙަ ނޫން ސަފުހާއެއްގެ ގޮތުގައި ބަލައިގަތުމަށް ނިންމާފައިވާ ސަފުހާއެކެވެ.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

އިންސަރޓް ކޮށްފައިވާ ލިޔުން

ލިޔުމަށް އިތުރު ތަކެތި ދައްކާލުމަށްޓަކައި <ins>ޓެގް ބޭނުން ކުރާށެވެ.

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

<ins>This line of text is meant to be treated as an addition to the document.</ins>

އަންޑަލައިން ކޮށްފައިވާ ލިޔުން

ޓެކްސްޓް އަންޑަލައިން ކުރުމަށް <u>ޓެގް ބޭނުން ކުރާށެވެ.

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

<u>This line of text will render as underlined</u>

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

ކުޑަ ލިޔުމެކެވެ

އިންލައިން ނުވަތަ ޓެކްސްޓް ބްލޮކްތަކަށް ޑީ-އެމްފެސިސް ކުރުމަށްޓަކައި، <small>ޓެކްސްޓް ބެލެނިވެރިޔާގެ ސައިޒުގެ %85 އަށް ސެޓް ކުރުމަށް ޓެގް ބޭނުން ކުރާށެވެ. font-sizeހެޑިންގ އެލިމެންޓްތަކަށް ނެސްޓް ކުރެވިފައިވާ އެލިމެންޓްތަކަށް އަމިއްލައަށް ލިބެއެވެ <small>.

.smallނުވަތަ އެއްވެސް އެއްޗެއްގެ ބަދަލުގައި އިންލައިން އެލިމެންޓެއް ބޭނުންކުރެވިދާނެއެވެ <small>.

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

<small>This line of text is meant to be treated as fine print.</small>

ބޯލްޑް

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

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

<strong>rendered as bold text</strong>

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

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

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

<em>rendered as italicized text</em>

ބަދަލު އުފެއްދުންތައް

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

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

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

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

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

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

ޖަސްޓިފައިޑް ޓެކްސްޓް.

ރެޕް ޓެކްސްޓެއް ނެތެވެ.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ޓްރާންސްފޯމަޝަން ކްލާސްތަކެވެ

ޓެކްސްޓް ކެޕިޓަލައިޒޭޝަން ކްލާސްތަކާއެކު ކޮމްޕޯނެންޓްތަކަށް ޓެކްސްޓް ބަދަލުކުރުން.

ކުޑަކުޑަ ލިޔުން.

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

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

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

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

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

އަސާސީ ކުރުކުރުން

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

<abbr title="attribute">attr</abbr>

އިނިޝިއަލިޒަމް

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

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

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

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

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

ޓްވިޓަރ، އިންކް
1355 މާކެޓް ސްޓްރީޓް، ސުއިޓް 900
ސެން ފްރެންސިސްކޯ، ސީއޭ 94103
ޕީ: (123) 456-7890

ފުރިހަމަ ނަން
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

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

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

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

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

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

ސްޓޭންޑަރޑެއްގެ މައްޗަށް ސާދާ ތަފާތުތަކަށް ސްޓައިލާއި ކޮންޓެންޓް ބަދަލުކުރުން <blockquote>.

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

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

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

ސޯސް ޓައިޓަލްގައި މަޝްހޫރު މީހެކެވެ

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

.blockquote-reverseކަނާތްފަރާތަށް އެލައިންކޮށްފައިވާ ކޮންޓެންޓާއެކު ބްލޮކްކޯޓަކަށް އިތުރުކުރުން .

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

ސޯސް ޓައިޓަލްގައި މަޝްހޫރު މީހެކެވެ

<blockquote class="blockquote-reverse">
  ...
</blockquote>

ލިސްޓްތައް

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

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

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

<ul>
  <li>...</li>
</ul>

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

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

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

<ol>
  <li>...</li>
</ol>

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

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

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

އިންލައިން

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

ލޮރެމް އިޕްސަމް އެވެ
ފޭސެލަސް އިއަކުލިސް އެވެ
ނޫއްލާ ވޮލޫޓްޕަޓް

<ul class="list-inline">
  <li>...</li>
</ul>

ތަފްޞީލު

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

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

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

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

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

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

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

އޮޓޯ ޓްރަންކޭޓިންގ އެވެ

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

އިންލައިން

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

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

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ޔޫޒަރ އިންޕުޓް

<kbd>އާންމުކޮށް ކީބޯޑް މެދުވެރިކޮށް އެންޓަރ ކުރާ އިންޕުޓް ދައްކާލުމަށް ބޭނުންކުރާށެވެ .

ޑައިރެކްޓަރީތައް ބަދަލުކުރުމަށްޓަކައި cdއޭގެ ފަހުން ޑައިރެކްޓަރީގެ ނަން ލިޔެލާށެވެ.
ސެޓިންގސް އެޑިޓް ކުރުމަށް ފިއްތާލާށެވެ ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

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

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

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

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

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

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

ވެރިއޭބަލްތައް ދައްކާލުމަށްޓަކައި <var>ޓެގް ބޭނުން ކުރާށެވެ.

y = m x + ބ

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

ސާމްޕަލް އައުޓްޕުޓް

ޕްރޮގްރާމަކުން ލިބޭ ސާމްޕަލް އައުޓްޕުޓް ބްލޮކްތައް ދައްކާލުމަށް <samp>ޓެގް ބޭނުން ކުރާށެވެ.

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

<samp>This text is meant to be treated as sample output from a computer program.</samp>

އަސާސީ މިސާލެވެ

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

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

<table class="table">
  ...
</table>

ސްޓްރައިޕްޑް ރޯސްތަކެކެވެ

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

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

ސްޓްރައިޕްޑް ޓޭބަލްތައް ސްޓައިލް ކުރެވެނީ :nth-childއިންޓަރނެޓް އެކްސްޕްލޯރަރ 8 ގައި ނުލިބޭ ސީއެސްއެސް ސެލެކްޓަރ މެދުވެރިކޮށެވެ.

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

<table class="table table-striped">
  ...
</table>

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

.table-borderedތާވަލާއި ގޮޅިތަކުގެ ހުރިހާ ފަރާތެއްގައި ހުންނަ ބޯޑަރުތަކަށް އިތުރުކުރުން .

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

<table class="table table-bordered">
  ...
</table>

ހޯވަރ ރޯސް

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

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

<table class="table table-hover">
  ...
</table>

ކޮންޑެންސްޑް މޭޒެވެ

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

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

<table class="table table-condensed">
  ...
</table>

ކޮންޓެކްސްޗުއަލް ކްލާސްތަކެވެ

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

ކްލާސް	ތަފްޞީލު
`.active`	ވަކި ރޯއަކަށް ނުވަތަ ސެލްއަކަށް ހޯވަރ ކުލަ ޖަހައެވެ
`.success`	ކާމިޔާބު ނުވަތަ ހެޔޮ ޢަމަލެއް ހިންގިކަން އަންގައިދެއެވެ
`.info`	ނިއުޓްރަލް މަޢުލޫމާތު ދޭ ބަދަލެއް ނުވަތަ ޢަމަލެއް ދައްކުވައިދެއެވެ
`.warning`	ސަމާލުކަން ދޭން ޖެހިދާނެ އިންޒާރެއް އިޝާރާތް ކުރެއެވެ
`.danger`	ނުރައްކާތެރި ނުވަތަ ނޭދެވޭ ޢަމަލެއް ހިންގިދާނެކަން އަންގައިދެއެވެ

#	ކޮލަމް ސުރުޚީ	ކޮލަމް ސުރުޚީ	ކޮލަމް ސުރުޚީ
1	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
2	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
3	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
4	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
5	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
6	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
7	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
8	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް
9	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް	ކޮލަމް ކޮންޓެންޓް

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

ޓޭބަލް ރޯއަކަށް ނުވަތަ ވަކިވަކި ސެލްއަކަށް މާނަ އިތުރުކުރުމަށް ކުލަ ބޭނުންކުރުމަކީ ހަމައެކަނި ވިޝުއަލް އިންޑިކޭޝަނެއް ލިބިގެންދާ ކަމެއް ކަމަށާއި، އެއީ އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް - ސްކްރީން ރީޑަރސް ފަދަ - ފޯރުކޮށްދޭނެ ކަމެއް ނޫން ކަމަށެވެ. ކުލައިން ދައްކުވައިދޭ މަޢުލޫމާތަކީ ކޮންޓެންޓުން ޚުދު (ކަމާބެހޭ ތާވަލު ރޯ/ސެލްގައިވާ ފެންނަ ލިޔުން) ސާފު މަޢުލޫމާތެއްކަން، ނުވަތަ ކްލާހާއެކު ފޮރުވިފައިވާ އިތުރު ލިޔުން ފަދަ ބަދަލު ގޮތްތަކުން ހިމަނާފައިވާ މަޢުލޫމާތެއްކަން ޔަޤީންކުރުން .sr-only.

ޖަވާބުދާރީވާ މޭޒުތަކެވެ

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

ވަރުގަދަ ކްލިޕް/ޓްރަންކޭޝަން

ރެސްޕޮންސިވް ޓޭބަލްތަކުގައި ބޭނުންކުރަނީ overflow-y: hidden, މިއީ ޓޭބަލްގެ ތިރީ ނުވަތަ މަތީ ފަރާތްތަކުން ބޭރަށް ދާ ކޮންމެ ކޮންޓެންޓެއް ކްލިޕްކޮށްލާ އެއްޗެކެވެ. ޚާއްޞަކޮށް، މިއީ ޑްރޮޕްޑައުން މެނޫތަކާއި އެހެނިހެން ތިންވަނަ ފަރާތެއްގެ ވިޖެޓްތައް ކްލިޕް އޮފް ކުރެވޭނެ ގޮތެކެވެ.

ފަޔަރފޮކްސް އަދި ފީލްޑްސެޓްތަކެވެ

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

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

އިތުރު މަޢުލޫމާތު ހޯދުމަށް، މި ސްޓޭކް އޯވަރފްލޯ ޖަވާބު ކިޔައިލައްވާށެވެ .

#	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ
1	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް
2	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް
3	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް

#	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ	ތާވަލުގެ ސުރުޚީ
1	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް
2	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް
3	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް	ޓޭބަލް ސެލް

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

އަސާސީ މިސާލެވެ

އިންޑިވިޖުއަލް ފޯމް ކޮންޓްރޯލްތަކަށް އޮޓޮމެޓިކުން ކޮންމެވެސް ވަރެއްގެ ގްލޯބަލް ސްޓައިލިންގއެއް ލިބެއެވެ. ހުރިހާ ޓެކްސްޗުއަލް <input>, <textarea>, އަދި <select>އެލިމެންޓްސް އާއެކު ޑިފޯލްޓްކޮށް .form-controlސެޓްކޮށްފައި ހުރެއެވެ . އެންމެ ރަނގަޅު ޖާގަ ހޯދުމަށްޓަކައި width: 100%;ލޭބަލްތަކާއި ކޮންޓްރޯލްތައް ވަށާލާށެވެ ..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

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

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

ކަނާތްފަރާތުގައި ހުންނަ އަދި އިންލައިން ބްލޮކް ކޮންޓްރޯލްތަކަށް .form-inlineތިބާގެ ފޯމަށް އިތުރުކުރައްވާ (އެއީ އަކަށް ވާން ނުޖެހޭ އެއްޗެކެވެ). މިއީ ހަމައެކަނި މަދުވެގެން 768px ފުޅާމިނުގައި ހުންނަ ވިއުޕޯޓްތަކުގެ ތެރޭގައި ހުންނަ ފޯމްތަކަށެވެ.<form>

ކަސްޓަމް ވިޑްތްސް ބޭނުންވެދާނެއެވެ

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

އަބަދުވެސް ލޭބަލްތައް އިތުރުކުރާށެވެ

ކޮންމެ އިންޕުޓަކަށް ލޭބަލް ނުހިމަނާނަމަ ސްކްރީން ރީޑަރުންނަށް ތިބާގެ ފޯމްތަކުގައި އުނދަގޫވާނެ އެވެ. .sr-onlyމި އިންލައިން ފޯމްތަކަށް ކްލާސް ބޭނުންކޮށްގެން ލޭބަލްތައް ފޮރުވޭނެއެވެ . އެހީތެރި ޓެކްނޮލޮޖީތަކަށް ލޭބަލް ފޯރުކޮށްދިނުމަށް އިތުރު ބަދަލު ގޮތްތަކެއް އެބަހުއްޓެވެ، aria-label, aria-labelledbyނުވަތަ titleއެޓްރިބިއުޓް ފަދަ ގޮތްތައް ވެސް އެބަހުއްޓެވެ. މިއިން އެއްވެސް އެއްޗެއް ނެތްނަމަ، ސްކްރީން ރީޑަރުންނަށް އެޓްރިބިއުޓް ބޭނުންކުރުމަށް placeholderރިޒޯޓްކުރެވިދާނެ، އެޓްރިބިއުޓް ހުރިނަމަ، ނަމަވެސް placeholderއެހެން ލޭބަލިންގ މެތޯޑްތަކުގެ ބަދަލުގައި ބޭނުންކުރުމަކީ ރަނގަޅު ކަމެއް ނޫންކަން ފާހަގަކުރައްވާށެވެ.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

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

ފޯމަށް އިތުރުކޮށްގެން ހޮރައިޒޮންޓަލް ލޭއައުޓެއްގައި ފޯމް ކޮންޓްރޯލްތަކުގެ ލޭބަލްތަކާއި ގްރޫޕްތައް އެލައިން ކުރުމަށް ބޫޓްސްޓްރެޕްގެ ކުރިން ކަނޑައެޅިފައިވާ ގްރިޑް ކްލާސްތައް ބޭނުންކުރުން .form-horizontal(އެއީ ކޮންމެހެން ވާން ޖެހޭ ކަމެއް ނޫން <form>). އެކަން ކުރުމުން .form-groupސް އަށް ބަދަލު އަންނަނީ ގްރިޑް ރޯތަކެއްގެ ގޮތުގައި ކަންތައް ކުރުމަށް، އެހެންކަމުން .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

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

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

އިންޕުޓްސް

އެންމެ އާންމު ފޯމް ކޮންޓްރޯލް، ޓެކްސްޓް ބެސްޓް އިންޕުޓް ފީލްޑްސް. ހުރިހާ އެޗްޓީއެމްއެލް5 ވައްތަރަކަށް ސަޕޯޓް ހިމެނޭ: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, އަދި color.

ޓައިޕް ޑިކްލެރޭޝަން ބޭނުންވެއެވެ

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

<input type="text" class="form-control" placeholder="Text input">

އިންޕުޓް ގްރޫޕްތަކެވެ

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

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

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

<textarea class="form-control" rows="3"></textarea>

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

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

ޑިސެބިލްޑް ޗެކްބޮކްސްތަކާއި ރޭޑިއޯތަކަށް ސަޕޯޓް ކުރެވޭ ނަމަވެސް، ބެލެނިވެރިޔާގެ ހޯވަރ ކުރުމުގައި "ހުއްދަ ނުކުރެވޭ" ކަރސަރެއް ފޯރުކޮށްދިނުމަށްޓަކައި، ބެލެނިވެރިޔާއަށް ކްލާސް <label>އިތުރުކުރަން ޖެހޭނެއެވެ , , , ނުވަތަ ..disabled.radio.radio-inline.checkbox.checkbox-inline

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

އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ

އިޚްތިޔާރު ދެ ޑިސެބިލް ވެއްޖެއެވެ

އިޚްތިޔާރު އެއްކަމަކީ މިއާއި އެއީ- އެއީ މޮޅު ކަމެއް ކަމުގައި ވާންވީ ސަބަބު ޔަގީންކޮށް ހިމަނާށެވެ

އޮޕްޝަން ދެ އަކީ އެހެން އެއްޗަކަށް ވެދާނެ ކަމަށާއި އެ ސެލެކްޓް ކުރުމުން އޮޕްޝަން ވަން ޑިސެލެކްޓް ވާނެ ކަމަށެވެ

އޮޕްޝަން ތިނެއް ޑިސެބިލް ވެއްޖެއެވެ

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

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

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

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

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

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

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ހޮވައެވެ

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

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select>އެޓްރިބިއުޓް އާއި އެކު ކޮންޓްރޯލްތަކަށް ، ގިނަ multipleއޮޕްޝަންތަކެއް ޑިފޯލްޓްކޮށް ދައްކާފައިވެއެވެ.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ސްޓޭޓިކް ކޮންޓްރޯލް

ފޯމެއްގެ ތެރޭގައި ފޯމް ލޭބަލެއްގެ ކައިރީގައި ސާދާ ލިޔުމެއް ބަހައްޓަން ބޭނުންވާ ވަގުތުތަކުގައި، .form-control-staticކްލާސް ބޭނުންކުރާށެވެ <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ފޯކަސް ސްޓޭޓް

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

ޑެމޯ`:focus` ސްޓޭޓް

މަތީގައިވާ މިސާލު އިންޕުޓްގައި އަޅުގަނޑުމެންގެ ޑޮކިއުމަންޓޭޝަންގައި ކަސްޓަމް ސްޓައިލްތައް ބޭނުންކޮށްގެން :focusއެއްގެ މައްޗަށް ޙާލަތު ދައްކާލައެވެ .form-control.

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

disabledޔޫޒަރ އިންޓަރެކްޝަންސް ހުއްޓުވުމަށްޓަކައި އިންޕުޓެއްގައި ބޫލިއަން އެޓްރިބިއުޓް އިތުރުކުރުން . ޑިސެބިލް ކޮށްފައިވާ އިންޕުޓްތައް ލުއިކޮށް ފެނިގެން not-allowedކަރސަރެއް އިތުރުކޮށްދެއެވެ.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ޑިސެބިލް ކޮށްފައިވާ ފީލްޑްސެޓްތަކެވެ

އެއްފަހަރާ ގެ ތެރޭގައި ހުރި ހުރިހާ ކޮންޓްރޯލްތަކެއް ޑިސެބިލް ކުރުމަށް disabledއެޓްރިބިއުޓް a އަށް އެޑް ކުރާށެވެ .<fieldset><fieldset>

ކެވިއޭޓް އަބައުޓް ލިންކް ފަންކްޝަނަލިޓީ އޮފް`<a>`

ބައި ޑިފޯލްޓްކޮށް، ބްރައުޒާތަކުން a ގެ ތެރޭގައި ހުންނަ ހުރިހާ ނެޓިވް ފޯމް ކޮންޓްރޯލްތައް ( <input>, <select>އަދި <button>އެލިމެންޓްތައް) <fieldset disabled>ޑިސެބިލް ކޮށްފައިވާ ގޮތަށް ބަލާނެ ކަމަށާއި، އެތަންތަނުގައި ކީބޯޑާއި މައުސް ވެސް މުއާމަލާތް ކުރުން ހުއްޓުވޭނެ ކަމަށެވެ. ނަމަވެސް ތިބާގެ ފޯމުގައި ވެސް <a ... class="btn btn-*">އުނިއިތުރުތައް ހިމެނޭނަމަ، މިކަންކަމަށް ލިބޭނީ ހަމައެކަނި ގެ ސްޓައިލެކެވެ pointer-events: none. ބަޓަންތަކަށް ޑިސެބިލްޑް ސްޓޭޓާ ބެހޭ ބައިގައި (އަދި ޚާއްޞަކޮށް އެންކަރ އެލިމެންޓްތަކަށް ސަބް ސެކްޝަންގައި) ފާހަގަކޮށްފައިވާ ފަދައިން، މި ސީއެސްއެސް ޕްރޮޕަޓީ އަދި ސްޓޭންޑަރޑައިޒް ނުކުރެވި އޮޕެރާ 18 އާއި ތިރީގައިވާ، ނުވަތަ އިންޓަރނެޓް އެކްސްޕްލޯރަރ 11 ގައި ފުރިހަމައަށް ސަޕޯޓް ނުކުރެވި، ކާމިޔާބު ކުރެވުނެވެ 't ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކަށް މި ލިންކްތަކަށް ފޯކަސް ނުވަތަ އެކްޓިވޭޓް ކުރެވޭނެ ގޮތް ހެދުމަށް ހުރަސް އެޅުން. އެހެންކަމުން ރައްކާތެރިވުމަށްޓަކައި މިފަދަ ލިންކްތައް ޑިސެބިލް ކުރުމަށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރާށެވެ.

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

ބޫޓްސްޓްރެޕް އިން މި ސްޓައިލްތައް ހުރިހާ ބްރައުޒަރެއްގައި ވެސް އަމަލުކުރާނެ ނަމަވެސް، އިންޓަރނެޓް އެކްސްޕްލޯރަރ 11 އާއި ތިރީގައިވާ disabledއެޓްރިބިއުޓް އަށް ފުރިހަމައަށް ސަޕޯޓް ނުކުރެއެވެ <fieldset>. މި ބްރައުޒާތަކުގައި ހުންނަ ފީލްޑްސެޓް ޑިސެބިލް ކުރުމަށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރާށެވެ.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ރީއޮންލީ ސްޓޭޓް

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

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

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

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

އެހީގެ ލިޔުން ފޯމް ކޮންޓްރޯލްތަކާ ގުޅުވައިދިނުން

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

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

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

ބޫޓްސްޓްރަޕްގައި ފޯމް ކޮންޓްރޯލްތަކުގައި ގޯސް، އިންޒާރު، އަދި ކާމިޔާބީގެ ހާލަތްތަކަށް ވެލިޑޭޝަން ސްޓައިލްތައް ހިމެނެއެވެ. .has-warningބޭނުން ކުރުމަށް، , .has-error, ނުވަތަ .has-successބެލެނިވެރި އެލިމެންޓަށް އިތުރުކުރުން . އެ އެލިމެންޓެއްގެ ތެރެއިން އެއްވެސް .control-label, .form-control, އަދި .help-blockވެލިޑޭޝަން ސްޓައިލްތައް ލިބޭނެއެވެ.

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

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

އަދި ދައުލަތުގެ ބަދަލު އިޝާރާތެއް ވެސް ފޯރުކޮށްދީފައިވާކަން ކަށަވަރުކުރުން. މިސާލަކަށް، ފޯމް ކޮންޓްރޯލްގެ <label>ޓެކްސްޓްގައި ޚުދު ސްޓޭޓާ ބެހޭ ހިލަމެއް ހިމަނާލެވޭނެ (ތިރީގައިވާ ކޯޑް މިސާލުގައިވާ ފަދައިން)، ގްލައިފިކޮން ހިމަނާ (ކްލާސް ބޭނުންކޮށްގެން އެކަށީގެންވާ ބަދަލު ލިޔުމަކާއެކު .sr-only- ގްލައިފިކޮން މިސާލުތައް ބައްލަވާ )، ނުވަތަ އެއް ފޯރުކޮށްދީގެން އިތުރު އެހީތެރިކަން ޓެކްސްޓް ބްލޮކް ކުރުން. ޚާއްޞަކޮށް އެސިސްޓިވް ޓެކްނޮލޮޖީތަކަށް، ސައްހަ ނޫން ފޯމް ކޮންޓްރޯލްތަކަށް ވެސް aria-invalid="true"އެޓްރިބިއުޓެއް ހަވާލުކުރެވިދާނެއެވެ.

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

އިންޒާރު ޖަހާފައި އިންޕުޓް ކުރާށެވެ

އެރަރ އާއި އެކު އިންޕުޓް ކުރާށެވެ

ކާމިޔާބީއާއެކު ޗެކްބޮކްސް

އިންޒާރު ޖަހާފައިވާ ޗެކްބޮކްސް

އެރަރ އެއް ހުރި ޗެކްބޮކްސް

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

އިޚްތިޔާރީ އައިކޮންތަކާއެކު

އަދި އިތުރުކޮށް .has-feedbackއަދި ރަނގަޅު އައިކޮން އާއި އެކު އިޚްތިޔާރީ ފީޑްބެކް އައިކޮންތައް އިތުރުކުރެވިދާނެއެވެ.

ފީޑްބެކް އައިކޮންތައް މަސައްކަތް ކުރަނީ ހަމައެކަނި ޓެކްސްޗުއަލް <input class="form-control">އެލިމެންޓްތަކާއެކުގައެވެ.

އައިކޮންތަކާއި، ލޭބަލްތަކާއި، އިންޕުޓް ގްރޫޕްތައް

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

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

އެހީތެރި ޓެކްނޮލޮޖީތަކުން – ސްކްރީން ރީޑަރ ފަދަ – އައިކޮނެއްގެ މާނަ ރަނގަޅަށް ފޯރުކޮށްދޭކަން ކަށަވަރުކުރުމަށްޓަކައި، އިތުރު ފޮރުވިފައިވާ ލިޔުން .sr-onlyކްލާހުގައި ހިމަނައި، އެ ލިޔުން ބޭނުންކުރުމާ ގުޅޭ ފޯމް ކޮންޓްރޯލާ ސާފުކޮށް ގުޅުވަންވާނެއެވެ aria-describedby. ނުވަތަ، މާނަ (މިސާލަކަށް، ވަކި ޓެކްސްޓް އެންޓްރީ ފީލްޑަކަށް އިންޒާރެއް އޮތް ކަމުގެ ހަގީގަތް) <label>ފޯމް ކޮންޓްރޯލާ ގުޅިފައިވާ ހަގީގީ ޓެކްސްޓް ބަދަލުކުރުން ފަދަ އެހެން ކޮންމެވެސް ގޮތަކުން ފޯރުކޮށްދޭކަން ޔަގީންކުރުން.

ތިރީގައިވާ މިސާލުތަކުގައި މިހާރުވެސް އެމީހުންގެ ފޯމް ކޮންޓްރޯލްތަކުގެ ވެލިޑޭޝަން ސްޓޭޓް <label>ޚުދު ލިޔުމުގައި ފާހަގަކޮށްފައިވީނަމަވެސް، މަތީގައިވާ އުކުޅު ( .sr-onlyޓެކްސްޓް އަދި ބޭނުންކޮށްގެން aria-describedby) ހިމަނާފައިވަނީ ތަފްސީލު ދިނުމުގެ ބޭނުމުގައެވެ.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

ހޮރައިޒޮންޓަލް އަދި އިންލައިން ފޯމްތަކުގައި އިޚްތިޔާރީ އައިކޮންތައް

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

ފޮރުވިފައި ހުންނަ އިޚްތިޔާރީ އައިކޮންތަކެވެ`.sr-only` ލޭބަލްތަކާއެކު އިޚްތިޔާރީ އައިކޮންތައް

.sr-onlyފޯމް ކޮންޓްރޯލެއް ފޮރުވުމަށް ކްލާސް ބޭނުންކުރާނަމަ <label>(އެޓްރިބިއުޓް ފަދަ އެހެން ލޭބަލިންގ އޮޕްޝަންތައް ބޭނުންކުރުމުގެ ބަދަލުގައި aria-label) ބޫޓްސްޓްރެޕް އިން އައިކޮން އިތުރުކުރުމުން އޮޓޮމެޓިކުން އައިކޮންގެ މަޤާމު އެޖެސްޓްކުރާނެއެވެ.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

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

ކްލާސްތައް ބޭނުންކޮށްގެން އުސްމިންތައް ސެޓްކުރުން .input-lg, އަދި ގްރިޑް ކޮލަމް ކްލާސްތައް ބޭނުންކޮށްގެން ފުޅާމިންތައް ސެޓްކުރުން ފަދަ.col-lg-* .

އިސްކޮޅު ސައިޒް ކުރުން

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

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ހޮރައިޒޮންޓަލް ފޯމް ގްރޫޕް ސައިޒްތައް

އަވަހަށް ސައިޒް ލޭބަލްތަކާއި ފޯމް ކޮންޓްރޯލްތައް އެތެރޭގައި .form-horizontalއިތުރުކޮށްގެން .form-group-lgނުވަތަ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ކޮލަމް ސައިޒް ކުރުން

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

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

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

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ކޮންޓެކްސްޓަށް ޚާއްޞަ ބޭނުންކުރުމެވެ

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

ބަޓަންތަކެއްގެ ގޮތުގައި ހަރަކާތްތެރިވާ ލިންކްތައް

އެލިމެންޓްތައް ބަޓަންތަކެއްގެ ގޮތުގައި މަސައްކަތް ކުރުމަށް <a>ބޭނުންކުރާނަމަ – އިން-ޕޭޖް ފަންކްޝަނަލިޓީ ޓްރިގަރ ކުރުން، މިހާރު ހުރި ޞަފްޙާގެ ތެރޭގައިވާ އެހެން ލިޔުމަކަށް ނުވަތަ ބަޔަކަށް ދިއުމަށްވުރެ – އެއަށް އެކަށީގެންވާ role="button".

ކްރޮސް ބްރައުޒާ ރެންޑަރިންގ

އެންމެ ރަނގަޅު އުސޫލެއްގެ ގޮތުން، ކުރެވެން އޮތް ކޮންމެ ވަގުތެއްގައި އެ އެލިމެންޓް ބޭނުން ކުރުމަށް އަޅުގަނޑުމެން ވަރަށް ބޮޑަށް ލަފާދެމެވެ<button> ކްރޮސް ބްރައުޒަރ ރެންޑަރިންގ އެއްގޮތްވާކަން ކަށަވަރުކުރުމަށްޓަކައި،

އެހެނިހެން ކަންކަމުގެ ތެރޭގައި، ފަޔަރފޮކްސް <30 ގައި ބަގެއް ހުރުމުންline-height ، of <input>-based ބަޓަންތައް ސެޓް ނުކުރެވި، ފަޔަރފޮކްސްގައި ހުންނަ އެހެން ބަޓަންތަކުގެ އުސްމިނާ ސީދާ އެއްގޮތް ނުވާތީއެވެ.

އިޚްތިޔާރުތައް

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

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

ބަޓަނަކަށް މާނަ އިތުރުކުރުމަށް ކުލަ ބޭނުންކުރުމުން ލިބޭނީ ހަމައެކަނި ވިޝުއަލް އިންޑިކޭޝަނެއް ކަމަށާއި، އެއީ އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް - ސްކްރީން ރީޑަރސް ފަދަ - ފޯރުކޮށްދޭނެ ކަމެއް ނޫން ކަމަށެވެ. ކުލައިން ދައްކުވައިދޭ މަޢުލޫމާތަކީ ޚުދު ކޮންޓެންޓުން (ބަޓަންގެ ފެންނަ ލިޔުން) ފާހަގަކުރެވޭ މަޢުލޫމާތެއްކަން، ނުވަތަ ކްލާހާއެކު ފޮރުވިފައިވާ އިތުރު ލިޔުން ފަދަ ބަދަލު ގޮތްތަކުން ހިމަނާފައިވާ މަޢުލޫމާތެއްކަން ޔަޤީންކުރުން .sr-only.

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

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

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

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

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

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

އެކްޓިވް ވާއިރު ބަޓަންތައް ފިއްތާފައި (އަނދިރި ބެކްގްރައުންޑަކާއި، އަނދިރި ބޯޑަރަކާއި، އަދި އިންސެޓް ހިޔަނިއަކާއެކު) ފެންނާނެއެވެ. އެލިމެންޓްތަކަށް މިކަން <button>ކުރެވެނީ :active. <a>އެލިމެންޓްތަކަށްޓަކައި، އެކަން .activeކުރެވިފައިވަނީ . ނަމަވެސް ޕްރޮގްރާމެޓިކަލީ އެކްޓިވް ސްޓޭޓް ރިޕްލިކޭޓް ކުރަން ޖެހިއްޖެނަމަ s .activeގައި ބޭނުން ކުރެވިދާނެ <button>(އަދި އެޓްރިބިއުޓް ހިމަނާފައި ) އެވެ.aria-pressed="true"

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

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

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

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

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

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

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

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

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

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

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

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

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

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

ލިންކް ފަންކްޝަނަލިޓީ ކެވިއޭޓް

މި ކްލާސް ބޭނުންކުރަނީ s ގެ pointer-events: noneލިންކް ފަންކްޝަނަލިޓީ ޑިސެބިލް ކުރަން މަސައްކަތް ކުރުމަށް <a>، އެކަމަކު އެ ސީއެސްއެސް ޕްރޮޕަޓީ އަދި ސްޓޭންޑަރޑައިޒް ނުކުރެވި އޮޕެރާ 18 އަދި ތިރީގައިވާ، ނުވަތަ އިންޓަރނެޓް އެކްސްޕްލޯރަރ 11 ގައި ފުރިހަމައަށް ސަޕޯޓް pointer-events: noneނުކުރެވޭ ނޭވިގޭޝަނަށް އަސަރެއް ނުކުރާ ގޮތަށް އޮތުމުން، މާނައަކީ ކީބޯޑް ބޭނުންކުރާ މީހުންނާއި އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް އަދިވެސް މި ލިންކްތައް އެކްޓިވޭޓް ކުރެވޭނެ އެވެ. އެހެންކަމުން ރައްކާތެރިވުމަށްޓަކައި މިފަދަ ލިންކްތައް ޑިސެބިލް ކުރުމަށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރާށެވެ.

ޖަވާބުދާރީވާ ތަސްވީރުތަކެވެ

.img-responsiveބޫޓްސްޓްރެޕް 3 ގައި ހުންނަ ތަސްވީރުތައް ކްލާސް އިތުރުކުރުމުގެ ތެރެއިން ރެސްޕޮންސިވް ފްރެންޑްލީ ހެދިދާނެ އެވެ . މިއީ max-width: 100%;, height: auto;އަދި display: block;ބެލެނިވެރި އެލިމެންޓަށް ރީތިކޮށް ސްކޭލް ކުރެވޭ ގޮތަށް ތަސްވީރަށް ވެސް އަމަލުކުރާ ކަމެކެވެ.

.img-responsiveކްލާސް ބޭނުންކުރާ ތަސްވީރުތައް ސެންޓަރ ކުރުމަށް ، .center-blockގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ .text-center. ބޭނުންކުރުމާ ބެހޭ އިތުރު މަޢުލޫމާތު ހޯދުމަށް ހެލްޕަރ ކްލާސްތަކުގެ ބައި ބައްލަވާށެވެ.center-block .

އެސްވީޖީ އިމޭޖްސް އަދި އައިއީ 8-10 އެވެ

އިންޓަރނެޓް އެކްސްޕްލޯރަރ 8-10 ގައި، އެސްވީޖީ އިމޭޖްސް އާއި އެކު .img-responsiveހުންނަނީ ނިސްބަތުން ބޮޑު ސައިޒެކެވެ. މިކަން ރަނގަޅު ކުރުމަށްޓަކައި width: 100% \9;ބޭނުންވާ ތަންތަނަށް އިތުރު ކުރާށެވެ. ބޫޓްސްޓްރެޕް އިން މިކަން އޮޓޮމެޓިކުން ނުހިނގާ ސަބަބަކީ އެހެން އިމޭޖް ފޯމެޓްތަކަށް ކޮމްޕްލިކޭޝަންތައް ކުރިމަތިވާތީ އެވެ.

<img src="..." class="img-responsive" alt="Responsive image">

ތަސްވީރުގެ ބައްޓަންތަކެވެ

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

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

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

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ކޮންޓެކްސްޓް ކުލަތަކެވެ

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

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

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

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

މެސެނާސް ސެޑް ޑައިމް އެގޭޓް ރިސަސް ވަރިއަސް ބްލަންޑިޓް ސިޓް އަމެޓް ނޮން މެގްނާ.

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

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

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ސްޕެސިފިކްޓީއާ މުއާމަލާތްކުރުން

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

އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

މާނަ އިތުރުކުރުމަށް ކުލަ ބޭނުންކުރުމަކީ ހަމައެކަނި ވިޝުއަލް އިންޑިކޭޝަނެއް ލިބިގެންދާ ކަމެއް ކަމަށާއި، އެއީ އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް - ސްކްރީން ރީޑަރ ފަދަ ތަކެތި - ފޯރުކޮށްނުދޭނެ ކަމެއް ކަމަށެވެ. .sr-onlyކުލައިން ދައްކުވައިދޭ މަޢުލޫމާތަކީ ކޮންޓެންޓުން ޚުދު ސާފުކޮށް އެނގޭ މަޢުލޫމާތެއްކަން ޔަޤީންކުރުން (ކޮންޓެކްސްޗުއަލް ކުލަތައް ބޭނުންކުރަނީ ހަމައެކަނި ޓެކްސްޓް/މާކަޕްގައި މިހާރުވެސް ހުރި މާނަ ވަރުގަދަކުރުމަށް)، ނުވަތަ ކްލާހާއެކު ފޮރުވިފައިވާ އިތުރު ލިޔުން ފަދަ ބަދަލު ގޮތްތަކުން ހިމަނާފައިވާކަން ޔަޤީންކުރުން .

ކޮންޓެކްސްޗުއަލް ބެކްގްރައުންޑްސް

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

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

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

މެސެނާސް ސެޑް ޑައިމް އެގޭޓް ރިސަސް ވަރިއަސް ބްލަންޑިޓް ސިޓް އަމެޓް ނޮން މެގްނާ.

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

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

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ސްޕެސިފިކްޓީއާ މުއާމަލާތްކުރުން

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

އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

As with contextual colors , ކުލަ މެދުވެރިކޮށް ފޯރުކޮށްދޭ އެއްވެސް މާނައެއް ވެސް ފޯރުކޮށްދެވޭނީ ހަމައެކަނި ޕްރެޒެންޓޭޝަނަލް ނޫން ފޯމެޓެއްގައިކަން ކަށަވަރުކުރުން.

ކްލޯޒް އައިކޮން

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ކެރެޓްސް އެވެ

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

<span class="caret"></span>

އަވަސް ފްލޯޓްސް އެވެ

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

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ސެންޓަރ ކޮންޓެންޓް ބްލޮކްސް

އެލިމެންޓެއް އަށް display: blockއަދި ސެންޓަރ މެދުވެރިކޮށް ސެޓްކުރުން margin. މިކްސިން އަދި ކްލާހެއްގެ ގޮތުގައި ލިބެން ހުންނާނެއެވެ.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ކްލިއަރފިކްސް

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

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

ކޮންޓެންޓް ދައްކައި ފޮރުވުން

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

.hideލިބެން ހުރި ނަމަވެސް އަބަދުވެސް ސްކްރީން ރީޑަރުންނަށް އަސަރެއް ނުކުރާ ކަމަށާއި v3.0.1 އިން ފެށިގެން ޑިޕްރިކޭޓް ކުރެވިފައިވާ ކަމަށް ވެސް ވިދާޅުވި އެވެ. .hiddenނުވަތަ .sr-onlyއޭގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ .

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

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

ސްކްރީން ރީޑަރ އަދި ކީބޯޑް ނެވިގޭޝަން ކޮންޓެންޓް

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

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

އިމޭޖް ބަދަލުކުރުން

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

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

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

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

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

	އިތުރު ކުދި ޑިވައިސްތަކެވެފޯނުތައް (<768px)	ކުދި އާލާތްތަކެވެޓެބްލެޓް (≥768px)	މީޑިއަމް ޑިވައިސްތަކެވެޑެސްކްޓޮޕްތައް (≥992px)	ބޮޑެތި ޑިވައިސްތަކެވެޑެސްކްޓޮޕްސް (≥1200px)
`.visible-xs-*`	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި	ފޮރުވިފައި	ފޮރުވިފައި
`.visible-sm-*`	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި	ފޮރުވިފައި
`.visible-md-*`	ފޮރުވިފައި	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި
`.visible-lg-*`	ފޮރުވިފައި	ފޮރުވިފައި	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ
`.hidden-xs`	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ
`.hidden-sm`	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ
`.hidden-md`	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ
`.hidden-lg`	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި

v3.2.0 އިން ފެށިގެން، .visible-*-*ކޮންމެ ބްރޭކްޕޮއިންޓަކަށް ކްލާސްތައް އަންނަނީ ތިން ވައްތަރެއްގައި، displayތިރީގައި ލިސްޓްކޮށްފައިވާ ކޮންމެ ސީއެސްއެސް ޕްރޮޕަޓީ ވެލިއުއަކަށް އެއް ވައްތަރަކަށެވެ.

ކްލާސްތަކުގެ ގްރޫޕެއް	ސީއެސްއެސް އެވެ`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

އެހެންކަމުން، xsމިސާލަކަށް އިތުރު ކުދި ( ) ސްކްރީންތަކަށް، ލިބެންހުރި .visible-*-*ކްލާސްތަކަކީ: .visible-xs-block, .visible-xs-inline, އަދި .visible-xs-inline-block.

ކްލާސްތައް .visible-xs, .visible-sm, .visible-md, އަދި .visible-lgވެސް އުފެދިފައިވީނަމަވެސް v3.2.0 ގެ ނިޔަލަށް ޑިޕްރިކޭޓް ކުރެވިފައިވެއެވެ . .visible-*-blockއެއީ ޓޮގްލިންގ އާއި ގުޅުންހުރި އުފެއްދުންތަކަށް އިތުރު ޚާއްޞަ ޙާލަތްތަކެއް ފިޔަވައި، ގާތްގަނޑަކަށް އާއި އެއްވަރު <table>އެއްޗެހިތަކެކެވެ.

ޕްރިންޓް ކްލާސްތައް

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

ކްލާސްތަކެވެ	ބްރައުޒާ އެވެ	ޕްރިންޓް ކުރާށެވެ
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	ފޮރުވިފައި	ފެންނަން ހުރެއެވެ
`.hidden-print`	ފެންނަން ހުރެއެވެ	ފޮރުވިފައި

މި ކްލާސް .visible-printވެސް އޮތް ނަމަވެސް v3.2.0 ގެ ނިޔަލަށް ޑިޕްރިކޭޓް ކުރެވިފައިވެއެވެ. އެއީ -ގުޅުންހުރި އުފެއްދުންތަކަށް .visible-print-blockއިތުރު ޚާއްޞަ ޙާލަތްތަކެއް ފިޔަވައި، ގާތްގަނޑަކަށް އާއި އެއްވަރުގެ އެއްޗެކެވެ.<table>

ޓެސްޓް ކޭސްތައް

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

ފެންނަނީ...

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

އިތުރަށް ކުޑަ ✔ އެކްސް-ސްމޯލް އިން ފެންނަން ހުރެއެވެ

ކުޑަ ✔ ކުޑަކުޑަ މަތީގައި ފެންނަން ހުރެއެވެ

މީޑިއަމް ✔ މީޑިއަމް އިން ފެންނަން ހުރެއެވެ

ވަރަށް ބޮޑު ✔ ބޮޑު ތަނުން ފެންނަން ހުރެއެވެ

އިތުރަށް ކުޑަކުޑަކޮށް ✔ އެކްސް-ސްމޯލް އަދި ސްމޯލް އިން ފެންނަން ހުރެއެވެ

މެދު އަދި ބޮޑު ✔ މީޑިއަމް އަދި ލަރޖް ގައި ފެންނަން ހުރެއެވެ

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

ކުޑަ ބޮޑު ✔ ކުދި ބޮޑު މަތިން ފެންނަން ހުރެއެވެ

އިތުރަށް ކުޑަ އަދި ބޮޑު ✔ އެކްސް-ކުޑަ އަދި ބޮޑު އިން ފެންނަން ހުރެއެވެ

ކުޑަ އަދި މެދުމިނުގެ ✔ ކުދި އަދި މެދުމިނުގައި ފެންނަން ހުރެއެވެ

ފޮރުވިފައި އޮތީ...

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

އިތުރަށް ކުޑަ ✔ އެކްސް-ސްމޯލް ގައި ފޮރުވިފައި ހުރެއެވެ

ކުޑަ ✔ ކުޑަ މަތީގައި ފޮރުވިފައި ހުރެއެވެ

މީޑިއަމް ✔ މީޑިއަމްގައި ފޮރުވިފައި ހުރެއެވެ

ވަރަށް ބޮޑު ✔ ބޮޑު މަތީގައި ފޮރުވިފައި ހުރެއެވެ

އިތުރަށް ކުޑަކުޑަކޮށް ✔ އެކްސް-ސްމޯލް އަދި ސްމޯލް ގައި ފޮރުވިފައި ހުރެއެވެ

މެދު އަދި ބޮޑު ✔ މީޑިއަމް އަދި ލަރޖް ގައި ފޮރުވާފައި ހުރެއެވެ

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

ކުޑަ ބޮޑު ✔ ކުދި ބޮޑު މަތީގައި ފޮރުވިފައި ހުރެއެވެ

އިތުރަށް ކުޑަ އަދި ބޮޑު ✔ އެކްސް-ކުޑަ އަދި ބޮޑު ގައި ފޮރުވިފައި ހުރެއެވެ

ކުޑަ އަދި މެދުމިނުގެ ✔ ކުދި އަދި މެދުމިނުގެ މައްޗަށް ފޮރުވިފައި ހުރެއެވެ

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

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

ބޫޓްސްޓްރެޕް ކޮމްޕައިލް ކުރުން

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

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

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

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

ކުލަތަކެވެ

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

ސްކެފޯލްޑިންގ އެވެ

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

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

ލިންކްތައް

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

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

ނޯޓް: ދަ @link-hover-colorބޭނުންކުރަނީ ފަންކްޝަނެއް، ލެސްގެ އަނެއްކާވެސް މޮޅު ޓޫލެއް، އޮޓޮމެޖިކް ގޮތެއްގައި ރަނގަޅު ހޯވަރ ކުލައެއް އުފެއްދުމަށެވެ. ބޭނުންކުރެވިދާނެ darken, lighten, saturate, އަދި desaturate.

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

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

އައިކޮންސް އެވެ

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

ކޮމްޕޯނެންޓްސް

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

ވެންޑަރ މިކްސިންސް އެވެ

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

ފޮށި ސައިޒް ކުރުން

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

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

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

ވަށައިގެންވާ ކޮޅުތަކެވެ

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

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

ފޮށި (ޑްރޮޕް) ހިޔަނިތަކެވެ

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

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

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

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

ޓްރާންސިޝަންސް

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

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

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

ބަދަލުތަކެއް

އެއްވެސް އެއްޗެއް އެނބުރުވުން، ސްކޭލްކުރުން، ތަރުޖަމާކުރުން (ހަރަކާތްކުރުން)، ނުވަތަ ސްކިއުކުރުން.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

އެނިމޭޝަންސް އެވެ

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

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

އޮޕަސިޓީ އެވެ

ހުރިހާ ބްރައުޒަރަކަށް އޮޕަސިޓީ ސެޓްކޮށް filterއައިއީ8 އަށް ފޯލްބެކް ފޯރުކޮށްދޭށެވެ.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

ޕްލޭސްހޯލްޑަރ ޓެކްސްޓް

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

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

ކޮލަމްތަކެވެ

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

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

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

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

އަދި ސްޓޭންޑަރޑް ދެ ކުލައިގެ، ލައިނަރ ގްރޭޑިއަންޓެއްގެ އެންގްލޭޝަން ވެސް ކަނޑައެޅިދާނެއެވެ:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

އެންޓޭ އަޕްކޮށްލުމަށްފަހު އޭގެ ބަދަލުގައި ތިން ކުލަ ބޭނުން ކުރާށެވެ. ފުރަތަމަ ކުލަ، ދެވަނަ ކުލަ، ދެވަނަ ކުލައިގެ ކުލަ ހުއްޓުވުން (%25 ފަދަ ޕަސެންޓް ވެލިއުއެއް) އަދި ތިންވަނަ ކުލަ މި މިކްސިންތަކާއެކު ސެޓްކުރުން:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

ހެޑްސް އަޕް! ދުވަހަކުވެސް ގްރޭޑިއަންޓެއް ނައްތާލަން ޖެހިއްޖެނަމަ، filterއިތުރުކޮށްފައިވާ އައިއީ-ސްޕެސިފިކް އެއްވެސް އެއްޗެއް ނައްތާލުން ޔަގީން ކުރައްވާށެވެ. އެކަން ކުރެވޭނީ އޭގެ .reset-filter()ކައިރީގައި މިކްސިން ބޭނުންކޮށްގެންނެވެ background-image: none;.

ޔުޓިލިޓީ މިކްސިންސް އެވެ

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

ކްލިއަރފިކްސް

class="clearfix"އެއްވެސް އެލިމެންޓަކަށް އިތުރުކުރުން ހަނދާން ނައްތާލާފައި އޭގެ ބަދަލުގައި .clearfix()އެކަށީގެންވާ ތަންތަނުގައި މިކްސިން އަޅާށެވެ. ނިކޮލަސް ގަލަގަރ ގެ މައިކްރޯ ކްލިއަރފިކްސް ބޭނުންކުރެއެވެ .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

ހޮރައިޒޮންޓަލް ސެންޓަރިންގ އެވެ

އަވަހަށް އޭގެ ބެލެނިވެރިކަމުގެ ތެރޭގައި ކޮންމެ އުނިއިތުރެއް ވެސް ސެންޓަރ ކޮށްލާށެވެ. ބޭނުންވާ widthނުވަތަ max-widthސެޓް ކުރަންޖެހޭ.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

ސައިޒިންގ ހެލްޕަރުން

އެއްޗެއްގެ ޑިމައިންސްތައް މާ ފަސޭހައިން ކަނޑައެޅުން.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

ސައިޒް ބަދަލުކުރެވޭ ޓެކްސްޓްއޭރިއާތަކެވެ

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

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

ލިޔުން ކަނޑާލުން

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

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

ރެޓިނާ ތަސްވީރުތަކެވެ

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

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

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

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

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

މަގު	ތަފްޞީލު
`lib/`	ރޫބީ ޖެމް ކޯޑް (ސާސް ކޮންފިގްރޭޝަން، ރޭލްސް އަދި ކޮމްޕަސް އިންޓަގްރޭޝަންސް)
`tasks/`	ކޮންވަރޓަރ ސްކްރިޕްޓްސް (އަޕްސްޓްރީމް ލޭސް އިން ސާސް އަށް ބަދަލުކުރުން)
`test/`	ކޮމްޕައިލޭޝަން ޓެސްޓްތަކެވެ
`templates/`	ކޮމްޕަސް ޕެކޭޖް މެނިފެސްޓް
`vendor/assets/`	ސާސް، ޖާވާސްކްރިޕްޓް، އަދި ފޮންޓް ފައިލްތަކެވެ
`Rakefile`	އެތެރޭގެ މަސައްކަތްތައް، ރޭކް ކުރުމާއި ކޮންވަރޓް ކުރުން ފަދަ ކަންކަން

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

އިންސްޓޯލް ކުރުން

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

ސާސް އަށް ބޫޓްސްޓްރެޕް

ސީއެސްއެސް އެވެ

އޯވަރވިއު

އެޗްޓީއެމްއެލް5 ޑޮކްޓައިޕް

މޮބައިލް ފުރަތަމަ

ޓައިޕޮގްރަފީ އާއި ލިންކްތައް

ނޯމަލައިޒް ކުރުން.css

ކޮންޓެއިނަރުތައް

ގްރިޑް ސިސްޓަމް

ތަޢާރަފު

މީޑިއާގެ ސުވާލުތަކެވެ

ގްރިޑް އޮޕްޝަންސް

މިސާލު: ސްޓޭކްޑް-ޓު-ހޮރައިޒޮންޓަލް

މިސާލު: ފްލޫޑް ކޮންޓެއިނަރ

މިސާލު: މޯބައިލް އަދި ޑެސްކްޓޮޕް

މިސާލު: މޯބައިލް، ޓެބްލެޓް، ޑެސްކްޓޮޕް

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

ރެސްޕޮންސިވް ކޮލަމް ރީސެޓް ވެއެވެ

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

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

ކޮލަމް އޯޑަރު ކުރުން

މިކްސިންސް އާއި ވެރިއޭބަލްސް މަދުވުން

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

މިކްސިންސް އެވެ

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

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

ސުރުޚީތައް

ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ އެވެ

ހ1. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ2. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ3. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ4. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ5. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ހ6. ބޫޓްސްޓްރެޕް ހެޑިންގ ސެކަންޑަރީ ޓެކްސްޓް

ބޮޑީ ކޮޕީ

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

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

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

ފާހަގަކޮށްފައިވާ ލިޔުން

ޑިލީޓް ކޮށްފައިވާ ލިޔުން

ސްޓްރައިކްތްރޫ ޓެކްސްޓް

އިންސަރޓް ކޮށްފައިވާ ލިޔުން

އަންޑަލައިން ކޮށްފައިވާ ލިޔުން

ކުޑަ ލިޔުމެކެވެ

ބޯލްޑް

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

ބަދަލު އުފެއްދުންތައް

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

ޓްރާންސްފޯމަޝަން ކްލާސްތަކެވެ

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

އަސާސީ ކުރުކުރުން

އިނިޝިއަލިޒަމް

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

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

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

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

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

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

ލިސްޓްތައް

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

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

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

އިންލައިން

ތަފްޞީލު

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

އޮޓޯ ޓްރަންކޭޓިންގ އެވެ

ކޯޑް

އިންލައިން

ޔޫޒަރ އިންޕުޓް

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

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

ސާމްޕަލް އައުޓްޕުޓް

މޭޒުތަކެވެ

އަސާސީ މިސާލެވެ

ސްޓްރައިޕްޑް ރޯސްތަކެކެވެ

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

ޑެމޯ`:focus` ސްޓޭޓް

ކެވިއޭޓް އަބައުޓް ލިންކް ފަންކްޝަނަލިޓީ އޮފް`<a>`

ފޮރުވިފައި ހުންނަ އިޚްތިޔާރީ އައިކޮންތަކެވެ`.sr-only` ލޭބަލްތަކާއެކު އިޚްތިޔާރީ އައިކޮންތައް