Botones

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

Kay p'anqapi

Ejemplos

Bootstrap achka ñawpaqmanta riqsisqa botón estilokunayuq, sapa huk kikin semántico propósito kaqninta sirwiq, 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>

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.

Qillqa p'istuyta mana llamk'achiy

Sichus mana munankichu botón qillqa p'istunanta, .text-nowrapclaseta botónman yapayta atinki. 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.

Tupana

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

Wakin botón estilokuna huk relativamente llamp'u ñawpaq colorta llamk'achinku, chaymanta huk yana qhipallapi llamk'achinan tiyan suficiente contraste kananpaq.

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>

Mana atiq suyu

Botónkunata mana llamk'achiq hina ruway disabled, mayqin <button>elementomanpas boolean atributota yapaspa. Mana llamk'achisqa botones llamk'achirqanku pointer-events: none, hark'aspa hover chaymanta ruwasqa estadokuna llamk'ayta.

<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 llapa pointer-eventsancla botones kaqpi mana llamk'achinapaq.
Mana atichisqa botones aria-disabled="true"atributota churananku tiyan elemento estadota yanapaq tecnologiakunaman rikuchinapaq.

Enlace primario Tupana

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

Advertencia de funcionalidad de enlace

.disabledClase llamk'achin s pointer-events: nonet'inki ruwayta mana llamk'achiyta munaspa <a>, ichaqa chay CSS kaqnin manaraq estandarizadachu. 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.

Bloquear botones

Ruway kutichiq pilakuna hunt'a ancho kaqmanta, “bloqueo botones” kaqmanta Bootstrap 4 kaqpi hina huk chaqrusqa qhawayniykumanta chaymanta ch'usaq yanapakuykunamanta. Utilidades kaqwan llamk'achispa ranti botón específico clasekuna kaqmanta, aswan hatun kamachiyniyuq kayku espaciamiento kaqpi, chiqanchaypi chaymanta kutichiy ruwaykunapi.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Kaypi huk kutichiq variación ruwayku, sayaqmanta pilasqa botoneswan qallarispa mdpakinankama, maypichus claseta .d-md-blocktikran .d-grid, chayhinata gap-2utilidadta anulachispa. Navegadorniykipa sayayninta tikray, chaykunata tikrakusqankuta qawanaykipaq.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Bloque botonesniykipa anchunta allichayta atikunki rejilla columna ancho clasekunawan. Ejemplopaq, kuskan anchoyoq “bloqueo botón” nisqapaq, utilizay .col-6. Chawpichay horizontalmente con .mx-auto, también.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Yanapakuykuna yapasqa llamk'achiy atikunman botones chiqanchayta allinchaypaq mayk'aq horizontal kaqpi. Kaypi ñawpaq kutichiq ejemploykuta hap'iyku chaymanta wakin flex yanapakuykunata chaymanta huk margen yanapakuyta botón kaqpi pañaman alineanaykupaq botones mana pilasqa kaptinku yapayku.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plugin de botón

Chay botón plugin nisqa ruwayta atikunki sasan on/off toggle botones nisqakunata.

Rikuypaq, kay tikray ñit'inakuna kaqlla kanku chaymanta qhaway qutu tikray ñit'inakuna . Ichaqa, huknirayta yanapakuq tecnologiakuna kaqwan apachisqa kanku: chay toggles pantalla ñawiriqkunawan willasqa kanqa “checked”/“mana comprobado” hina (imaraykuchus, aunque rikchakusqanku, fundamentalmente chay togglekuna hinaraq kanku), maypichus kay toggle botones imayna willasqa kanqa “botón”/“botón ñit’isqa”. Kay iskay ruwanakunapura akllayqa imahina tikray ruwasqaykimanta kanqa, chaymanta sichus utaq mana tikray ruwaqkunaman yuyayniyuq kanqa mayk'aq huk qhaway qutu hina utaq chiqa ñit'ina hina willasqa.

Estadokunata tikray

data-bs-toggle="button"Huk ñit'inap kayninta tikranapaq yapay active. Sichus huk ñit'inata ñawpaqmanta tikrachkanki, makiwan .activeclaseta yapanayki tiyan chaymanta aria-pressed="true" yanapakuq tecnologiakunaman allinta apachisqa kananpaq.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>

T'inkiyta tikray Tikraq t'inki Mana llamk'achisqa t'inki tikray

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Métodos

Huk ñit'ina instanciata ñit'ina ruwaqwan ruwayta atinki, ahinataq:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Imayna	Willay
`toggle`	Toggles estado de empuje. Chay botónmanmi qun chay rikchayta activasqa kasqanmanta.
`dispose`	Huk elementopa ñit'inanta chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
`getInstance`	Método estático mayqinchus huk DOM elementowan tinkisqa botón instanciata jap'iyta atikun, kayhinata llamk'achiy atikunki:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Método estático mayqinchus huk DOM elementowan tinkisqa botón instanciata kutichin utaq musuq ruwan sichus mana qallarisqachu karqa. Chaytaqa kayhinatam servichikuwaq:`bootstrap.Button.getOrCreateInstance(element)`

Ejemplopaq, llapa botones nisqakunata cambianapaq

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variables nisqakuna

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixinkuna

Kimsa mixinkuna kan botonespaq: botón chaymanta botón contorno variante mixins (iskaynin kaqpi sayasqa $theme-colors), huk botón sayay mixin yapasqa.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Lazos

Variantes de botones (para botones regulares y contorno) utilizan sus respectivas mixins con nuestro $theme-colorsmapa para generar las clases modificadoras en scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}