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>

Ma nsɛm a wɔde kyekyere nneɛma ho no nyɛ adwuma

Sɛ wompɛ sɛ button no nkyerɛwee no bɛbɔ a, wubetumi de .text-nowrapadesuakuw no aka button no ho. Wɔ Sass mu no, wobɛtumi ahyɛ $btn-white-space: nowrapsɛ wobɛma nsɛm a wɔde kyekyere bɔtn biara ayɛ adwuma.

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

Buttons bɛda adi sɛ woamia bere a ɛreyɛ adwuma a akyi a ɛyɛ tuntum, ɔhye a ɛyɛ sum, ne, bere a wɔama sunsuma ahorow no ayɛ adwuma no, sunsuma a wɔde ahyɛ mu. Ɛ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 no 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 .disabledadesua 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.
• <a>Ɛsɛ sɛ button ahorow a wɔadi dɛm a wɔde di dwuma no de aria-disabled="true"su no ka ho de kyerɛ element no tebea ma mmoa mfiridwuma ahorow.
• <a> Ɛnsɛ sɛ button ahorow a wɔabara a wɔde di dwuma no de hrefsu no ka ho.

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

Link dwumadie ho kɔkɔbɔ

Sɛ wobɛkata nsɛm a ɛsɛ sɛ wode hrefattribute no sie wɔ link a wɔagyae mu so a, .disabledadesua no de di dwuma pointer-events: nonede bɔ mmɔden sɛ ɛbɛma link dwumadie a ɛwɔ <a>s no ayɛ adwuma. Hyɛ no nsow sɛ saa CSS agyapade yi nnya nyɛɛ standardized mma HTML, nanso nnɛyi browser ahorow nyinaa boa. Afei nso, wɔ browser ahorow a ɛboa pointer-events: none, mpo mu no, keyboard akwantu no da so ara nnya nkɛntɛnso biara, a ɛkyerɛ sɛ wɔn a wɔde keyboard di dwuma a wohu ade ne wɔn a wɔde mfiri a ɛboa di dwuma no bɛda so ara atumi de saa link ahorow yi ayɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, de aka ho no aria-disabled="true", fa tabindex="-1"su bi nso ka saa link ahorow yi ho na amma wɔrennya keyboard focus, na fa JavaScript a wɔahyɛ da ayɛ no di dwuma de siw wɔn dwumadi ano koraa.

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

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

Fa buttons 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">
  Single toggle
</button>

Checkbox ne radio so nsɛm

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

Akwan a wɔfa so yɛ