Source

Garee buttooni

Qabduulee walduraa duubaan sarara tokko irratti garee qaree waliin garee, fi JaavaScript waliin humna ol'aanaa itti kenni.

Fakkeenya bu’uuraa

Qabduulee walduraa duubaan jiran .btnin tiin marsi .btn-group. Raadiyoo JaavaScript filannoo fi amala akkaataa sanduuqa filannoo irratti dabali qaree keenyaan .

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

Sirrii ta’uu isaa mirkaneessuu `role`fi asxaa kennuu

Teeknooloojiiwwan gargaaraa (kan akka dubbistoota iskiriinii) qaree walduraa duubaan garee ta'uu isaanii dabarsuudhaaf, roleamalli sirrii ta'e kennamuu qaba. Gareewwan qareedhaaf, kun role="group", yeroo ta'u, barruulee meeshaalee qabaachuu qabu role="toolbar".

Dabalataanis, gareewwanii fi barruulee meeshaalee asxaan ifa ta'e kennamuu qaba, sababiin isaas teknooloojiiwwan gargaarsaa baay'een isaanii yoo kana hin taane, amalli gahee sirrii ta'e jiraatus, isaan hin beeksisan. Fakkeenyota asitti kennaman keessatti, fayyadamna aria-label, garuu filannoowwan akka aria-labelledbyakkasumas fayyadamuu ni danda'u.

Tuuta gareewwan qaree gara barruulee meeshaalee qaree qaamolee walxaxaa ta'aniif walitti qabi. Gareewwan, qareewwanii fi kkf addaan baasuuf akka barbaachisummaa isaatti gitaalee faayidaa fayyadami.

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

Gareewwan galtee gareewwan qaree waliin barruulee meeshaalee kee keessatti walitti makuuf bilisa ta'i. Fakkeenya armaan olii wajjin wal fakkaata, wantoota sirriitti iddoo biraatti galchuuf ta'us faayidaa tokko tokko si barbaachisuu hin oolu.

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

Saayizii gochuu

Gitoota safara qaree garee keessatti qaree hundaaf hojii irra oolchuu mannaa , tokkoon tokkoon , yeroo gareewwan hedduu man'ee .btn-group-*gootu tokkoon .btn-grouptokkoo dabalatee qofa dabali.

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

Koonyaa gochuu

Yeroo menuwwan tarree qareewwan walduraa duubaan makaman barbaaddu a .btn-groupkan biraa keessa kaa'i ..btn-group

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

Jijjiirama dhaabbataa

Tuuta qaree akka qajeelaa osoo hin taane dhaabbataadhaan tuulame akka mul'atu godhi. Tarreewwan qaree addaan ba'uu asitti hin deeggaraman.

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