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 servin, huk pisi extrakuna aswan kamachiypaq wikch'usqa kaqwan.

html nisqapi

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

Tupana

html nisqapi

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

html nisqapi

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

html nisqapi

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

html nisqapi

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

Kikin ruwasqa sayachiyniykitapas CSS tikraqkunawan rolloyta atinki:

html nisqapi

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom 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.

html nisqapi

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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.
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.

Enlace primario Tupana

html nisqapi

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary 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.

Enlace primario Tupana

html nisqapi

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

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.

html nisqapi

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

html nisqapi

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

html nisqapi

<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ña pilasqa kaptinku yapayku.

html nisqapi

<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 checkboxes kankuraq), maypichus kay toggle botones hina 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.

html nisqapi

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

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

html nisqapi

<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 class="btn btn-primary disabled" 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:

const bsButton = new bootstrap.Button('#myButton')

Imayna	Willay
`dispose`	Huk elementopa ñit'inanta chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
`getInstance`	Método estático mayqinchus huk DOM elementowan tinkisqa botón instanciata hap'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)`.
`toggle`	Toggles estado de empuje. Chay botónmanmi qun chay rikchayta activasqa kasqanmanta.

Ejemplopaq, llapa botones nisqakunata cambianapaq

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñachkaq CSS tikraqkuna asuykuyninmanta huknin hina, botones kunan llaqta CSS tikraqkunata llamk'achinku .btnallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Sapa .btn-*tikraq clase tupaq CSS tikraqkunata musuqchan aswan CSS kamachiykunata pisiyachinapaq ñuqaykuwan button-variant(), button-outline-variant(), chaymanta button-size()mixins kaqwan.

Kaypi huk rikch'ana huk sapanchasqa .btn-*tikraq clase ruwanapaq ruwasqayku hina sapalla docsniykupaq sapalla botones kaqpaq Bootstrap kaqpa CSS tikraqninkunata huk chaqrusqa kikin CSS chaymanta Sass tikraqniykuwan wakmanta churaspa.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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%;

Sass mixinkuna

Kimsa mixinkuna kan botonespaq: botón chaymanta botón contorno variante mixins (iskaynin kaqpi sayasqa $theme-colors), chaymanta 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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass bucles

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} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

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