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

ލިބެން ހުރި ގްލައިފްތަކެވެ

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

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

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

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

އެހެން ކޮމްޕޯނެންޓްތަކާ އެއްކޮށް ނުލާށެވެ

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

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

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

އައިކޮން ފޮންޓް ހުންނަ ތަން ބަދަލުކުރުން

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

  • ސޯސް ލެސް ފައިލްތަކުގައިވާ @icon-font-pathއަދި/ނުވަތަ ވެރިއޭބަލްތައް ބަދަލުކުރުން .@icon-font-name
  • ލެސް ކޮމްޕައިލަރ އިން ފޯރުކޮށްދޭ ރިލޭޓިވް ޔޫއާރްއެލްސް އޮޕްޝަން ބޭނުން ކުރާށެވެ .
  • url()ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސްގައިވާ މަގުތައް ބަދަލުކުރުން .

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

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

އެސިސްޓިވް ޓެކްނޮލޮޖީތަކުގެ ޒަމާނީ ވަރޝަންތަކުގައި ސީއެސްއެސް އިން އުފައްދާ ކޮންޓެންޓްގެ އިތުރުން ވަކި ޔުނިކޯޑް އަކުރުތައް އިއުލާން ކުރާނެ އެވެ. ސްކްރީން ރީޑަރސްގައި ނޭދެވޭ އަދި އޮޅުން ބޮޅުން ބޮޑު އައުޓްޕުޓެއް ނުލިބުމަށްޓަކައި (ޚާއްޞަކޮށް އައިކޮންތައް ޚުދު ޒީނަތްތެރި ކުރުމަށް ބޭނުންކުރާއިރު) އަޅުގަނޑުމެން އެތަކެތި ފޮރުވަނީ aria-hidden="true"އެޓްރިބިއުޓާއެކުގައެވެ.

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

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

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

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

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

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

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ޑްރޮޕްޑައުންސް އެވެ

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

ޑްރޮޕްޑައުންގެ ޓްރިގަރ އާއި ޑްރޮޕްޑައުން މެނޫ ގެ ތެރޭގައި އޮޅާލާށެވެ .dropdown، ނުވަތަ ޑިކްލެއަރ ކުރާ އެހެން އެލިމެންޓެއް position: relative;. ދެން މެނޫގެ އެޗްޓީއެމްއެލް އެޑް ކުރާށެވެ.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ބައި ޑިފޯލްޓްކޮށް، ޑްރޮޕްޑައުން މެނޫއެއް އޮޓޮމެޓިކުން %100 މަތިންނާއި އޭގެ ބެލެނިވެރިޔާގެ ކަނާތްފަރާތުގައި ބެހެއްޓިފައި ހުރެއެވެ. ޑްރޮޕްޑައުން މެނޫ އަށް ކަނާތްފަރާތަށް .dropdown-menu-rightއެޑް ކޮށްލާށެވެ ..dropdown-menu

އިތުރު ޕޮޒިޝަނިންގ ބޭނުންވެދާނެއެވެ

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

ޑިޕްރިކޭޓެޑް .pull-rightއެލައިންމަންޓް

v3.1.0 އިން ފެށިގެން އަޅުގަނޑުމެން .pull-rightޑްރޮޕްޑައުން މެނޫތަކުގައި ޑިޕްރެކޭޓް ކޮށްފިން. މެނޫއެއް ރަނގަޅަށް އެލައިން ކުރުމަށްޓަކައި، ބޭނުން ކުރާށެވެ .dropdown-menu-right. ނަވްބާރގައި ހުންނަ ރަނގަޅަށް އެލައިން ކުރެވިފައިވާ ނޭވް ކޮމްޕޯނެންޓްތަކުގައި މި ކްލާހުގެ މިކްސިން ވަރޝަނެއް ބޭނުންކޮށްގެން އޮޓޮމެޓިކުން މެނޫ އެލައިން ކުރެވެއެވެ. އެކަން އޯވަރރައިޑް ކުރުމަށްޓަކައި، ބޭނުން ކުރާށެވެ .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

ލިންކް ޑިސެބިލް ކުރުމަށް ޑްރޮޕްޑައުންގައިވާ .disableda އަށް އެޑް ކުރާށެވެ .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ބަޓަން ގްރޫޕްތަކެވެ

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

ބަޓަން ގްރޫޕްތަކުގައި ހުންނަ ޓޫލްޓިޕްސް & ޕޮޕޯވަރސް އަށް ޚާއްޞަ ސެޓިންގ އެއް ބޭނުންވެއެވެ

a ގެ ތެރޭގައިވާ އެލިމެންޓްތަކުގައި ޓޫލްޓިޕްސް ނުވަތަ ޕޮޕޯވަރސް ބޭނުންކުރާއިރު .btn-group، ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށް އިޚްތިޔާރު ކަނޑައަޅަން ޖެހޭނެއެވެ container: 'body'(އެލިމެންޓް ފުޅާވުމާއި/ނުވަތަ ޓޫލްޓިޕް ނުވަތަ ޕޮޕޯވަރ ޓްރިގަރ ކުރުމުން ވަށައިގެންވާ ކޮޅުތައް ގެއްލިގެން ދިއުން ފަދަ) އެވެ.

ރަނގަޅުކަން ކަށަވަރުކޮށް roleލޭބަލް ފޯރުކޮށްދިނުން

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

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

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

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

