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 (aswan yana qhipa kaqwan, aswan yana frontera kaqwan, chaymanta churasqa llantuywan) ruwasqa kaqtin. 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 aria-disabled="true"atributota churananku tiyan elemento estadota yanapaq tecnologiakunaman rikuchinapaq.

<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