Sehlopha sa konopo

Hlopha letoto la dikonope mmogo mothalong o tee le sehlopha sa dikonope, gomme o di fe maatla a magolo ka JavaScript.

Mohlala wa motheo

Phuthelela lelokelelo la dikonope ka .btnka .btn-group. Oketša ka boikhethelo JavaScript radio le checkbox setaele boitšoaro le rona dikonopo 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>

Netefatša gore e nepagetše `role`gomme o nee leina

Gore theknolotši ya go thuša (go swana le dibadi tša skrine) e fetišetše gore lelokelelo la dikonope le hlophilwe, go swanetše rolego fiwa seka sa maleba. Bakeng sa dihlopha tša dikonope, se e tla ba role="group", mola dibara tša didirišwa di swanetše go ba le role="toolbar".

Go tlaleletša, dihlopha le dibara tša didirišwa di swanetše go fiwa leina leo le lego molaleng, ka ge bontši bja theknolotši ya go thuša ka tsela ye nngwe e ka se di tsebiše, go sa šetšwe go ba gona ga seka sa tema se se nepagetšego. Mehlaleng yeo e filwego mo, re šomiša aria-label, eupša mekgwa ye mengwe ya go swana le yeo le aria-labelledbyyona e ka šomišwago.

Kopanya disete tša dihlopha tša dikonope go dibara tša didirišwa tša konope bakeng sa dikarolo tše di raraganego kudu. Šomiša diklase tša mohola ka moo go nyakegago go sepetša dihlopha, dikonope, le tše dingwe.

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

Ikwe o lokologile go hlakanya dihlopha tša go tsenya le dihlopha tša dikonope ka go dibara tša gago tša didirišwa. Go swana le mohlala wo o lego ka mo godimo, go na le kgonagalo ya gore o tla nyaka didirišwa tše dingwe le ge e le gore go sepe dilo gabotse.

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

Go lekanyetša bogolo

Go e na le go diriša diklase tša go lekanyetša bogolo bja konope go konope e nngwe le e nngwe sehlopheng, e no oketša .btn-group-*go e nngwe le e nngwe .btn-group, go akaretša le e nngwe le e nngwe ge o beakanya dihlopha tše dintši.

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

Go dira dihlaga

Bea a .btn-groupka gare ga ye nngwe .btn-groupge o nyaka dimenu tša go theoga di hlakantšwe le lelokelelo la dikonope.

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

Phapano ya go ema thwii

Dira gore sete ya dikonope e bonagale e kgobokeditšwe ka go otlologa go e na le go rapalala. Di-drolodown tša konope ya go aroganya ga di thekgwe mo.

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