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

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

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

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

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

ޓެކްސްޓް ރެޕިންގ ޑިސެބިލް ކުރުން

ބަޓަން ޓެކްސްޓް ރެޕް ކުރަން ބޭނުން ނުވާނަމަ ބަޓަންއަށް .text-nowrapކްލާސް އިތުރު ކުރެވިދާނެއެވެ. $btn-white-space: nowrapސާސްގައި ކޮންމެ ބަޓަނަކަށް ޓެކްސްޓް ރެޕިންގ ޑިސެބިލް ކުރުމަށް ސެޓް ކުރެވިދާނެއެވެ .

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

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

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

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

އައުޓްލައިން ބަޓަންތައް

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

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

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

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

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

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

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

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

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

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

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

އެއްވެސް އެލިމެންޓަކަށް disabledބޫލިއަން އެޓްރިބިއުޓް އިތުރުކޮށްގެން ބަޓަންތައް އިންއެކްޓިވް ގޮތަކަށް ހެދުން .<button>

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

އެލިމެންޓް ބޭނުންކުރާ ޑިސެބިލް ކުރެވިފައިވާ ބަޓަންތަކުގެ <a>އަމަލުތައް ތަންކޮޅެއް ތަފާތު ވެއެވެ:

• <a>disableds އިން އެޓްރިބިއުޓް އަށް ސަޕޯޓް ނުކުރާތީ ، .disabledވިޝުއަލްކޮށް ޑިސެބިލް ކޮށްފައި ހުންނަ ގޮތަށް ކްލާސް އިތުރު ކުރަން ޖެހެއެވެ.
• pointer-eventsއެންކަރ ބަޓަންތަކުގައި ހުރިހާ އެއްޗެއް ޑިސެބިލް ކުރުމަށް މުސްތަގުބަލަށް ރައްޓެހި ބައެއް ސްޓައިލްތައް ހިމަނާފައިވެއެވެ . އެ ޕްރޮޕަޓީއަށް ސަޕޯޓްކުރާ ބްރައުޒާތަކުގައި، ޑިސެބިލް ކޮށްފައިވާ ކަރސަރ އެއްގޮތަކަށްވެސް ނުފެންނާނެއެވެ.
• ބޭނުންކުރާ ނުކުޅެދުންތެރިކަން ހުންނަ ބަޓަންތަކުގައި އެހީތެރި ޓެކްނޮލޮޖީތަކަށް އެލިމެންޓްގެ ހާލަތު ދައްކާނެ އެޓްރިބިއުޓް <a>ހިމަނަންވާނެއެވެ .aria-disabled="true"
• ބޭނުންކުރާ ޑިސެބިލް ކުރެވިފައިވާ ބަޓަންތަކުގައި އެޓްރިބިއުޓް ހިމެނިގެން <a> ނުވާނެއެވެ .href

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

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