.btnއިން އިން ސިލްސިލާ ބަޓަންތަކެއް އޮޅާލާށެވެ .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ބަޓަން ޓޫލްބާރ

ކޮމްބައިން ސެޓްސް އޮފް <div class="btn-group">އިންޓޯ އަ <div class="btn-toolbar">ފޯރ މޯރ ކޮމްޕްލެކްސް ކޮމްޕޮނެންޓްސް.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

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

ގްރޫޕެއްގެ ކޮންމެ ބަޓަނަކަށް ބަޓަން ސައިޒިންގ ކްލާސްތައް އެޕްލައި ކުރުމުގެ ބަދަލުގައި، ހަމައެކަނި ކޮންމެ ބަޓަނަކަށް އިތުރުކުރުން .btn-group-*, .btn-groupއެތައް ގްރޫޕެއް ނެސްޓް ކުރާއިރު ހިމެނޭ ގޮތަށް.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ވަޅުލުން

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

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ވަރުގަދަ ތަފާތުވުން

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕްތަކެވެ

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

ބޯޑަރުތައް ބެލެހެއްޓުން

ބަޓަންތައް ޖަސްޓިފައި ކުރުމަށް ބޭނުންކުރާ ވަކި އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް ގެ ސަބަބުން (އެއީ display: table-cell)، އެ ބަޓަންތަކުގެ މެދުގައިވާ ބޯޑަރުތައް ދެގުނައަށް އިތުރުވެގެންދެއެވެ. ގަވާއިދުން ބަޓަން ގްރޫޕްތަކުގައި، margin-left: -1pxބޭނުންކުރަނީ ބޯޑަރުތައް ނައްތާލުމުގެ ބަދަލުގައި ސްޓޭކް ކުރުމަށެވެ. އެހެންނަމަވެސް، marginއާއެކު މަސައްކަތް ނުކުރެއެވެ display: table-cell. ނަތީޖާއެއްގެ ގޮތުން، ބޫޓްސްޓްރެޕް އަށް ކަސްޓަމައިޒޭޝަންތަކަށް ބަލާއިރު، ބޯޑަރުތައް ނައްތާލަން ނުވަތަ އަލުން ކުލަ ޖައްސަން ބޭނުންވެދާނެއެވެ.

އައިއީ8 އަދި ބޯޑަރސް އެވެ

އިންޓަރނެޓް އެކްސްޕްލޯރަރ 8 އިން ޖަސްޓިފައިޑް ބަޓަން ގްރޫޕެއްގައި ހުންނަ ބަޓަންތަކުގައި ބޯޑަރުތައް ރެންޑަރ ނުކުރަނީ، އެއީ އޮން ވިޔަސް <a>ނުވަތަ <button>އެލިމެންޓްތަކެއް ވިޔަސް މެއެވެ. އެކަމުން ސަލާމަތްވުމަށްޓަކައި ކޮންމެ ބަޓަނެއް އަނެއް ބަޓަނެއްގައި އޮޅާލާށެވެ .btn-group.

އިތުރު މަޢުލޫމާތު ހޯދުމަށް #12476 ބައްލަވާށެވެ .

<a>އުފެއްދުންތަކާއެކު _

ހަމައެކަނި ސިލްސިލާ .btnސ އެއް އޮޅާލާށެވެ .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

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

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

<button>އުފެއްދުންތަކާއެކު _

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

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

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

ޕްލަގިން ޑިޕެންޑެންސީ

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

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

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

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

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

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ޑްރޮޕްއަޕް ވެރިއޭޝަން

ޕޭރެންޓަށް އިތުރުކޮށްގެން އެލިމެންޓްތަކުގެ މަތީގައިވާ ޑްރޮޕްޑައުން މެނޫތައް ޓްރިގަރ ކުރާށެވެ .dropup.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

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

އެއްވެސް ޓެކްސްޓެއް ބިނާކޮށްފައިވާ ލިޔުމެއްގެ ކުރިން، ފަހުން ނުވަތަ ދެފަރާތުގައި ލިޔުމެއް ނުވަތަ ބަޓަންތައް އިތުރުކޮށްގެން ފޯމް ކޮންޓްރޯލްތައް ފުޅާކުރުން <input>. .input-groupއެއް ނުވަތަ އެއް އެއްޗަކަށް އުނިއިތުރުތައް ޕްރީޕެންޑް ކުރުމަށް ނުވަތަ އެޕެންޑް ކުރުމަށް .input-group-addonބޭނުން ކުރާށެވެ ..input-group-btn.form-control

ޓެކްސްޗުއަލް <input>ސ އެކަނި

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

<textarea>މިތަނުގައި އުފެއްދުންތައް ބޭނުންކުރުމުން ދުރުހެލިވާށެވެ ، ސަބަބަކީ rowsބައެއް ހާލަތްތަކުގައި އެ އުފެއްދުންތަކުގެ ސިފައަށް އިޙްތިރާމް ނުކުރެވޭނެއެވެ.

އިންޕުޓް ގްރޫޕްތަކުގައި ހުންނަ ޓޫލްޓިޕްސް & ޕޮޕޯވަރސް އަށް ޚާއްޞަ ސެޓިންގ އެއް ބޭނުންވެއެވެ

