Umi botón rehegua

Eipuru Bootstrap estilo botón jeporupyre rehegua tembiaporãme g̃uarã formulario, ñe’ẽñemi ha hetave mba’épe pytyvõ reheve heta tuichakue, estado ha hetave mba’épe g̃uarã.

Tembiecharã

Bootstrap oguereko heta estilo botón oñembohekopyréva, peteĩteĩva oservíva ipropósito semántico, mbovymi extra oñemombóva ipype control hetave hag̃ua.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Embogue jehaipyre ñembohysýi

Ndereipotáiramo pe botón jehaipyre oñembojere, ikatu emoĩ pe .text-nowrapmbo’esyry pe botón-pe. Sass-pe, ikatu emohenda $btn-white-space: nowrapembogue hag̃ua jehaipyre ñembohysýi peteĩteĩva mboajepyrévape g̃uarã.

Etiquetas de botón rehegua

Umi .btnmboꞌepy ojejapo ojepuru hag̃ua <button>elemento ndive. Ha katu, ikatu avei eipuru ko’ã mbo’esyry <a>térã <input>elemento rehe (jepémo oĩ kundahára ikatúva omoĩ peteĩ ñe’ẽmondo iñambue’imiva).

Oipurúvo mboꞌepy botón rehegua umi <a>elemento ojeporúva omoñepyrũ hag̃ua mbaꞌeporã página ryepýpe (contenido oñemboguejývaicha), oñembojoaju rangue página térã sección pyahúpe página koꞌag̃agua ryepýpe, koꞌã joajuha oñemeꞌevaꞌerã peteĩ role="button"ombohasa hag̃ua hekopete hembipotápe umi tecnología oipytyvõvape haꞌeháicha umi omoñe’ẽva pantalla-pe.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Umi botón esquema rehegua

¿Oikotevẽ peteĩ botón, ha katu ndaha’éi umi colores de fondo hefty oguerúva hikuái? Emyengovia umi clase modificador por defecto .btn-outline-*umi oipeꞌa hag̃ua opaite taꞌãngamýi ha saꞌi tapykuegua oimeraẽva botón rehe.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Tuichakuéra

¿Reipotaiterei umi botón tuichavéva térã michĩvéva? Oñemoĩve .btn-lgtérã .btn-smumi tamaño adicional-pe g̃uarã.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Ejapo umi botón nivel bloque rehegua —umi oñemosarambíva peteĩ túva ipekue pukukue— emoĩvo .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Estado activo rehegua

Umi botón ojehechaukáta ojepysóramo (oguerekóva peteĩ fondo iñypytũvéva, peteĩ borde iñypytũvéva ha sombra insertada) oñemboguata jave. Natekotevẽi oñembojoapy peteĩ mbo’esyry <button>s-pe oipuruháicha hikuái peteĩ pseudo-clase . Ha katu, ikatu gueteri embojere peteĩchagua jehechauka activo ndive .active(ha emoinge aria-pressed="true"atributo) tekotevẽramo embojevy estado programáticamente.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Estado discapacitado rehegua

Ejapo umi botón ojehecha hag̃ua inactivo emoĩvo disabledatributo booleano oimeraẽ <button>elemento-pe.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Umi botón oñemboykéva oipurúva <a>elemento oñekomporta iñambue’imi:

• <a>s ndoipytyvõi disabledatributo, upévare emoĩva’erã .disabledmbo’esyry ojehecha hag̃ua ojehechaháicha oñemboykéva.
• Oĩ estilo futuro-pe g̃uarã oñemboguapýva oñemboyke hag̃ua opaite pointer-eventsumi botón anclaje-pe. Umi kundahárape oipytyvõva upe mba’ekuaarã, nderehechamo’ãi mba’eveichavérõ pe cursor oñemboykéva.
• Umi botón oñemboykéva oguerekovaꞌerã aria-disabled="true"atributo ohechauka hag̃ua elemento estado umi tecnología oipytyvõvape.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Plugin de botón rehegua

Ejapo hetave mba’e umi botón reheve. Control botón heꞌi térã omoheñói botón aty hetave componente-pe g̃uarã tembipururã ryru-icha.

Ombohasa umi estado

Emoĩve data-toggle="button"emoambue hag̃ua peteĩ botón activeestado. Embohasa mboyve peteĩ botón, emoĩva’erã nde po rupive .activembo’esyry ha aria-pressed="true" .<button>

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Caja de verificación ha umi botón de radio

Bootstrap .buttonestilokuéra ikatu ojeporu ambue elemento-pe, <label>s-icha, omeꞌe hag̃ua casilla de verificación térã radio estilo botón toggling. Emoĩ data-toggle="buttons"peteĩ .btn-groupoguerekóva umi mboajepyréva oñemoambuéva emboguata hag̃ua ijeiko ñemoambue JavaScript rupive ha emoĩ .btn-group-toggleestilo hag̃ua <input>s nde mboajepyréva ryepýpe. Eñamindu’u ikatuha ejapo peteĩ mboajepyréva jeike rupive térã aty umívagui.

Pe estado ojehechava’ekue ko’ã botón-pe g̃uarã oñembopyahu clickevento rupive añoite pe botón-pe. Eipurúramo ambue tape embopyahu hag̃ua jeikepyre —techapyrã, eipuru <input type="reset">térã emoĩvo manóme pe jeikepyre checkedmbaꞌekuaarã—tekotevẽta embohasa .activende <label>po rupive.

Eñamindu’u umi botón ojehechava’ekue mboyve oikotevẽha emoĩ nde po rupive pe .activembo’esyry pe entrada-pe <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Método-kuéra rehegua