Source

Klompok tombol

Kelompokake seri tombol bebarengan ing baris siji karo grup tombol, lan super-daya karo JavaScript.

Tuladha dhasar

Bungkus serangkaian tombol nganggo .btning .btn-group. Tambahake radio JavaScript opsional lan prilaku gaya kothak kanthi plugin tombol kita .

<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>
Priksa manawa bener rolelan menehi label

Supaya teknologi assistive (kayata pembaca layar) bisa nuduhake yen seri tombol diklompokake, roleatribut sing cocog kudu diwenehake. Kanggo grup tombol, iki bakal dadi role="group", nalika toolbar kudu duwe role="toolbar".

Kajaba iku, klompok lan toolbar kudu diwenehi label sing jelas, amarga umume teknologi bantu ora bakal ngumumake, sanajan ana atribut peran sing bener. Ing conto sing kasedhiya ing kene, kita nggunakake aria-label, nanging alternatif kayata aria-labelledbyuga bisa digunakake.

Tombol toolbar

Gabungke set klompok tombol menyang toolbar tombol kanggo komponen sing luwih rumit. Gunakake kelas utilitas yen perlu kanggo nyisihake grup, tombol, lan liya-liyane.

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

Bebas bae kanggo nyampur kelompok input karo kelompok tombol ing toolbar. Kaya conto ing ndhuwur, sampeyan bakal mbutuhake sawetara utilitas sanajan kanggo nggawe papan kanthi bener.

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

ukuran

Tinimbang aplikasi tombol ukuran kelas kanggo saben tombol ing grup, mung nambah .btn-group-*kanggo saben .btn-group, kalebu saben siji nalika nesting sawetara kelompok.



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

nyarang

Selehake .btn-grouping liyane .btn-groupyen sampeyan pengin menu molor dicampur karo seri tombol.

Link gulung mudhun Link gulung mudhun 
<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>

Variasi vertikal

Nggawe sakumpulan tombol katon vertikal ditumpuk tinimbang horisontal. Dropdown tombol pamisah ora didhukung ing kene.

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