ބެޖްތައް
ބެޖްތަކަށް ލިޔެކިޔުންތަކާއި މިސާލުތައް، އަޅުގަނޑުމެންގެ ކުޑަ ކައުންޓާއި ލޭބަލިންގ ކޮމްޕޮނެންޓް.
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>