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 moñe’ẽrã pantalla rehegua.

<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 activo jave peteĩ fondo iñypytũvéva reheve, frontera iñypytũvéva reheve ha, oñembohapévo umi sombra, peteĩ sombra insertada reheve. 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 oiporúva <a>oguerekovaꞌerã aria-disabled="true"atributo ohechauka hag̃ua elemento estado umi tecnología oipytyvõvape.
• Umi botón oñemboykéva oiporúva ndoikéiva’erã <a> atributohref .

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

Enlace funcionalidad rehegua advertencia

Ojejahoꞌi hag̃ua umi káso oñeñongatuvaꞌerãhápe hrefatributo peteĩ joajuha oñemboykévape, .disabledmboꞌepy oipuru pointer-events: noneoñehaꞌã hag̃ua oñembogue hag̃ua joajuha rembiaporã <a>s rehegua. Eñamindu’u ko CSS mba’ekuaarã ne’ĩra gueteri oñemboheko HTML-pe g̃uarã, ha katu opaite kundahára ko’ag̃agua oipytyvõ. Avei, umi kundahárape jepe oipytyvõva pointer-events: none, teclado jeguata opyta ndojehúi mba’eve, he’iséva umi teclado ohecháva ha umi tecnología oipytyvõva oipurúva ikatúta gueteri omomba’apo ko’ã joajuha. Upéicha reime hag̃ua seguro, además de aria-disabled="true", emoĩ avei peteĩ tabindex="-1"atributo ko’ã enlace-pe ani hag̃ua ohupyty teclado enfoque, ha eipuru JavaScript personalizado embogue hag̃ua hembiaporãite.

<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 método embopyahu hag̃ua jeikepyre —techapyrã, eipuru <input type="reset">térã emoĩvo manóme pe jeikepyre checkedmbaꞌekuaarã—tekotevẽta embopyahu .activepe <label>manóme.

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