Түйме тобы

Түймешіктер тобымен бірге бір жолға түймелер қатарын топтаңыз және оларды 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>