އެއްގެ ތެރޭގައިވާ އެލިމެންޓްތަކުގައި ޓޫލްޓިޕްސް ނުވަތަ ޕޮޕޯވަރސް ބޭނުންކުރާއިރު .input-group، ނޭދެވޭ ނޭދެވޭ އަސަރުތަކުން ސަލާމަތްވުމަށް އިޚްތިޔާރު ކަނޑައަޅަން ޖެހޭނެއެވެ container: 'body'(އެލިމެންޓް ފުޅާވުމާއި/ނުވަތަ ޓޫލްޓިޕް ނުވަތަ ޕޮޕޯވަރ ޓްރިގަރ ކުރުމުން ވަށައިގެންވާ ކޮޅުތައް ގެއްލޭ ފަދަ) އެވެ.

އެހެން ކޮމްޕޯނެންޓްތަކާ އެއްކޮށް ނުލާށެވެ

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

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

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

ބޭނުންކުރާނެ ސީދާ އުކުޅު (ފެންނަ <label>އުނިއިތުރުތައް، ކްލާސް <label>ބޭނުންކޮށްގެން ފޮރުވިފައިވާ އުފެއްދުންތައް، ނުވަތަ , , , ނުވަތަ އެޓްރިބިއުޓް ބޭނުންކުރުން) އަދި ފޯރުކޮށްދޭން ޖެހޭނެ އިތުރު މަޢުލޫމާތުތައް ތިބާ ތަންފީޒުކުރާ އިންޓަރފޭސް ވިޖެޓްގެ ސީދާ ވައްތަރަށް ބަލާފައި ތަފާތުވާނެއެވެ. މި ބައިގައިވާ މިސާލުތަކުން ހުށަހަޅާފައިވާ މަދު، ކޭސްތަކަށް ޚާއްޞަ ގޮތްތަކެއް ލިބިގެންދެއެވެ..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

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

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

.input-group-addonއަޅުގަނޑުމެން އެއް ފަރާތެއްގައި ގިނަ އެޑް-އޮންތަކެއް ( ނުވަތަ .input-group-btn) އަށް ސަޕޯޓް ނުކުރަމެވެ .

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

@

@ މިސާލު.ކޮމް އެވެ

$ އެވެ .00 އެވެ

https://މިސާލު.ކޮމް/ޔޫޒަރުން/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

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

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

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

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

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ބަޓަން އެޑޮންސް އެވެ

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ޑްރޮޕްޑައުންތަކާއެކު ހުންނަ ބަޓަންތަކެވެ

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

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

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

އެތައް ބަޓަނެއް

ކޮންމެ ފަރާތަކަށް އެންމެ އެޑްއޮން އެއް ބެހެއްޓޭއިރު، އެއް ބަޓަންއެއްގެ ތެރޭގައި އެތައް ބަޓަންއެއް ހުރެދާނެއެވެ .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ނަވްސް އެވެ

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

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

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

ނޭވިގޭޝަންގެ ގޮތުގައި ބޭނުންކުރާ ނަވްސް އަށް ވަދެވޭނެ ގޮތް ހަދާށެވެ

role="navigation"ނޭވިގޭޝަން ބާރ އެއް ފޯރުކޮށްދިނުމަށް navs ބޭނުންކުރާނަމަ، ގެ އެންމެ ލޮޖިކަލް ޕޭރެންޓް ކޮންޓެއިނަރަށް a އިތުރުކުރުން ޔަޤީންކުރައްވާ <ul>، ނުވަތަ <nav>މުޅި ނެވިގޭޝަންގެ ވަށައިގެން އެލިމެންޓެއް އޮޅާލާށެވެ. އެ ރޯލު އަމިއްލައަށް އިތުރު ނުކުރައްވާ <ul>، މިއީ އެހީތެރި ޓެކްނޮލޮޖީތަކުން ހަގީގީ ލިސްޓެއްގެ ގޮތުގައި އިއުލާން ނުކުރެވޭނެތީ އެވެ.

ނޯޓް .nav-tabsކްލާހަށް ބޭނުންވަނީ .navބޭސް ކްލާސް އެވެ.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ހަމަ އެ އެޗްޓީއެމްއެލް ނަގާ ނަމަވެސް .nav-pillsއޭގެ ބަދަލުގައި ބޭނުން ކުރާށެވެ:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

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

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

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

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

ސަފާރީ އާއި ރެސްޕޮންސިވް ޖަސްޓިފައިޑް ނަވްސް

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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

ލިންކް ފަންކްޝަނަލިޓީއަށް އަސަރެއް ނުކުރެއެވެ

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

ޑްރޮޕްޑައުންތަކާއެކު ޓެބްތައް

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ޑްރޮޕްޑައުންސް އާއި އެކު ގިތެޔޮ ގިތެޔޮ

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ނަވްބާރެވެ

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

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

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

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

  1. ނަވްބާރ ތަކެތީގެ މިންވަރު ނުވަތަ ފުޅާމިން މަދުކުރުން.
  2. ރެސްޕޮންސިވް ޔުޓިލިޓީ ކްލާސްތައް ބޭނުންކޮށްގެން ވަކި ސްކްރީން ސައިޒްތަކެއްގައި ވަކި ނެވްބާރ ތަކެތި ފޮރުވުން .
  3. ތިބާގެ ނެވްބާ ކޮލެޕްސްޑް މޯޑާއި ހޮރައިޒޮންޓަލް މޯޑާ ދެމެދު ބަދަލުވާ ހިސާބު ބަދަލުކޮށްލާށެވެ. ވެރިއޭބަލް ކަސްޓަމައިޒް @grid-float-breakpointނުވަތަ އަމިއްލަ މީޑިއާ ކިއުއަރީ އިތުރުކުރުން.

