in English

ބެޖްތައް

ބެޖްތަކަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް، އަޅުގަނޑުމެންގެ ކުޑަ ކައުންޓާއި ލޭބަލިންގ ކޮމްޕޮނެންޓް.

މިސާލު

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

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

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

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

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

މިސާލު ސުރުޚީއާ
މިސާލު ސުރުޚީއާ
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

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

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

ކޮންޓެކްސްޓް ސާފު ނުވާހާ ހިނދަކު (“ނޮޓިފިކޭޝަންސް” މިސާލުގައި ވާ ފަދައިން، “4” އަކީ ނޮޓިފިކޭޝަންތަކުގެ އަދަދުކަން ވިސްނޭ ތަނެއްގައި) ލޮލުން ފޮރުވިފައިވާ އިތުރު ލިޔުމަކާއެކު އިތުރު ކޮންޓެކްސްޓް ހިމަނަން ވިސްނާށެވެ.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

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

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

އިބްތިދާއީ ސެކަންޑަރީ އެވެ ކާމިޔާބު ނުރައްކާ އިންޒާރު އިންފޯ އަލި އަނދިރި
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
އެހީތެރި ޓެކްނޮލޮޖީތަކަށް މާނަ ފޯރުކޮށްދިނުން

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

ގިތެޔޮ ބެޖްތަކެވެ

ބެޖްތައް އިތުރަށް ވަށައިގެން ހެދުމަށް މޮޑިފައި ކްލާސް ބޭނުން ކުރާށެވެ .badge-pill(ބޮޑު border-radiusއަދި އިތުރު ހޮރައިޒޮންޓަލް އެއް އެކުގައެވެ padding). v3 އިން ބެޖްތައް ގެއްލިއްޖެނަމަ ބޭނުންތެރިއެވެ.

އިބްތިދާއީ ސެކަންޑަރީ އެވެ ކާމިޔާބު ނުރައްކާ އިންޒާރު އިންފޯ އަލި އަނދިރި
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

އެލިމެންޓެއްގެ މައްޗަށް ކޮންޓެކްސްޗުއަލް .badge-*ކްލާސްތައް ބޭނުންކުރުމުން އަވަހަށް ހޯވަރ އަދި ފޯކަސް ސްޓޭޓްތަކާއެކު އެކްޝަން ކުރެވޭ ބެޖްތައް ލިބިގެންދެއެވެ .<a>

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>