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

Як қатор тугмаҳоро дар як сатр бо гурӯҳи тугмаҳо гурӯҳбандӣ кунед ва онҳоро бо JavaScript пурқувват кунед.

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

Як қатор тугмаҳоро бо .btnдар .btn-group. Бо плагини тугмаҳои мо ба радиои ихтиёрии JavaScript ва рафтори услуби қуттии қайд илова кунед .

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

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

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

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

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

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

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

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

Андоза

Ба ҷои татбиқ кардани синфҳои андозагирии тугмаҳо ба ҳар як тугма дар гурӯҳ, танҳо .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-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>

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

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

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