ޖާވާސްކްރިޕްޓް ޕްލަގިން ބޭނުންވެއެވެ

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

ރެސްޕޮންސިވް ނެވްބާރ ގައި ކޮލަޕްސް ޕްލަގިން ތިބާގެ ބޫޓްސްޓްރެޕްގެ ވަރޝަންގައި ހިމަނަން ޖެހެއެވެ.

ވެއްޓިފައިވާ މޯބައިލް ނަވްބާ ބްރޭކްޕޮއިންޓް ބަދަލުކުރުން

ވިއުޕޯޓް އަށް ވުރެ ހަނިވުމުން ނެވްބާ އޭގެ ވަރުގަދަ މޮބައިލް ވިއުއަށް ކޮލެޕްސްވެ، @grid-float-breakpointވިއުޕޯޓް މަދުވެގެން @grid-float-breakpointފުޅާމިނުގައި ހުންނައިރު އޭގެ ހޮރައިޒޮންޓަލް ނޮން މޮބައިލް ވިއުއަށް ފުޅާވެގެންދެއެވެ. ނެވްބާ ކޮލެޕްސް/އެކްސްޕެންޑް ވާ ވަގުތު ކޮންޓްރޯލް ކުރުމަށްޓަކައި ލެސް ސޯސްގައި މި ވެރިއޭބަލް އެޖެސްޓް ކުރާށެވެ. ޑިފޯލްޓް ވެލިއު އަކީ 768px(އެންމެ ކުޑަ "ކުޑަ" ނުވަތަ "ޓެބްލެޓް" ސްކްރީން) އެވެ.

ނަވްބާރސް އަށް ވަދެވޭނެ ގޮތް ހަދާށެވެ

އެލިމެންޓެއް ބޭނުންކުރުން <nav>ނުވަތަ، a ފަދަ މާ ޖެނެރިކް އެލިމެންޓެއް ބޭނުންކުރާނަމަ، އެސިސްޓިވް ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް ލޭންޑްމާކް ރީޖަނެއްގެ ގޮތުގައި ސާފުކޮށް ދެނެގަތުމަށްޓަކައި، ކޮންމެ ނަވްބާރއަކަށް <div>a އިތުރުކުރުން .role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

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

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

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

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

މޯބައިލް ޑިވައިސްގެ ކެވިއޭޓްސް

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

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

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

.navbar-btnކްލާސް އަށް <button>ރެސިޑެންޓް ނުވާ އެލިމެންޓްތަކަށް އެޑްކޮށް <form>ނަވްބާރގައި ވަރުގަދައަށް ސެންޓަރ ކޮށްލާށެވެ.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

ސްޓޭންޑަރޑް ބަޓަން ކްލާސްތައް ފަދައިން , .navbar-btnބޭނުންކުރެވިދާނެ އޮން <a>އަދި <input>އެލިމެންޓްސް. ނަމަވެސް ގެ ތެރޭގައިވާ އެލިމެންޓްތަކުގެ .navbar-btnމައްޗަށް އެއްވެސް ކްލާސްތަކެއްވެސް އަދި ސްޓޭންޑަރޑް ބަޓަން ކްލާސްތައްވެސް ބޭނުންކޮށްގެން ނުވާނެއެވެ .<a>.navbar-nav

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

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftނުވަތަ .navbar-rightޔުޓިލިޓީ ކްލާސްތައް ބޭނުންކޮށްގެން، nav ލިންކްތައް، ފޯމްތައް، ބަޓަންތައް، ނުވަތަ ލިޔުންތައް އެލައިންކުރުން . ދެ ކްލާހުން ވެސް ކަނޑައެޅިފައިވާ ދިމާލަށް ސީއެސްއެސް ފްލޯޓެއް އިތުރުކުރާނެ އެވެ. މިސާލަކަށް nav ލިންކްތައް އެލައިން ކުރުމަށްޓަކައި، އެ ލިންކްތައް ވަކި <ul>ޔުޓިލިޓީ ކްލާހެއް އެޕްލައިކޮށްފައި ހުންނަ ތަނެއްގައި ބަހައްޓާށެވެ.

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

އެތައް ކޮމްޕޯނެންޓެއް ރަނގަޅަށް އެލައިން ކުރުން

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

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

ސެންޓަރ އަދި ޕެޑް ނަވްބާ ކޮންޓެންޓް އަށް ނުވަތަ އެއް އިތުރުކޮށް .navbar-fixed-topހިމަނާށެވެ ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

ބޮޑީ ޕެޑިންގ ބޭނުންވެއެވެ

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

body { padding-top: 70px; }

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

ސެންޓަރ އަދި ޕެޑް ނަވްބާ ކޮންޓެންޓް އަށް ނުވަތަ އެއް އިތުރުކޮށް .navbar-fixed-bottomހިމަނާށެވެ ..container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

ބޮޑީ ޕެޑިންގ ބޭނުންވެއެވެ

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

body { padding-bottom: 70px; }

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

ޕޭޖާ އެކު ސްކްރޯލް ކުރާ ފުލް ވިޑްތް ނެވްބާރެއް އުފައްދައިގެން ނުވަތަ ސެންޓަރަށް އިތުރުކޮށް އަދި ޕެޑް ނެވްބާ ކޮންޓެންޓް ހިމަނާށެވެ .navbar-static-top..container.container-fluid

