Source

Grŵp botwm

Rhowch gyfres o fotymau gyda'i gilydd ar un llinell gyda'r grŵp botymau, a'u pweru â JavaScript.

Enghraifft sylfaenol

Lapiwch gyfres o fotymau gyda .btnmewn .btn-group. Ychwanegu ar radio JavaScript dewisol ac ymddygiad arddull blwch ticio gyda'n ategyn botymau .

<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>
Sicrhewch fod yn gywir rolea rhowch label

Er mwyn i dechnolegau cynorthwyol (fel darllenwyr sgrin) gyfleu bod cyfres o fotymau wedi'u grwpio, mae roleangen darparu priodoledd priodol. Ar gyfer grwpiau botwm, byddai hyn yn role="group", tra dylai bariau offer gael role="toolbar".

Yn ogystal, dylid rhoi label clir i grwpiau a bariau offer, gan na fydd y rhan fwyaf o dechnolegau cynorthwyol yn eu cyhoeddi fel arall, er gwaethaf presenoldeb y nodwedd rôl gywir. Yn yr enghreifftiau a ddarperir yma, rydym yn defnyddio aria-label, ond aria-labelledbygellir defnyddio dewisiadau eraill fel y rhain hefyd.

Bar offer botwm

Cyfuno setiau o grwpiau botwm yn fariau offer botwm ar gyfer cydrannau mwy cymhleth. Defnyddiwch ddosbarthiadau cyfleustodau yn ôl yr angen i osod bylchau mewn grwpiau, botymau a mwy.

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

Mae croeso i chi gymysgu grwpiau mewnbwn gyda grwpiau botwm yn eich bariau offer. Yn debyg i'r enghraifft uchod, mae'n debyg y bydd angen rhywfaint o gyfleustodau arnoch er mwyn gosod pethau'n iawn.

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

Maintioli

Yn hytrach na chymhwyso dosbarthiadau maint botwm i bob botwm mewn grŵp, ychwanegwch .btn-group-*at bob un .btn-group, gan gynnwys pob un wrth nythu grwpiau lluosog.



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

Nythu

Rhowch un .btn-groupo fewn un arall .btn-grouppan fyddwch chi eisiau dewislenni wedi'u cymysgu â chyfres o fotymau.

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

Amrywiad fertigol

Gwnewch i set o fotymau ymddangos wedi'u pentyrru'n fertigol yn hytrach nag yn llorweddol. Ni chefnogir cwymplenni botwm hollti yma.

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