Nsɛmma nhoma no

Fa Bootstrap no custom button styles di dwuma ma nneyɛe wɔ forms, dialogs, ne nea ɛkeka ho a ɛboa ma akɛse, tebea, ne nea ɛkeka ho pii.

Nhwɛso ahorow

Bootstrap no de button ahorow pii a wɔadi kan akyerɛkyerɛ mu ka ho, a emu biara di n’ankasa nkyerɛase atirimpɔw ho dwuma, a wɔde nneɛma kakraa bi a ɛka ho a wɔtow gu mu ma wotumi di so kɛse.

<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>

Nsɛm a wɔde hyɛ bɔton mu

Wɔayɛ .btnadesua ahorow no sɛ wɔde bedi dwuma ne <button>element no. Nanso, wubetumi nso de saa adesua ahorow yi adi dwuma wɔ <a>anaa <input>nneɛma ahorow so (ɛwom sɛ browser ahorow bi betumi de nkyerɛase soronko kakra adi dwuma de).

Sɛ wode button classes redi dwuma wɔ <a>elements a wɔde kanyan in-page functionality (te sɛ collapsing content), sen sɛ wobɛfa link akɔ nkratafa foforo anaa afã horow a ɛwɔ krataafa a ɛwɔ hɔ mprempren no mu a, ɛsɛ sɛ wɔma saa links yi a sɛnea role="button"ɛbɛyɛ a ɛbɛda wɔn atirimpɔw adi yiye akɔ mfiridwuma a ɛboa te sɛ screen akenkanfo a wɔkenkan ade.

<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">

Nkyerɛkyerɛmu button ahorow

Wohia button, nanso ɛnyɛ hefty akyi kɔla ahorow a wɔde ba no? Fa nea .btn-outline-*ɛbɛyi akyi mfonini ne kɔla nyinaa a ɛwɔ bɔtn biara so no sesa default modifier classes no.

<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>

Nneɛma akɛse

Fancy akɛse anaa nketewa buttons? Fa ka ho .btn-lganaasɛ wopɛ .btn-smsɛ wonya akɛse afoforo.

<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>

Yɛ block level buttons—nea ɛtrɛw ɔwofo bi ntrɛwmu nyinaa mu—denam .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>

Tebea a ɛyɛ nnam

Bɔtɔn ahorow no bɛda adi sɛ woamia (a akyi yɛ tuntum, ɔhye a ɛyɛ tuntum, ne sunsuma a wɔde ahyɛ mu) bere a ɛreyɛ adwuma no. Ɛho nhia sɛ wode adesuakuw bi bɛka <button>s ho sɛnea wɔde pseudo-class di dwuma no . Nanso, woda so ara betumi ahyɛ ade koro no ara a ɛyɛ nnam no ne .active(na wode aria-pressed="true"su no aka ho) sɛ ɛho hia sɛ wosan yɛ tebea no wɔ nhyehyɛe kwan so a.

<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>

Tebea a wɔadi dɛm

Ma buttons no nyɛ sɛ nea ɛnyɛ adwuma denam disabledboolean attribute a wode bɛka <button>element biara ho no so.

<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>

Disabled buttons a wɔde <a>element no di dwuma no yɛ wɔn ade soronko kakra:

• <a>s ntumi mmoa disabledattribute no, enti ɛsɛ sɛ wode .disabledclass no ka ho na ama ayɛ te sɛ nea ɛyɛ adwuma wɔ aniwa so.
• Wɔde daakye-adamfofa kwan ahorow bi ka ho na ama ne nyinaa ayɛ adwuma pointer-eventswɔ anchor buttons so. Wɔ browser ahorow a ɛboa saa agyapade no mu no, worenhu cursor a wɔagyae no koraa.
• Ɛsɛ sɛ buttons a wɔadi dɛm no de aria-disabled="true"attribute no ka ho de kyerɛ element no tebea ma mmoa mfiridwuma ahorow.

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

Bɔtɔn a wɔde hyɛ mu

Fa bɔton yɛ pii. Control button states anaa yɛ buttons akuo ma components pii te sɛ toolbars.

Toggle aman ahorow

Fa ka data-toggle="button"ho na woadannan button bi activetebea. Sɛ woredi kan retoggling button bi a, ɛsɛ sɛ wode nsa ka .activeadesua no ne .aria-pressed="true"<button>

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

Checkbox ne radio so nsɛm a wɔde hyɛ mu

Bootstrap no .buttonstyles no betumi adi dwuma wɔ element afoforo te sɛ <label>s, de ama checkbox anaa radio style button toggling. Fa ka data-toggle="buttons"a .btn-groupsaa bɔtn a wɔasesa no wom no ho na ama wɔn toggling suban no ayɛ adwuma denam JavaScript so na fa ka ho .btn-group-togglema ɛyɛ style <input>s a ɛwɔ wo bɔtn no mu. Hyɛ no nsow sɛ wubetumi ayɛ button biako a ɛde input-powered anaa emu akuw.

Tebea a wɔahyɛ no agyirae ama saa bɔtn ahorow yi no yɛ nea wɔayɛ no foforo nkutoo denam clickadeyɛ a ɛwɔ bɔtn no so no so. Sɛ wode ɔkwan foforo di dwuma de sesa input no —sɛ nhwɛso no, de <input type="reset">anaasɛ wode nsa de input no checkedagyapade di dwuma —ɛho behia sɛ wode nsa toggle .activeno <label>.

Hyɛ no nsow sɛ bɔtɔn ahorow a wɔadi kan ahwɛ mu no hwehwɛ sɛ wode nsa de .activeadesuakuw no ka input no ho <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> 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" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Akwan a wɔfa so yɛ