Source

Kikundi cha kifungo

Panga mfululizo wa vitufe pamoja kwenye mstari mmoja ukitumia kikundi cha vitufe, na uvipe nguvu zaidi kwa kutumia JavaScript.

Mfano wa msingi

Funga mfululizo wa vifungo na .btnin .btn-group. Ongeza kwenye redio ya hiari ya JavaScript na tabia ya mtindo wa kisanduku cha kuteua ukitumia programu-jalizi yetu ya vitufe .

<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>
Hakikisha kuwa sahihi rolena utoe lebo

Ili teknolojia za usaidizi (kama vile visoma skrini) zionyeshe kwamba mfululizo wa vitufe vimepangwa, rolesifa inayofaa inapaswa kutolewa. Kwa vikundi vya vitufe, hii itakuwa role="group", wakati upau wa vidhibiti unapaswa kuwa na role="toolbar".

Kwa kuongezea, vikundi na upau wa vidhibiti vinapaswa kupewa lebo wazi, kwani teknolojia nyingi za usaidizi hazitazitangaza, licha ya uwepo wa sifa sahihi ya jukumu. Katika mifano iliyotolewa hapa, tunatumia aria-label, lakini njia mbadala kama vile aria-labelledbyzinaweza kutumika pia.

Upau wa vidhibiti

Changanya seti za vikundi vya vitufe kwenye upau wa vidhibiti kwa vipengee ngumu zaidi. Tumia madarasa ya matumizi inavyohitajika ili kutenganisha vikundi, vitufe na zaidi.

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

Jisikie huru kuchanganya vikundi vya ingizo na vikundi vya vitufe kwenye upau wako wa vidhibiti. Sawa na mfano hapo juu, utahitaji huduma zingine ingawa ili kuweka vitu vizuri.

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

Ukubwa

Badala ya kutumia madarasa ya kupanga vitufe kwa kila kitufe kwenye kikundi, ongeza tu .btn-group-*kwa kila moja .btn-group, ikijumuisha kila moja unapoweka vikundi vingi.



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

Nesting

Weka .btn-groupndani ya nyingine .btn-groupunapotaka menyu kunjuzi zilizochanganywa na msururu wa vitufe.

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

Tofauti ya wima

Fanya seti ya vitufe ionekane ikiwa imepangwa kwa safu wima badala ya mlalo. Viteremsho vya vitufe vya kugawanya havitumiki hapa.

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