Гурӯҳи тугмаҳо

Як қатор тугмаҳоро дар як сатр гурӯҳбандӣ кунед ё онҳоро дар сутуни амудӣ ҷамъ кунед.

Дар ин саҳифа

Намунаи асосӣ

Як қатор тугмаҳоро бо .btnдар .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>

Боварӣ ҳосил кунед, ки дуруст аст `role`ва нишона пешниҳод кунед

Барои он ки технологияҳои ёрирасон (масалан, хонандагони экран) фаҳмонанд, ки як қатор тугмаҳо гурӯҳбандӣ шудаанд, roleбояд атрибути мувофиқ таъмин карда шавад. Барои гурӯҳҳои тугмаҳо, ин хоҳад буд role="group", дар ҳоле ки панелҳои асбобҳо бояд дорои role="toolbar".

Илова бар ин, ба гурӯҳҳо ва панелҳои асбобҳо бояд нишони возеҳ дода шавад, зеро аксари технологияҳои ёрирасон сарфи назар аз мавҷудияти атрибути дурусти нақш онҳоро эълон намекунанд. Дар мисолҳои дар ин ҷо овардашуда, мо -ро истифода мебарем aria-label, аммо алтернативаҳои монанди aria-labelledbyинҳоро низ истифода бурдан мумкин аст.

Ин синфҳоро инчунин ба гурӯҳҳои истинодҳо ҳамчун алтернатива ба .navҷузъҳои паймоиш илова кардан мумкин аст .

Пайванди фаъол Пайванд Пайванд

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

Услубҳои омехта

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

Усулҳои тасвиршуда

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

Қуттии қайд ва гурӯҳҳои тугмаҳои радио

Қуттии аломати тугмача ва тугмаҳои ивазкунандаи радиоро ба як гурӯҳи тугмаҳои бефосила муттаҳид кунед.

Қуттии 1 Қуттии 2 Қуттии 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>

Радиои 1 Радиои 2 Радио 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>

Маҷмӯаҳои гурӯҳҳои тугмаҳоро ба панели асбобҳои тугмаҳо барои ҷузъҳои мураккабтар муттаҳид кунед. Барои ҷудо кардани гурӯҳҳо, тугмаҳо ва ғайра аз синфҳои муфид истифода баред.

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

Озод ҳис кунед, ки гурӯҳҳои вурудиро бо гурӯҳҳои тугмаҳо дар панели асбобҳои худ омехта кунед. Монанди мисоли дар боло овардашуда, ба шумо эҳтимолан ба баъзе хидматҳо лозим аст, гарчанде ки чизҳоро дуруст ҷойгир кунед.

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

Андоза

Ба ҷои татбиқ кардани синфҳои андозагирии тугмаҳо ба ҳар як тугма дар гурӯҳ, танҳо .btn-group-*ба ҳар як .btn-group, аз ҷумла ҳар якро ҳангоми ҷойгир кардани гурӯҳҳои сершумор илова кунед.

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

Лона кардан

Вақте ки шумо хоҳед, ки менюҳои афтанда бо як қатор тугмаҳо омехта шаванд, -ро .btn-groupдар дохили дигар ҷойгир кунед..btn-group

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

Тағйирёбии амудӣ

Маҷмӯи тугмаҳоро на ба таври уфуқӣ амудӣ ҷойгир кунед. Дар ин ҷо афтандаҳои тугмаҳои тақсимкунӣ дастгирӣ намешаванд.