Ƙungiyar maɓalli

Ƙirƙiri jerin maɓalli tare akan layi ɗaya tare da rukunin maɓalli, kuma ku yi ƙarfi sosai tare da JavaScript.

Misali na asali

Kunna jerin maɓalli tare da .btnciki .btn-group. Ƙara radiyon JavaScript na zaɓin zaɓi da halayen salon akwati tare da plugin ɗin mu .

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

Tabbatar da daidai `role`kuma samar da lakabi

Domin fasahar taimako (kamar masu karanta allo) don isar da cewa an haɗa jerin maɓallan, ana rolebuƙatar samar da sifa mai dacewa. Ga ƙungiyoyin maɓalli, wannan zai zama role="group", yayin da kayan aiki ya kamata su sami role="toolbar".

Bugu da kari, ya kamata a bai wa kungiyoyi da sandunan kayan aiki tambari bayyananne, saboda yawancin fasahohin taimako ba za su sanar da su ba, duk da kasancewar madaidaicin sifa. A cikin misalan da aka bayar a nan, muna amfani da aria-label, amma madadin irin su aria-labelledbyza a iya amfani da su.

Haɗa rukunin ƙungiyoyin maɓalli cikin maɓalli na kayan aiki don ƙarin hadaddun abubuwa. Yi amfani da azuzuwan masu amfani kamar yadda ake buƙata don fitar da ƙungiyoyi, maɓalli, da ƙari.

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

Jin kyauta don haɗa ƙungiyoyin shigarwa tare da ƙungiyoyin maɓalli a cikin sandunan kayan aikin ku. Hakazalika da misalin da ke sama, ƙila za ku buƙaci wasu kayan aiki ko da yake don sanya abubuwa yadda ya kamata.

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

Girman girma

Maimakon yin amfani da azuzuwan girman maɓallin maɓalli zuwa kowane maɓalli a cikin rukuni, kawai ƙara .btn-group-*zuwa kowane .btn-group, gami da kowane ɗaya lokacin da ake saka ƙungiyoyi masu yawa.

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

Gurasa

Sanya a .btn-groupcikin wani .btn-grouplokacin da kake son menu na zaɓuka gauraye da jerin maɓalli.

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

Bambancin tsaye

Yi saitin maɓalli ya bayyana a tsaye a tsaye maimakon a kwance. Ba a tallafawa zazzagewar maɓalli a nan.

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