ކްލާސްތަކާ ހިލާފަށް .navbar-fixed-*އެއްވެސް ޕެޑިންގއެއް ބަދަލުކުރަން ނުޖެހޭ body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

އިތުރުކޮށްގެން ނަވްބާރގެ ލޫކް ބަދަލުކުރާށެވެ .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ރޮށި ކޮތަޅުތަކެވެ

ނޭވިގޭޝަނަލް ހައިރާކީއެއްގެ ތެރޭގައި މިހާރު ހުރި ޞަފްޙާ ހުރި ތަން ދައްކާށެވެ.

ސީއެސްއެސް އަށް ސެޕަރޭޓަރުތައް އޮޓޮމެޓިކުން އިތުރުކުރެވެނީ :beforeއަދި content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ޕޭޖިނޭޝަން

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

ޑިފޯލްޓް ޕޭޖިނޭޝަން

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ޕޭޖިނޭޝަން ކޮމްޕޮނެންޓް ލޭބަލް ކުރުން

<nav>ޕޭޖިނޭޝަން ކޮމްޕޮނެންޓް ސްކްރީން ރީޑަރސް އާއި އެހެނިހެން އެހީތެރި ޓެކްނޮލޮޖީތައް ސްކްރީން ކުރުމަށް ނެވިގޭޝަން ސެކްޝަނެއްގެ ގޮތުގައި ދެނެގަތުމަށްޓަކައި އެލިމެންޓެއްގެ ތެރޭގައި އޮޅާފައި އޮންނަންވާނެއެވެ . މީގެ އިތުރުން، ޞަފްޙާއެއްގައި މިހާރުވެސް މިފަދަ އެއް ނެވިގޭޝަން ބައިއަށްވުރެ ގިނަ ބައި ހުރުމުގެ ފުރުސަތު ބޮޑުކަމުން (ހެޑަރގައިވާ ޕްރައިމަރީ ނެވިގޭޝަން، ނުވަތަ ސައިޑްބާ ނެވިގޭޝަން ފަދަ)، އޭގެ މަޤްޞަދު ދައްކުވައިދޭ ޑިސްކްރިޕްޓިވް aria-labelއެއް ފޯރުކޮށްދިނުމަކީ ރަނގަޅު ގޮތެކެވެ. <nav>މިސާލަކަށް، ޕޭޖިނޭޝަން ކޮމްޕޮނެންޓް ބޭނުންކޮށްގެން ސަރޗް ނަތީޖާތަކުގެ ސެޓެއްގެ މެދުގައި ދަތުރުކުރާނަމަ، އެކަށީގެންވާ ލޭބަލެއް ވެދާނެއެވެ aria-label="Search results pages".

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

އެކި ހާލަތްތަކަށް ލިންކްތައް ކަސްޓަމައިޒް ކުރެވޭނެ އެވެ. .disabledކްލިކް ނުކުރެވޭ ލިންކްތަކަށް އަދި .activeމިހާރު ހުރި ޞަފްޙާ ދައްކާލުމަށް ބޭނުން ކުރާށެވެ .

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

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

ފެންސީ ބޮޑު ނުވަތަ ކުޑަ ޕޭޖިނޭޝަން ހެއްޔެވެ؟ އިތުރުކުރުން .pagination-lgނުވަތަ .pagination-smއިތުރު ސައިޒްތަކަށް.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ޕޭޖަރ އެވެ

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

ޑިފޯލްޓް މިސާލެވެ

ބައި ޑިފޯލްޓްކޮށް، ޕޭޖަރ ސެންޓަރ ލިންކްތައް.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

ނުވަތަ ކޮންމެ ލިންކެއް އެއްފަރާތްތަކަށް އެލައިން ކުރެވިދާނެއެވެ:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

އިޚްތިޔާރީ ނުކުޅެދުންތެރިކަން ހުންނަ ޙާލަތެވެ

ޕޭޖަރ ލިންކްތަކުގައި ވެސް ޕޭޖިނޭޝަން އިން ޖެނެރަލް .disabledޔުޓިލިޓީ ކްލާސް ބޭނުން ކުރެއެވެ.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ލޭބަލްތައް

މިސާލު

މިސާލު ސުރުޚީ އައު

މިސާލު ސުރުޚީ އައު

މިސާލު ސުރުޚީ އައު

މިސާލު ސުރުޚީ އައު

މިސާލު ސުރުޚީ އައު
މިސާލު ސުރުޚީ އައު
<h3>Example heading <span class="label label-default">New</span></h3>

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

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

ޑިފޯލްޓް ޕްރައިމަރީ ސަކްސެސް އިންފޯ ވާނިންގ ޑޭންޖަރ
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ޓަނުން ޓަނަށް ލޭބަލް ޖަހާފައިވޭތޯ؟

ރެންޑަރިންގ މައްސަލަތައް ދިމާވެދާނެ، ހަނި ކޮންޓެއިނަރެއްގެ ތެރޭގައި ދިހަވަރަކަށް އިންލައިން ލޭބަލް ހުންނައިރު، ކޮންމެ ކޮންޓެއިނަރެއްގައިވެސް އޭގެ އަމިއްލަ inline-blockއެލިމެންޓެއް (އައިކޮން އެއް ފަދައިން) ހުރެއެވެ. މިކަމާ ކުރިމަތިލާން ޖެހޭ ގޮތަކީ ސެޓިންގ display: inline-block;އެވެ . ކޮންޓެކްސްޓާއި މިސާލަކަށް ބަލާއިރު #13219 ބައްލަވާށެވެ .

