ބެޖްތައް

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

މިސާލު

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>

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

ބެޖްތައް އިތުރަށް ވަށައިގެން ހެދުމަށް މޮޑިފައި ކްލާސް ބޭނުން ކުރާށެވެ .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>