Source

Iqembu lezinkinobho

Qoqa uchungechunge lwezinkinobho ndawonye emugqeni owodwa neqembu lezinkinobho, futhi uzinike amandla amakhulu nge-JavaScript.

Isibonelo esiyisisekelo

Goqa uchungechunge lwezinkinobho ngo- .btnin .btn-group. Engeza umsakazo we-JavaScript ozikhethela wona kanye nokuziphatha kwesitayela sebhokisi lokuhlola ngezinkinobho zethu ze-plugin .

<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>
Qinisekisa ukuthi kulungile rolefuthi unikeze ilebula

Ukuze ubuchwepheshe obusizayo (njengezifundi zesikrini) budlulisele ukuthi uchungechunge lwezinkinobho luqoqiwe, kufanele rolekunikezwe isibaluli esifanele. Kumaqembu ezinkinobho, lokhu kuzoba role="group", kuyilapho amabha wamathuluzi kufanele abe ne- role="toolbar".

Ukwengeza, amaqembu namabha wamathuluzi kufanele anikezwe ilebula ecacile, njengoba iningi lobuchwepheshe obusizayo ngeke likwazise, ​​naphezu kokuba khona kwesibaluli sendima esifanele. Ezibonelweni ezinikezwe lapha, sisebenzisa aria-label, kodwa ezinye izindlela aria-labelledbyezingasetshenziswa futhi.

Ibha yamathuluzi yenkinobho

Hlanganisa amasethi amaqembu ezinkinobho ube izinkinobho zamabha wamathuluzi ukuze uthole izingxenye eziyinkimbinkimbi. Sebenzisa amakilasi ezinsiza njengoba kudingeka ukuze uhlukanise amaqembu, izinkinobho, nokunye.

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

Zizwe ukhululekile ukuhlanganisa amaqembu okokufaka namaqembu ezinkinobho kumabha akho wamathuluzi. Ngokufanayo nesibonelo esingenhla, uzodinga izinsiza ezithile ukuze ubeke izinto ngendlela efanele.

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

Ukulinganisa

Esikhundleni sokusebenzisa amakilasi okulinganisa izinkinobho kuyo yonke inkinobho eqenjini, vele wengeze .btn-group-*kweyodwa .btn-group, okuhlanganisa ngayinye lapho uhlanganisa amaqembu amaningi.



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

Ukwenza isidleke

Faka .btn-groupphakathi kokunye .btn-groupuma ufuna amamenyu okwehliswayo ahlanganiswe nochungechunge lwezinkinobho.

Isixhumanisi esidonsela phansi Isixhumanisi esidonsela phansi 
<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>

Ukuhluka okuqondile

Yenza isethi yezinkinobho zibonakale zistakwe ziqondile kunokuba zivundlile. Ukwehliswa kwenkinobho yokuhlukanisa akusekelwa lapha.

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