ބެޖްތައް

<span class="badge">ލިންކްތަކާއި، ބޫޓްސްޓްރެޕް ނެވްސް، އަދި އެހެނިހެން ކަންކަމަށް އެއް އިތުރުކޮށްގެން އާ ނުވަތަ ނުކިޔާ ތަކެތި ފަސޭހައިން ހައިލައިޓް ކުރެވޭނެއެވެ.

އިންބޮކްސް އެވެ42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

އަމިއްލައަށް ވެއްޓިގެން ދިއުމެވެ

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

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

އިންޓަނެޓް އެކްސްޕްލޯރަރ 8 ގައި ބެޖްތައް ސެލްފް ކޮލަޕްސް ނުވާނެ ސަބަބަކީ :emptyސެލެކްޓަރަށް ސަޕޯޓް ނެތުމުންނެވެ.

އެކްޓިވް ނެވް ސްޓޭޓްތަކަށް އެޑެޕްޓް ވެއެވެ

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ޖަމްބޮޓްރޯން އެވެ

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

ހެލޯ، ދުނިޔެ!

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

އިތުރަށް ދަސްކުރައްވާ

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

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

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

ޞަފްޙާގެ ހެޑަރ

h1ޞަފްޙާއެއްގައި ހުންނަ ކޮންޓެންޓްގެ ބައިތައް އެކަށީގެންވާ ގޮތެއްގައި ސްޕޭސް އައުޓްކޮށް ސެގްމެންޓް ކުރުމަށް ފަސޭހަ ޝެލްއެކެވެ . އެއީ h1's ޑިފޯލްޓް smallއެލިމެންޓްގެ އިތުރުން އެހެން ގިނަ ކޮމްޕޯނެންޓްތައް (އިތުރު ސްޓައިލްތަކާއެކު) ބޭނުންކުރެވޭނެ އެއްޗެކެވެ.

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

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

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

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

ޑިފޯލްޓް މިސާލެވެ

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ކަސްޓަމް ކޮންޓެންޓް

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

100%x200 އެވެ

ތަމްބްނެއިލް ލޭބަލް

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

ގޮށް ގޮށް

100%x200 އެވެ

ތަމްބްނެއިލް ލޭބަލް

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

ގޮށް ގޮށް

100%x200 އެވެ

ތަމްބްނެއިލް ލޭބަލް

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

ގޮށް ގޮށް

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

އެލާޓްތައް

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

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

އަސާސީ އެލާޓް މެސެޖުތަކަށް ކޮންމެ ލިޔުމަކާއި އިޚްތިޔާރީ ޑިސްމިސް ބަޓަން .alertއެއް އަދި ހަތަރު ކޮންޓެކްސްޗުއަލް ކްލާސްގެ ތެރެއިން އެއް ކްލާސް (އެބަހީ، ) ވަށާލާށެވެ..alert-success

ޑިފޯލްޓް ކްލާހެއް ނެތެވެ

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ޑިސްމިސިބަލް އެލާޓްތައް

.alert-dismissibleއިޚްތިޔާރީ އަދި ކްލޯޒް ބަޓަން އިތުރުކޮށްގެން ކޮންމެ އެލާޓެއްގެ މައްޗަށް ބިލްޑް ކުރާށެވެ.

ޖާވާސްކްރިޕްޓް އެލާޓް ޕްލަގިން ބޭނުންވެއެވެ

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ހުރިހާ ޑިވައިސްތަކެއްގައި ވެސް ރަނގަޅު ސުލޫކެއް ކަށަވަރުކުރުން

ޑޭޓާ އެޓްރިބިއުޓް <button>އާއި އެކު އެލިމެންޓް ބޭނުންކުރުން ޔަގީން ކުރައްވާށެވެ .data-dismiss="alert"

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

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ޕްރޮގްރެސް ބާރސް

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

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

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

ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީ (ސީއެސްޕީ) ކޮމްޕެޓިބިލިޓީ

ތިޔަ ވެބްސައިޓުގައި ހުއްދަ ނުދޭ ކޮންޓެންޓް ސެކިއުރިޓީ ޕޮލިސީ (ސީއެސްޕީ) އެއް އޮތްނަމަ، ތިރީގައިވާ އަޅުގަނޑުމެންގެ މިސާލުތަކުގައިވާ ގޮތަށް ޕްރޮގްރެސް ބާރ ވިޑްތްސް ސެޓް style-src 'unsafe-inline'ކުރުމަށް އިންލައިން އެޓްރިބިއުޓްސް ބޭނުން ނުކުރެވޭނެއެވެ . styleހަރުކަށި ސީއެސްޕީތަކާ އެއްގޮތްވާ ފުޅާމިންތައް ސެޓްކުރުމަށް ބޭނުންކުރާ ބަދަލު ގޮތްތަކުގެ ތެރޭގައި ކުޑަކޮށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުންކުރުން (އެއީ ސެޓްކުރާ element.style.width) ނުވަތަ ކަސްޓަމް ސީއެސްއެސް ކްލާސްތައް ބޭނުންކުރުން ހިމެނެއެވެ.

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

ޑިފޯލްޓް ޕްރޮގްރެސް ބާރ.

60% ފުރިހަމަ
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ލޭބަލް އާއި އެކު

ފެންނަ ޕަސެންޓެއް ދައްކާލުމަށްޓަކައި ޕްރޮގްރެސް ބާރ ގެ ތެރެއިން <span>ވިތު ކްލާސް ނައްތާލާށެވެ ..sr-only

