Botones

Bootstrap kaqpa sapanchasqa ñit'ina estilokuna ruwanakuna formulariokunapi, rimanakunakunapi chaymanta aswan achka sayaykunapaq, estadokuna chaymanta aswan yanapakuywan llamk'achiy.

Ejemplos

Bootstrap achka ñawpaqmanta riqsisqa botón estilokunayuq, sapa huk kikin semántico propósito kaqninta servin, huk pisi extrakuna aswan kamachiypaq wikch'usqa kaqwan.

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

Qillqa p'istuyta mana llamk'achiy

Sichus mana munankichu chay botón qillqa p'istuyta, chay .text-nowrapclaseta yapayta atinki chay botón kaqman. Sass kaqpi, $btn-white-space: nowrapsapa ñit'inapaq qillqa p'istuy mana llamk'achinapaq churayta atikunki.

Etiquetas de botón

Chay .btnclasekuna <button>elementowan llamk’anapaq ruwasqa kachkan. <a>Ichaqa, kay clasekunata utaq elementokunapipas llamk'achiy atikunki <input>(wakin maskaqkuna huk pisi hukniray ruwayta churankuman chaypas).

Botón clasekuna <a>elementokunapi llamk'achkanki chaymanta llamk'achkanku p'anqa ukhupi ruwanakunata llamk'achinankupaq (imayna urmachiy contenido), aswan musuq p'anqakunaman utaq t'aqakunaman kunan p'anqa ukhupi t'inkiymanta, kay t'inkikuna huk qusqa kanan tiyan role="button"allinta propósitoninkuta yanapakuq tecnologiakunaman chayhina pantalla ñawiriqkuna.

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

Botones de contorno

¿Necesitan huk botón, ichaqa manachu chay hefty fondo colores apamusqanku? Ñawpaqmanta tikraq clasekunata .btn-outline-*mayqin ñit'inapipas llapa qhipa siq'ikunata chaymanta llimp'ikunata hurqunapaq kaqkunawan tikray.

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

Tamaños

¿Aswan hatunchu icha aswan huch’uy botonkunatachu munanki? Añadir .btn-lgo .btn-smpara tamaños adicionales.

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

Bloque nivel botones ruway —chaykuna huk tayta-mamapa hunt'a anchunta span— yapaspa .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 activa

Botonkuna ñit'isqa rikukunqa ruwasqa kaqtin aswan yana qhipa kaqwan, aswan yana frontera kaqwan, chaymanta, llantukuna atichisqa kaqtin, huk churasqa llantuywan. Mana huk clase yapanapaq kanchu <button>s kaqman imaynachus huk pseudo-clase llamk'achinku . Ichaqa, hinallataqmi kallpachayta atikunki kikin ruwasqa rikch'ayta kaywan .active(hinallataq aria-pressed=“true”atributota churayta) sichus estadota programaticamente kaqmanta ruwanayki tiyan.

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

Mana atiq suyu

Botónkunata mana llamk'achiq hina ruway disabled, mayqin <button>elementomanpas boolean atributota yapaspa.

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

Elementota llamk'achispa mana llamk'achisqa ñit'inakunaqa <a>huk chhika hukniraytam purinku:

• <a>s mana atributota yanapankuchu , chayrayku claseta disabledyapanayki tiyan qhawaypi mana atisqa rikhurinanpaq..disabled
• Wakin hamuq pachapaq allin estilokuna churasqa kanku tukuy pointer-eventsancla botones kaqpi mana llamk'achinapaq. Navegadores kaqpi mayqinkunachus chay propiedad yanapakunku, mana mana llamk'achisqa kursuta tukuypi rikunkichu.
• Mana llamk'achisqa botones llamk'achkan atributo kaqninta yanapaq tecnologiakunaman elemento estadota rikuchinapaq churananku tiyan <a>.aria-disabled="true"
• Mana llamk'achisqa ñit'inakuna llamk'achispa <a> manahref atributota churanankuchu tiyan.

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

Advertencia de funcionalidad de enlace

Casokuna maypi hrefatributota huk mana atichisqa t'inkipi waqaychanayki tiyan chayta qhawanapaq, .disabledclase llamk'achin s pointer-events: nonet'inki ruwayta mana llamk'achiyta munaspa . <a>Reparay kay CSS kaqnin manaraq HTML kaqpaq estandarizadachu, ichaqa llapa kunan pacha maskaqkuna yanapanku. Chaymanta, yanapayta ruwanku navegadorkunapipas pointer-events: none, teclado puriy mana afectasqa qhipakuchkan, niyta munan rikuq teclado llamk'aqkuna chaymanta yanapakuq tecnologiakuna llamk'aqkuna kay t'inkikuna llamk'achiyta atinqakuraq. Chaymi mana imamanta manchachikuq kanapaq, yapasqa aria-disabled="true", chaymanta huk tabindex="-1"atributo kay t'inkikunapi churay hark'anankupaq teclado enfoqueta chaskinankupaq, chaymanta sapanchasqa JavaScript llamk'achiy ruwanankuta tukuyninpi mana llamk'achinankupaq.

<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

Astawan ruway botoneswan. Control ñit'ina willan utaq huñukuna botones ruwan aswan componentes kaqpaq imayna llamkanakuna barrakuna.

Estadokunata tikray

data-toggle="button"Huk ñit'inap kayninta tikranapaq yapay active. Sichus huk ñit'inata ñawpaqmanta tikrachkanki, makiwan .activeclaseta yapanayki tiyan chaymanta .aria-pressed="true"<button>

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

Caja de verificación y botones de radio

Bootstrap kaqpa .buttonestilonkuna wak elementokunaman churakunman, <label>s hina, qhaway qututa utaq radio estilo ñit'inata tikrayta qunapaq. Yanapakuy data-toggle="buttons"hukman .btn-groupchay tikrasqa ñit'inakunayuq kaqta JavaScript kaqnintakama tikray ruwayninkuta atichinanpaq chaymanta s ñit'inakunayki ukhupi .btn-group-toggleestilopaq yapay. Reparay sapalla yaykuna kallpachasqa botones utaq qutukuna chaymanta ruwayta atikunki.<input>

Kay botonespaq qhawasqa estadoqa botón kaqpi evento kaqnintakamalla musuqchasqa kachkan . clickSichus huk ruwayta llamk'achkanki yaykusqa musuqyachinaykipaq —kayhina, <input type="reset">yaykusqapa propiedadninta makiwan utaq makiwan checkedruwaspa— makiwan .activellamk'achinayki <label>tiyan.

.activeReparay ñawpaqmanta qhawasqa ñit'inakuna makiwan claseta yaykusqaman yapanaykipaq mañan <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étodos