Buidheann putanan

Cuir sreath de phutanan còmhla air aon loidhne leis a’ bhuidheann putan, agus cuir thairis iad le JavaScript.

Eisimpleir bunaiteach

Paisg sreath de phutanan le .btnin .btn-group. Cuir ris an rèidio JavaScript roghainneil agus giùlan stoidhle bogsa sgrùdaidh leis a’ plugan putanan againn .

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

Dèan cinnteach gu bheil e ceart `role`agus thoir seachad bileag

Gus an urrainn do theicneòlasan cuideachaidh (leithid leughadairean sgrion) innse gu bheil sreath de phutanan air an cruinneachadh ann am buidhnean, rolefeumar feart iomchaidh a thoirt seachad. Airson buidhnean putan, bhiodh seo role="group", agus bu chòir faidhle role="toolbar".

A bharrachd air an sin, bu chòir bileag soilleir a thoirt do bhuidhnean agus bàraichean-inneal, leis nach ainmich a’ mhòr-chuid de theicneòlasan cuideachaidh iad air dhòigh eile, a dh’ aindeoin gu bheil am feart dreuchd ceart ann. Anns na h-eisimpleirean a tha air an toirt seachad an seo, bidh sinn a’ cleachdadh aria-label, ach faodar roghainnean eile leithid aria-labelledbya chleachdadh cuideachd.

Cuir còmhla seataichean de bhuidhnean putan ann am bàraichean inneal putan airson co-phàirtean nas iom-fhillte. Cleachd clasaichean goireis mar a dh’ fheumar gus buidhnean, putanan agus barrachd a chuir a-mach.

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

Faodaidh tu buidhnean cuir a-steach a mheasgachadh le buidhnean putan anns na bàraichean inneal agad. Coltach ris an eisimpleir gu h-àrd, tha coltas ann gum bi feum agad air cuid de ghoireasan ge-tà airson rudan a chuir ceart.

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

Meudachadh

An àite clasaichean meud putan a chuir an sàs anns a h-uile putan ann am buidheann, dìreach cuir .btn-group-*ris gach .btn-group, a ’toirt a-steach gach fear nuair a bhios tu a’ neadachadh grunn bhuidhnean.

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

A' neadachadh

Cuir taobh a- .btn-groupstaigh fear eile .btn-groupnuair a tha thu ag iarraidh clàran-bìdh a tha measgaichte le sreath de phutanan.

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

Atharrachadh dìreach

Dèan seata de phutanan a’ nochdadh air an cruachadh gu dìreach seach gu còmhnard. Chan eil taic ri dropdowns putan roinnte an seo.

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