Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

Ẹgbẹ bọtini

Ṣe akojọpọ lẹsẹsẹ awọn bọtini papọ lori laini ẹyọkan tabi ṣopọ wọn sinu iwe inaro.

Apẹẹrẹ ipilẹ

Pa awọn bọtini kan lẹsẹsẹ pẹlu .btnsinu .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>
Rii daju pe o tọ roleati 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.

Awọn kilasi wọnyi tun le ṣafikun si awọn ẹgbẹ ti awọn ọna asopọ, bi yiyan si awọn .navpaati lilọ kiri .

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

Adalura aza

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

Awọn aza ti a ṣe ilana

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

Apoti ati awọn ẹgbẹ bọtini redio

Darapọ bọtini-bi apoti ayẹwo ati awọn bọtini yiyi redio sinu ẹgbẹ bọtini wiwa lainidi.

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

Ọpa irinṣẹ bọtini

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

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

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

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>