hrefޑިސެބިލް ލިންކެއްގައި އެޓްރިބިއުޓް ބަހައްޓަން ޖެހޭ ހާލަތްތައް ކަވަރު ކުރުމަށްޓަކައި ، .disabledކްލާހުން ބޭނުން ކުރަނީ s ގެ pointer-events: noneލިންކް ފަންކްޝަނަލިޓީ ޑިސެބިލް ކުރަން މަސައްކަތް ކުރުމަށެވެ . <a>މި ސީއެސްއެސް ޕްރޮޕަޓީއަކީ އަދި އެޗްޓީއެމްއެލްއަށް ސްޓޭންޑަރޑައިޒް ކުރެވިފައިވާ ޕްރޮޕަޓީއެއް ނޫން ނަމަވެސް ޒަމާނީ ހުރިހާ ބްރައުޒާތަކުންވެސް މި ޕްރޮޕަޓީއަށް ސަޕޯޓްކުރާކަން ފާހަގަކޮށްލެވެއެވެ. މީގެ އިތުރުން، ސަޕޯޓް ކުރާ ބްރައުޒާތަކުގައި ވެސް pointer-events: none, ކީބޯޑް ނެވިގޭޝަނަށް އެއްވެސް އަސަރެއް ނުކުރާއިރު، މާނައަކީ ފެންނަ ކީބޯޑް ބޭނުންކުރާ ފަރާތްތަކާއި އެހީތެރި ޓެކްނޮލޮޖީތައް ބޭނުންކުރާ ފަރާތްތަކަށް އަދިވެސް މި ލިންކްތައް އެކްޓިވޭޓް ކުރެވޭނެ ކަމެވެ. އެހެންކަމުން ރައްކާތެރިވުމަށްޓަކައި، ގެ އިތުރުން ، މި ލިންކްތަކުގައި ކީބޯޑް ފޯކަސް ނުލިބޭނެ ގޮތަށް އެޓްރިބިއުޓެއް aria-disabled="true"ވެސް ހިމަނާ ، އަދި އެމީހުންގެ ފަންކްޝަނަލިޓީ އެއްކޮށް ޑިސެބިލް ކުރުމަށް ކަސްޓަމް ޖާވާސްކްރިޕްޓް ބޭނުން ކުރާށެވެ.tabindex="-1"

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ބަޓަން ޕްލަގިން އެވެ

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

ޓޮގްލް ސްޓޭޓްސް

data-toggle="button"ބަޓަނެއްގެ activeޙާލަތު ޓޮގްލް ކުރުމަށް އެޑް ކުރާށެވެ . ބަޓަނެއް ޕްރީ ޓޮގްލް ކުރާނަމަ، މެނުއަލްކޮށް .activeކްލާސް އަދި aria-pressed="true" އަށް އެޑް ކުރަން ޖެހެއެވެ <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

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

ޗެކްބޮކްސް ނުވަތަ ރޭޑިއޯ ސްޓައިލް ބަޓަން ޓޮގްލިންގ ފޯރުކޮށްދިނުމަށްޓަކައި ސް .buttonފަދަ އެހެން އެލިމެންޓްތަކަށް ބޫޓްސްޓްރެޕްގެ ސްޓައިލްތައް އެޕްލައި ކުރެވިދާނެއެވެ. އެ ބަދަލުކޮށްފައިވާ ބަޓަންތައް ހިމެނޭ ގޮތަށް ޖާވާސްކްރިޕްޓް މެދުވެރިކޮށް އެމީހުންގެ ޓޮގްލިންގ ބިހޭވިއަރ އެނެބަލް ކުރުމަށް އިތުރުކޮށް ، <label>ތިބާގެ ބަޓަންތަކުގެ ތެރޭގައި ހުންނަ s ސްޓައިލް ކުރުމަށް އިތުރުކޮށްލާށެވެ. އެއް އިންޕުޓް ޕަވަރޑް ބަޓަން ނުވަތަ އެއިން ގްރޫޕްތައް އުފެއްދިދާނެކަން ފާހަގަކޮށްލެވެއެވެ.data-toggle="buttons".btn-group.btn-group-toggle<input>

މި ބަޓަންތަކަށް ޗެކް ކުރެވިފައިވާ ސްޓޭޓް އަޕްޑޭޓް ކުރެވެނީ ހަމައެކަނިclick ބަޓަންގައި ހުންނަ އިވެންޓް މެދުވެރިކޮށެވެ. އިންޕުޓް އަޕްޑޭޓް ކުރުމަށް އެހެން ގޮތެއް ބޭނުންކުރާނަމަ- މިސާލަކަށް، <input type="reset">އިންޕުޓްގެ ޕްރޮޕަޓީ މެނުއަލްކޮށް އެޕްލައިކޮށްގެން- މެނުއަލްކޮށް checkedޓޮގްލް ކުރަން .activeޖެހޭނެއެވެ <label>.

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

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

ގޮތްތައް