60% އެވެ.
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

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

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެވެ

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

40% ފުރިހަމަ (ކާމިޔާބު)
20% ފުރިހަމަ
60% ފުރިހަމަ (އިންޒާރު)
80% ފުރިހަމަ (ނުރައްކާ)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ސްޓްރައިޕްޑް އެވެ

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

40% ފުރިހަމަ (ކާމިޔާބު)
20% ފުރިހަމަ
60% ފުރިހަމަ (އިންޒާރު)
80% ފުރިހަމަ (ނުރައްކާ)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

އެނިމޭޓެޑް އެވެ

ކަނާތުން ވާތް ފަރާތަށް ސްޓްރައިޕްތައް އެނިމޭޓް ކުރުމަށް ޓު އަށް .activeއިތުރު ކުރާށެވެ . .progress-bar-stripedއައިއީ9 އާއި އޭގެ ދަށުގައި ލިބެން ނެތެވެ.

45% ފުރިހަމަ
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ސްޓޭކް ކޮށްފައި

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

35% ފުރިހަމަ (ކާމިޔާބު)
20% ފުރިހަމަ (އިންޒާރު)
10% ފުރިހަމަ (ނުރައްކާ)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

މީޑިއާގެ އެއްޗެއް

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

ޑިފޯލްޓް މީޑިއާ

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

މީޑިއާ ހެޑިންގ އެވެ

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

މީޑިއާ ހެޑިންގ އެވެ

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

ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

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

މީޑިއާ ހެޑިންގ އެވެ

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

މީޑިއާ ހެޑިންގ އެވެ

ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ، އިން ގްރެވިޑާ ނޫލާ. ނޫލާ ވެލް މެޓަސް ސެލެރިސްކް އެންޓޭ ސޮލިސިޓިއުޑިން ކޮމޮޑޯ. ކްރާސް ޕިއުރަސް އޮޑިއޯ، ވެސްޓިބިއުލަމް އިން ވަލްޕުޓޭޓް އެޓް، ޓެމްޕަސް ވިވެރާ ޓަރޕިސް.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

އެ ކްލާސްތައް .pull-leftއަދި .pull-rightވެސް އުފެދިފައިވާ އަދި ކުރިން މީޑިއާ ކޮމްޕޮނެންޓްގެ ބައެއްގެ ގޮތުގައި ބޭނުންކުރި ނަމަވެސް v3.3.0 ގެ ނިޔަލަށް އެ ބޭނުންކުރުމަށް ޑިޕްރެކޭޓް ކުރެވިފައިވެއެވެ. އެއީ ގާތްގަނޑަކަށް .media-leftއަދި އާއި އެއްވަރު އެއްޗެހި .media-rightކަމުގައި ވިޔަސް، އެކަން ފިޔަވައި އެއަށްފަހު html ގައި .media-rightބަހައްޓަން ޖެހެއެވެ ..media-body

މީޑިއާ އެލައިންމަންޓް

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

ޓޮޕް އެލައިންޑް މީޑިއާ

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

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

މެދުތެރެއިން ގުޅިފައިވާ މީޑިއާ

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

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

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

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

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

މީޑިއާ ލިސްޓެވެ

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

  • މީޑިއާ ހެޑިންގ އެވެ

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

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

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

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

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

    ނެސްޓް ކޮށްފައިވާ މީޑިއާ ހެޑިންގ

    ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ، އިން ގްރެވިޑާ ނޫލާ. ނޫލާ ވެލް މެޓަސް ސެލެރިސްކް އެންޓޭ ސޮލިސިޓިއުޑިން ކޮމޮޑޯ. ކްރާސް ޕިއުރަސް އޮޑިއޯ، ވެސްޓިބިއުލަމް އިން ވަލްޕުޓޭޓް އެޓް، ޓެމްޕަސް ވިވެރާ ޓަރޕިސް.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

ލިސްޓް ގްރޫޕް

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

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

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

  • ކްރާސް ޖަސްޓޯ އޮޑިއޯ
  • ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
  • މޯރބީ ލިއޯ ރިސަސް އެވެ
  • ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
  • ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ބެޖްތައް

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

  • 14ކްރާސް ޖަސްޓޯ އޮޑިއޯ
  • 2ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
  • 1މޯރބީ ލިއޯ ރިސަސް އެވެ
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ލިންކް ކުރެވިފައިވާ ތަކެތި

ލިސްޓް ގްރޫޕް އައިޓަމްތައް ލިންކްފައި ކުރާނީ ލިސްޓް އައިޓަމްތަކުގެ ބަދަލުގައި އެންކަރ ޓެގް ބޭނުންކޮށްގެން (އެއީ ވެސް ޕޭރެންޓެއްގެ <div>ބަދަލުގައި ބެލެނިވެރިއެއް <ul>) އެވެ. ކޮންމެ އުނިއިތުރެއްގެ ވަށައިގެން ވަކިވަކި ބެލެނިވެރިންގެ ބޭނުމެއް ނެތެވެ.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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

ލިސްޓް ގްރޫޕް އައިޓަމްތަކަކީ ލިސްޓް އައިޓަމްތަކުގެ ބަދަލުގައި ބަޓަންތަކަކަށް ވެދާނެއެވެ (އެއީ ވެސް މާނައަކީ އެއްގެ <div>ބަދަލުގައި ބެލެނިވެރިއެއް <ul>). ކޮންމެ އުނިއިތުރެއްގެ ވަށައިގެން ވަކިވަކި ބެލެނިވެރިންގެ ބޭނުމެއް ނެތެވެ. މިތަނުގައި ސްޓޭންޑަރޑް ކްލާސްތައް ބޭނުން ނުކުރައްވާށެވެ ..btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

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

