Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Grupo de botón rehegua

Oñembyaty petet serie de botón oñondive petet línea rehe téra ñamoí petet columna verticalpe.

Ko páhinape

Tembiecharã básico

Embojere peteĩ serie de botón orekóva .btnen .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>
Ejeasegura hekopete roleha eme’ẽ peteĩ etiqueta

Umi tecnología oipytyvõva (haꞌeháicha umi lector pantalla rehegua) ombohasa hag̃ua oñemboatyha peteĩ serie de botón, roletekotevẽ oñemeꞌe peteĩ atributo hekopete. Umi botón aty’ípe g̃uarã, kóva ha’éta role="group", umi tembipuru’i ryru katu oguerekova’erã peteĩ role="toolbar".

Avei, umi aty ha tembipuru ryru oñemeꞌevaꞌerã peteĩ etiqueta hesakãva, hetavégui umi tecnología oipytyvõva ambue hendáicha nomoherakuãmoꞌãigui, jepémo oĩ atributo rol hekopete. Umi techapyrã oñemeꞌevaꞌekuépe koꞌape, jaipuru , ha katu ikatu avei ojeporu umi aria-labelalternativa haꞌeháicha .aria-labelledby

Ko’ã mbo’esyry ikatu avei oñembojoapy joajuha aty’ípe, peteĩ alternativa ramo umi .navcomponente navegación rehegua .

Enlace activo rehegua Joajuha Joajuha 
<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>

Estilos mixtos rehegua

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

Umi estilo oñembohapéva

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

Umi aty vore’i ha radio botón rehegua

Embojoaju casilla de verificación ojoguáva botón-pe ha umi botón radio toggle peteĩ botón aty ojehecha’ỹvape.

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

Tembipururã ryru botón rehegua

Ombojoaju umi aty botón rehegua aty tembipururã botón rehegua umi componente ikomplikadovévape g̃uarã. Eipuru umi clase utilidad rehegua tekotevẽháicha embohasa hag̃ua espaciado umi aty, botón ha hetave mbaꞌe.

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

Eñeñandu porã embojehe’a hag̃ua umi aty jeikerã umi aty botón rehegua ndive ne tembipuru’i ryrúpe. Ojogua pe techapyrã yvateguápe, oiméne reikotevẽta algún utilidad jepémo espacia porã hag̃ua umi mba’e.

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

Dimensionamiento rehegua

Emoĩ rangue mbo’esyry mboajepyréva botón rehegua opaite botón peteĩ atýpe, emoĩnte .btn-group-*peteĩteĩme .btn-group, oikehápe peteĩteĩva oñembohysýi jave heta aty.



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

Nidación rehegua

Emoĩ peteĩ .btn-groupambue ryepýpe .btn-groupreipotáramo umi menú desplegable oñembojeheꞌa peteĩ serie de botón reheve.

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

Variación vertical rehegua

Ejapo peteĩ conjunto de botón ojehechauka verticalmente apilado rangue horizontalmente. Umi botón ñemboja’o ñemboguejy ndojeguerohorýi ko’ápe.

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