Grupo ng pindutan
Pagsama-samahin ang isang serye ng mga button sa isang linya o i-stack ang mga ito sa isang patayong column.
Pangunahing halimbawa
I-wrap ang isang serye ng mga button na may .btn
in .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>
Tiyaking tama role
at magbigay ng label
Upang maiparating ng mga pantulong na teknolohiya (gaya ng mga screen reader) na nakagrupo ang isang serye ng mga button, role
kailangang magbigay ng naaangkop na katangian. Para sa mga pangkat ng button, ito ay magiging role="group"
, habang ang mga toolbar ay dapat may role="toolbar"
.
Bilang karagdagan, ang mga pangkat at toolbar ay dapat na bigyan ng isang tahasang label, dahil karamihan sa mga teknolohiyang pantulong ay hindi mag-aanunsyo sa kanila, sa kabila ng pagkakaroon ng tamang katangian ng tungkulin. Sa mga halimbawang ibinigay dito, ginagamit namin ang aria-label
, ngunit ang mga alternatibo tulad ng aria-labelledby
ay maaari ding gamitin.
Ang mga klase na ito ay maaari ding idagdag sa mga pangkat ng mga link, bilang alternatibo sa mga .nav
bahagi ng nabigasyon .
<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>
Pinaghalong istilo
<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>
Mga nakabalangkas na istilo
<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 pangkat ng checkbox at radio button
Pagsamahin ang parang button na checkbox at radio toggle button sa isang walang putol na pangkat ng button.
<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>
<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>
Toolbar ng pindutan
Pagsamahin ang mga hanay ng mga pangkat ng button sa mga toolbar ng button para sa mas kumplikadong mga bahagi. Gumamit ng mga utility class kung kinakailangan para i-space out ang mga grupo, button, at higit 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>
Huwag mag-atubiling paghaluin ang mga pangkat ng input sa mga pangkat ng button sa iyong mga toolbar. Katulad ng halimbawa sa itaas, malamang na kailangan mo ng ilang mga utility bagaman para maayos ang mga bagay.
<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>
Pagsusukat
Sa halip na ilapat ang mga klase sa pagpapalaki ng button sa bawat button sa isang grupo, idagdag lang .btn-group-*
ang bawat .btn-group
isa , kasama ang bawat isa kapag naglalagay ng maraming 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>
Pugad
Maglagay ng isang sa .btn-group
loob ng isa pa .btn-group
kapag gusto mo ang mga dropdown na menu na may halong serye ng mga button.
<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>
Vertical variation
Gawing patayong nakasalansan ang isang hanay ng mga button sa halip na pahalang. Hindi sinusuportahan dito ang mga split button na dropdown.
<div class="btn-group-vertical">
...
</div>