Ẹgbẹ bọtini

Ṣe akojọpọ lẹsẹsẹ awọn bọtini papọ lori laini ẹyọkan pẹlu ẹgbẹ bọtini, ati agbara-agbara wọn pẹlu JavaScript.

Apẹẹrẹ ipilẹ

Pa awọn bọtini kan lẹsẹsẹ pẹlu .btnsinu .btn-group. Ṣafikun redio JavaScript iyan ati ihuwasi aṣa apoti pẹlu ohun itanna awọn bọtini wa .

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

Rii daju pe o tọ `role`ati pese aami kan

Ni ibere fun awọn imọ-ẹrọ iranlọwọ (gẹgẹbi awọn oluka iboju) lati fihan pe lẹsẹsẹ awọn bọtini ti wa ni akojọpọ, ẹya ti o yẹ rolenilo lati pese. Fun awọn ẹgbẹ bọtini, eyi yoo jẹ role="group", lakoko ti awọn ọpa irinṣẹ yẹ ki o ni role="toolbar".

Ni afikun, awọn ẹgbẹ ati awọn ọpa irinṣẹ yẹ ki o fun ni aami ti o han gbangba, nitori ọpọlọpọ awọn imọ-ẹrọ iranlọwọ yoo bibẹẹkọ ko kede wọn, laibikita wiwa ipa ti o pe. Ninu awọn apẹẹrẹ ti a pese nihin, a lo aria-label, ṣugbọn awọn omiiran bii o aria-labelledbytun le ṣee lo.

Darapọ awọn akojọpọ awọn ẹgbẹ bọtini sinu awọn bọtini irinṣẹ bọtini fun awọn paati eka sii. Lo awọn kilasi IwUlO bi o ṣe nilo lati aaye si awọn ẹgbẹ, awọn bọtini, ati diẹ sii.

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

Lero ọfẹ lati dapọ awọn ẹgbẹ titẹ sii pẹlu awọn ẹgbẹ bọtini ninu awọn ọpa irinṣẹ rẹ. Iru si apẹẹrẹ loke, o le nilo diẹ ninu awọn ohun elo botilẹjẹpe lati aaye awọn nkan daradara.

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

Titobi

Dipo ti lilo awọn kilasi iwọn bọtini si gbogbo bọtini ni ẹgbẹ kan, kan ṣafikun .btn-group-*si ọkọọkan .btn-group, pẹlu ọkọọkan nigbati o ba n gbe awọn ẹgbẹ lọpọlọpọ.

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

Itẹle

Gbe kan si .btn-grouplaarin miiran .btn-groupnigba ti o ba fẹ awọn akojọ aṣayan silẹ adalu pẹlu kan lẹsẹsẹ ti awọn bọtini.

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

inaro iyatọ

Ṣe eto awọn bọtini han ni inaro tolera kuku ju petele. Awọn silẹ bọtini Pipin ko ni atilẹyin nibi.

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