Button kuw no

Fa button ahorow a ɛtoatoa so bom wɔ line biako so ne button kuw no, na fa JavaScript ma wɔn tumi kɛse.

Nhwɛso titiriw

Fa mu kyekyere bɔtn ahorow a ɛtoatoa so no .btnho .btn-group. Fa ka JavaScript radio a wopɛ ne checkbox style suban ho denam yɛn buttons plugin no so .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Hwɛ sɛ ɛteɛ `role`na fa ahyɛnsode bi ma

Sɛnea ɛbɛyɛ a mfiridwuma a ɛboa (te sɛ screen readers) bɛda no adi sɛ wɔaboaboa bɔtn ahorow a ɛtoatoa so ano no, roleɛsɛ sɛ wɔde su a ɛfata ma. Wɔ bɔtn akuw ho no, eyi bɛyɛ role="group", bere a ɛsɛ sɛ adwinnade ahorow no nya role="toolbar".

Bio nso, ɛsɛ sɛ wɔma akuw ne nnwinnade ahorow no agyiraehyɛde a ɛda adi pefee, efisɛ sɛ ɛnte saa a, mmoa mfiridwuma dodow no ara remmɔ amanneɛ, ɛmfa ho sɛ dwuma su a ɛfata wɔ hɔ no. Wɔ nhwɛso ahorow a wɔde ama wɔ ha no mu no, yɛde aria-label, nanso wobetumi de akwan foforo te sɛ nea aria-labelledbywobetumi nso adi dwuma.

Ka button akuw ahorow bom yɛ button adwinnade ahorow ma nneɛma a ɛyɛ den kɛse. Fa utility classes di dwuma sɛnea ɛho hia na fa space out akuw, buttons, ne nea ɛkeka ho.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

Fa ahofadi de nsɛm a wɔde hyɛ mu akuw ne bɔtn akuw frafra wɔ wo nnwinnade ahorow mu. Te sɛ nhwɛso a ɛwɔ atifi hɔ no, ɛda adi sɛ wubehia utilities binom de, nanso sɛ wobɛma nneɛma ahunmu yiye.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Sizing a wɔde yɛ nneɛma

Sɛ anka wode button sizing classes bedi dwuma wɔ button biara a ɛwɔ kuw bi mu no, fa ka .btn-group-*biara ho kɛkɛ .btn-group, a emu biara ka ho bere a woreyɛ nesting akuw pii no.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

Nesting a wɔde yɛ buw

Fa a .btn-groupto foforo mu .btn-groupbere a wopɛ sɛ wode dropdown menus frafra button ahorow a ɛtoatoa so no.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

Nsakrae a ɛba gyina hɔ

Ma bɔton ahorow bi nyɛ te sɛ nea wɔaboaboa ano tẽẽ sen sɛ ɛbɛda adi sɛ ɛbɛkɔ soro. Split button dropdowns no ntumi mmoa wɔ ha.

<div class="btn-group-vertical">
  ...
</div>