Bɔtin grup

Grup wan siriɔs bɔtin dɛn togɛda na wan layn wit di bɔtin grup, ɛn supa-pawa dɛn wit JavaSkript.

Besik ɛgzampul

Rap wan siriɔs bɔtin dɛn wit .btnin .btn-group. Ad pan opshɔnal JavaSkript redio ɛn chɛkbɔks stayl bihayvya wit wi bɔtin dɛn plɔgin .

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

Mek shɔ se kɔrɛkt `role`ɛn gi yu wan lɛbl

Fɔ mek dɛn ebul fɔ ɛp tɛknɔlɔji dɛn (lɛk skrin rida dɛn) fɔ sho se dɛn dɔn grup wan siriɔs bɔtin dɛn, roledɛn nid fɔ gi wan atribyut we fit. Fɔ bɔtin grup dɛn, dis go bi role="group", we di tulba dɛn fɔ gɛt wan role="toolbar".

Apat frɔm dat, dɛn fɔ gi grup ɛn tulba dɛn wan klia lɛbul, bikɔs bɔku pan di ɛtɛknɔlɔji dɛn we de ɛp ɔda we nɔ go anɔys dɛn, pan ɔl we di kɔrɛkt rol atribyut de. Insay di ɛgzampul dɛn we dɛn gi ya, wi de yuz aria-label, bɔt dɛn aria-labelledbykin yuz ɔda we dɛn lɛk bak.

Kɔmbayn sɛt dɛn fɔ bɔtin grup dɛn insay bɔtin tulba dɛn fɔ mɔ kɔmpleks kɔmpɔnɛnt dɛn. Yuz yutiliti klas dɛn as nid de fɔ spɛs grup dɛn, bɔtin dɛn, ɛn ɔda tin dɛn.

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

Fil fri fɔ miks input grup dɛn wit bɔtin grup dɛn na yu tulba dɛn. Semweso lɛk di ɛgzampul we de ɔp, yu go mɔs nid sɔm yutiliti dɛn pan ɔl we fɔ spɛshal tin dɛn fayn fayn wan.

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

Sayz fɔ di sayz

Insted fɔ yuz bɔtin saiz klas dɛn to ɛvri bɔtin na wan grup, jɔs ad .btn-group-*to ɛni wan pan dɛn .btn-group, inklud ɛni wan pan dɛn we yu de nest bɔku grup dɛn.

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

Fɔ mek dɛn nɛst

Put wan .btn-groupinsay ɔda wan .btn-groupwe yu want drɔpdɔwn mɛnyu dɛn miks wit wan siriɔs bɔtin dɛn.

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

Vɛtikal chenj

Mek wan sɛt fɔ bɔtin dɛn tan lɛk se dɛn stak dɛn ɔpsayd pas fɔ sho dɛn ɔrizɔntal wan. Split bɔtin drɔpdɔwn dɛn nɔ de sɔpɔt ya.

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