Source

khawm pawg

Pab pawg ntawm cov nyees khawm ua ke ntawm ib kab nrog pawg khawm, thiab super-power lawv nrog JavaScript.

Piv txwv

Qhwv ib cov nyees khawm nrog .btnrau hauv .btn-group. Ntxiv rau qhov xaiv tau JavaScript xov tooj cua thiab checkbox style cwj pwm nrog peb cov nyees khawm plugin .

<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>
Xyuas kom tseeb rolethiab muab ib daim ntawv lo

Yuav kom pab technologies (xws li screen readers) qhia tau hais tias ib tug series ntawm cov nyees khawm yog pab pawg, ib tug tsim nyog roletus cwj pwm yuav tsum tau muab. Rau cov pab pawg khawm, qhov no yuav yog role="group", thaum toolbars yuav tsum muaj role="toolbar".

Tsis tas li ntawd, pawg thiab toolbars yuav tsum tau muab ib daim ntawv qhia meej, vim tias feem ntau cov cuab yeej pabcuam yuav tsis tshaj tawm lawv, txawm tias muaj lub luag haujlwm raug. Hauv cov piv txwv muab ntawm no, peb siv aria-label, tab sis lwm yam xws li aria-labelledbytuaj yeem siv tau.

Khawm toolbar

Muab cov pob khawm ua ke rau hauv cov khawm toolbars rau ntau cov khoom siv. Siv cov chav kawm siv hluav taws xob raws li xav tau los tso tawm cov pab pawg, cov nyees khawm, thiab ntau dua.

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

Xav tias dawb los sib xyaw cov tswv yim pab pawg nrog cov pab pawg khawm hauv koj cov toolbars. Zoo ib yam li cov piv txwv saum toj no, koj yuav xav tau qee qhov kev siv hluav taws xob txawm hais tias qhov chaw zoo.

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

Qhov loj me

Tsis txhob siv khawm qhov loj me rau txhua lub pob hauv ib pab pawg, tsuas yog ntxiv .btn-group-*rau txhua tus .btn-group, suav nrog txhua tus thaum ua zes ntau pawg.



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

Zes

Muab tso rau .btn-grouphauv lwm qhov .btn-groupthaum koj xav tau dropdown menus tov nrog cov nyees khawm.

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

Vertical variation

Ua ib txheej ntawm cov nyees khawm tshwm vertically stacked es horizontally. Split khawm dropdowns tsis txaus siab ntawm no.

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