ނުކުޅެދުންތެރިކަން ހުންނަ ގޮތަށް ފެންނަން ގްރޭ އައުޓް ކުރުމަށް .disableda އަށް އެޑް ކުރާށެވެ ..list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

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

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

  • ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
  • ކްރާސް ސިޓް އަމެޓް ނިބް ލިބަރޯ
  • ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
  • ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ކަސްޓަމް ކޮންޓެންޓް

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ޕެނަލްތަކެވެ

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

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

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

އަސާސީ ޕެނަލްގެ މިސާލެވެ
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ސުރުޚީ ޖަހާފައިވާ ޕެނަލް

ފަސޭހައިން ތިބާގެ ޕެނަލަށް ހެޑިންގ ކޮންޓެއިނަރެއް އިތުރުކޮށްލާށެވެ .panel-heading. އަދި ކުރިން ސްޓައިލްކޮށްފައިވާ ސުރުޚީއެއް އިތުރުކުރުމަށްޓަކައި ކްލާހަކާއެކު އެއްވެސް <h1>- <h6>އެއް ހިމަނާލެވިދާނެއެވެ . .panel-titleނަމަވެސް <h1>- ގެ ފޮންޓް ސައިޒްތައް <h6>އޯވަރރައިޑް ކުރެވެނީ .panel-heading.

ރަނގަޅަށް ލިންކް ކުލަ ޖައްސަން ބޭނުންނަމަ، ގެ ތެރޭގައި ހުންނަ ސުރުޚީތަކުގައި ލިންކްތައް ބެހެއްޓުން ޔަގީން ކުރައްވާށެވެ .panel-title.

ސުރުޚީއެއް ނެތި ޕެނަލް ހެޑިންގ
ޕެނަލް ކޮންޓެންޓް

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

ޕެނަލް ކޮންޓެންޓް
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ކޮންޓެކްސްޗުއަލް އަލްޓަރނޭޓިވްސް އެވެ

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

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް

ޕެނަލްގެ ސުރުޚީ

ޕެނަލް ކޮންޓެންޓް
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

މޭޒުތަކާއެކުގައެވެ

.tableސީމްލޭސް ޑިޒައިންއަކަށް ޕެނަލެއްގެ ތެރެއަށް އެއްވެސް ނޮން ބޯޑަރެއް އިތުރުކޮށްލާށެވެ . އެއް އޮތްނަމަ .panel-body، ވަކިކުރުމަށްޓަކައި އަޅުގަނޑުމެން ތާވަލުގެ މައްޗަށް އިތުރު ބޯޑަރެއް އިތުރުކުރަމެވެ.

ޕެނަލް ހެޑިންގ

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

# ފުރަތަމަ ނަން ފަހު ނަން ޔޫޒަރނޭމް
1 މާކިން އެވެ އޮޓޯ އެވެ @mdo
2 ޔަޢުޤޫބުވެ ތޯންޓަން އެވެ @ފަލަ
3 ލާރީ އެވެ ދަ ބާރޑް އެވެ @twitter އިން ލިބޭނެއެވެ
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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

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

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ލިސްޓް ގްރޫޕްތަކާއެކު

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

ޕެނަލް ހެޑިންގ

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

  • ކްރާސް ޖަސްޓޯ އޮޑިއޯ
  • ޑަޕިބަސް އޭސީ ފެސިލިސިސް އިން
  • މޯރބީ ލިއޯ ރިސަސް އެވެ
  • ޕޯޓާ އޭސީ ކޮންސެކްޓެޓޫރ އޭސީ
  • ވެސްޓިބިއުލަމް އެޓް އެރޯސް އެވެ
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ރެސްޕޮންސިވް އެންބެޑް

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

ޤަވާޢިދުތައް ސީދާ ޢަމަލުކުރެވެނީ <iframe>, <embed>, <video>, އަދި <object>އުފެއްދުންތަކަށް؛ .embed-responsive-itemއިޚްތިޔާރީ ގޮތެއްގައި އެހެން އެޓްރިބިއުޓްތަކަށް ސްޓައިލިންގ އެއްގޮތް ކުރަން ބޭނުންވާ ވަގުތު އެކްސްޕްލިސިޓް ޑިސެންޑެންޓް ކްލާހެއް ބޭނުން ކުރާށެވެ.

ޕްރޯ ޓިޕް! އަޅުގަނޑުމެން ތިޔަބޭފުޅުންނަށްޓަކައި އެކަން އޯވަރރައިޑް ކުރާތީ frameborder="0"ތިޔަބޭފުޅުންގެ s ގައި ހިމަނަން ނުޖެހޭނެ .<iframe>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ވެލްސް އެވެ

ޑިފޯލްޓް ރަނގަޅަށް

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

ބަލަ އަހަރެން މިހުރީ ވަޅެއްގައި!
<div class="well">...</div>

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

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

ބަލަ އަހަރެން މިހުރީ ބޮޑު ވަޅެއްގައި!
<div class="well well-lg">...</div>
ބަލަ އަހަރެން މިހުރީ ކުޑަ ވަޅުގަނޑެއްގަ!
<div class="well well-sm">...</div>