Garee buttooni

Qabduulee walduraa duubaan sarara tokko irratti walitti gurmeessuu ykn tarjaa dhaabbataa keessatti tuulu.

Fuula kana irratti

Fakkeenya bu’uuraa

Qabduulee walduraa duubaan jiran .btnin tiin marsi .btn-group.

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">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.

Gitoota kun gareewwan hidhannoottis dabalamuu danda'u, akka filannoo .navqaamolee navigeeshinii .

Link sochii qabu Hidhata Hidhata

<div class="btn-group">
  <a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
  <a href="#" class="btn btn-primary">Link</a>
  <a href="#" class="btn btn-primary">Link</a>
</div>

Akkaataa walmakaa

<div class="btn-group" role="group" aria-label="Basic mixed styles example">
  <button type="button" class="btn btn-danger">Left</button>
  <button type="button" class="btn btn-warning">Middle</button>
  <button type="button" class="btn btn-success">Right</button>
</div>

Akkaataawwan ibsaman

<div class="btn-group" role="group" aria-label="Basic outlined example">
  <button type="button" class="btn btn-outline-primary">Left</button>
  <button type="button" class="btn btn-outline-primary">Middle</button>
  <button type="button" class="btn btn-outline-primary">Right</button>
</div>

Sanduuqa filannoo fi gareewwan qaree raadiyoo

Sanduuqa filannoo qaree fakkaatu fi qaree jijjiirraa raadiyoo gara garee qaree ilaaluu wal hin tuqneetti walitti qabi.

Sanduuqa filannoo 1 Sanduuqa filannoo 2 Sanduuqa filannoo 3

<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

  <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>

  <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>

Raadiyoo 1. Raadiyoo 2ffaa Raadiyoo 3ffaa

<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>

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 me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
  </div>
  <div class="btn-group me-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-info">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 sirnaan iddoo itti kennuuf 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 me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
    <button type="button" class="btn btn-outline-secondary">2</button>
    <button type="button" class="btn btn-outline-secondary">3</button>
    <button type="button" class="btn btn-outline-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-text" id="btnGroupAddon2">@</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-primary">1</button>
  <button type="button" class="btn btn-primary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </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.