Grupo sa butones

Paggrupo og sunod-sunod nga mga buton sa usa ka linya o i-stack kini sa usa ka bertikal nga kolum.

Niini nga panid

Panguna nga pananglitan

I-wrap ang usa ka serye sa mga buton gamit ang .btnin .btn-group.

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

Siguruha nga husto `role`ug paghatag usa ka label

Aron ang mga teknolohiya sa pagtabang (sama sa mga magbabasa sa screen) makapahayag nga usa ka serye sa mga buton ang gi-grupo, usa ka angay rolenga kinaiya kinahanglan nga ihatag. Alang sa mga grupo sa butones, kini mao ang role="group", samtang ang mga toolbar kinahanglan adunay usa ka role="toolbar".

Dugang pa, ang mga grupo ug mga toolbar kinahanglan nga hatagan usa ka tin-aw nga label, tungod kay ang kadaghanan sa mga teknolohiya nga makatabang nga dili kini ipahibalo, bisan pa sa presensya sa husto nga hiyas sa papel. Sa mga pananglitan nga gihatag dinhi, among gigamit ang aria-label, apan ang mga alternatibo sama sa aria-labelledbymagamit usab.

Kini nga mga klase mahimo usab nga idugang sa mga grupo sa mga link, ingon usa ka alternatibo sa mga .navsangkap sa nabigasyon .

Aktibo nga link Link Link

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Nagkasagol nga mga estilo

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Gi-outline nga mga estilo

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

Mga grupo sa checkbox ug radio button

Isagol ang sama sa buton nga checkbox ug radio toggle buttons ngadto sa usa ka seamless look button group.

Checkbox 1 Checkbox 2 Checkbox 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Radyo 1 Radyo 2 Radyo 3

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

Paghiusa sa mga set sa mga grupo sa butones ngadto sa mga toolbar sa buton alang sa mas komplikado nga mga sangkap. Gamita ang mga klase sa utility kung gikinahanglan aron mapalayo ang mga grupo, butones, ug uban pa.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">8</button>
  </div>
</div>

Mobati nga gawasnon sa pagsagol sa mga grupo sa input sa mga grupo sa butones sa imong mga toolbar. Sama sa pananglitan sa ibabaw, lagmit kinahanglan nimo ang pipila ka mga utilities bisan pa aron mabutang ang mga butang sa hustong paagi.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Pagsukod

Imbis nga i-apply ang mga klase sa pag-size sa butones sa matag buton sa usa ka grupo, idugang lang .btn-group-*ang matag usa .btn-group, lakip ang matag usa kung magsalag sa daghang mga grupo.

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

Nagsalag

Ibutang ang usa .btn-groupsa sulod sa lain .btn-groupkung gusto nimo ang mga dropdown menu nga gisagol sa usa ka serye sa mga buton.

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

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

Bertikal nga kalainan

Himoa nga ang usa ka hugpong sa mga buton makita nga patindog nga gipatong kay sa pinahigda. Ang mga dropdown sa split button wala gisuportahan dinhi.