khawm pawg

Muab cov nyees khawm ua ke ntawm ib kab lossis muab tso rau hauv kab ntsug.

Ntawm nplooj ntawv no

Piv txwv

Qhwv ib cov nyees khawm nrog .btnrau hauv .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>

Xyuas kom tseeb `role`thiab 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.

Cov chav kawm no tseem tuaj yeem muab ntxiv rau cov pab pawg sib txuas, ua lwm txoj hauv kev rau cov .navkhoom siv navigation .

Active link Txuas Txuas

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

Cov qauv sib xyaw

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

Cov qauv qhia

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

Checkbox thiab xov tooj cua khawm pawg

Muab cov khawm zoo li lub npov thiab xov tooj cua toggle nyees khawm rau hauv ib pawg khawm saib zoo sib xws.

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>

Xov tooj cua 1 Xov tooj cua 2 Xov tooj cua 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>

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

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

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.

<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

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