in English

Botóns

Use os estilos de botón personalizados de Bootstrap para accións en formularios, diálogos e moito máis con compatibilidade con varios tamaños, estados e moito máis.

Nesta páxina

Exemplos

Bootstrap inclúe varios estilos de botóns predefinidos, cada un cumprindo o seu propio propósito semántico, con algúns extras para un maior control.

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

Transmitir significado ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Desactiva o ajuste de texto

Se non queres que o texto do botón se axuste, podes engadir a .text-nowrapclase ao botón. En Sass, pode configurar $btn-white-space: nowrappara desactivar o ajuste de texto para cada botón.

Etiquetas de botón

As .btnclases están deseñadas para ser usadas co <button>elemento. Non obstante, tamén pode usar estas clases en <a>ou <input>elementos (aínda que algúns navegadores poden aplicar unha representación lixeiramente diferente).

Cando se usan clases de botóns en <a>elementos que se usan para activar a funcionalidade da páxina (como o contido en colapso), en lugar de enlazar con novas páxinas ou seccións dentro da páxina actual, estas ligazóns deberían ter unha role="button"función para transmitir adecuadamente o seu propósito ás tecnoloxías de asistencia, como lectores de pantalla.

Ligazón

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

Botóns de esquema

Necesitas un botón, pero non as cores de fondo fortes que traen? Substitúe as clases de modificadores predeterminadas por .btn-outline-*aquelas para eliminar todas as imaxes e cores de fondo en calquera botón.

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

Algúns dos estilos de botón usan unha cor de primeiro plano relativamente clara e só se deben usar nun fondo escuro para ter o suficiente contraste.

Tallas

Queres botóns máis grandes ou pequenos? Engadir .btn-lgou .btn-smpara tamaños adicionais.

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

Estado desactivado

Fai que os botóns parezan inactivos engadindo o disabledatributo booleano a calquera <button>elemento. Aplicáronse botóns desactivados pointer-events: nonepara evitar que se activen os estados activos e de paso.

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

Os botóns desactivados que usan o <a>elemento compórtanse un pouco diferente:

<a>s non admiten o disabledatributo, polo que debes engadir a .disabledclase para que apareza visualmente desactivada.
Inclúense algúns estilos para o futuro para desactivar todos pointer-eventsos botóns de ancoraxe.
Os botóns desactivados que se usan <a>deben incluír o aria-disabled="true"atributo para indicar o estado do elemento ás tecnoloxías de asistencia.
Os botóns desactivados no uso <a> non deben incluír o hrefatributo.

Ligazón principal Ligazón

<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 sobre a funcionalidade da ligazón

Para cubrir os casos nos que tes que manter o hrefatributo nunha ligazón desactivada, a .disabledclase usa pointer-events: nonepara tentar desactivar a función de ligazón de <a>s. Teña en conta que esta propiedade CSS aínda non está estandarizada para HTML, pero todos os navegadores modernos a admiten. Ademais, mesmo nos navegadores que admiten pointer-events: none, a navegación do teclado non se ve afectada, o que significa que os usuarios de teclado videntes e os usuarios de tecnoloxías de asistencia aínda poderán activar estas ligazóns. Polo tanto, para estar seguro, ademais de aria-disabled="true", inclúe tamén un tabindex="-1"atributo nestas ligazóns para evitar que reciban o foco do teclado e use JavaScript personalizado para desactivar a súa funcionalidade por completo.

Ligazón principal Ligazón

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

Bloquear botóns

Crea pilas sensibles de "botóns de bloqueo" de ancho completo como os de Bootstrap 4 cunha mestura das nosas utilidades de visualización e espazos. Ao usar utilidades en lugar de clases específicas de botóns, temos un control moito maior sobre o espazo, o aliñamento e os comportamentos de resposta.

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

Aquí creamos unha variación sensible, comezando con botóns apilados verticalmente ata o mdpunto de interrupción, onde .d-md-blocksubstitúe a .d-gridclase, anulando así a gap-2utilidade. Cambia o tamaño do teu navegador para velos cambiar.

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

Podes axustar o ancho dos teus botóns de bloque con clases de ancho de columna de grade. Por exemplo, para un "botón de bloqueo" de ancho medio, use .col-6. Céntrao horizontalmente con .mx-auto, tamé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>

Pódense usar utilidades adicionais para axustar o aliñamento dos botóns cando están en horizontal. Aquí tomamos o noso exemplo de resposta anterior e engadimos algunhas utilidades flexibles e unha utilidade de marxe no botón para aliñar os botóns á dereita cando xa non están apilados.

<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

O complemento de botóns permítelle crear botóns de activación/desactivación sinxelos.

Visualmente, estes botóns de alternancia son idénticos aos botóns de alternancia da caixa de verificación . Non obstante, as tecnoloxías de asistencia transmítense de forma diferente: os lectores de pantalla anunciarán as opcións de caixa de verificación como "marcadas"/"non marcadas" (xa que, a pesar da súa aparencia, son fundamentalmente caixas de verificación), mentres que estes botóns de alternancia anunciaranse como "botón"/"botón presionado". A elección entre estes dous enfoques dependerá do tipo de alternador que estea a crear e de se a alternancia terá ou non sentido para os usuarios cando se anuncie como unha caixa de verificación ou como un botón real.

Alterna os estados

Engadir data-bs-toggle="button"para cambiar o estado dun botón active. Se estás a activar previamente un botón, debes engadir manualmente a .activeclase e aria-pressed="true" asegurarte de que se transmite adecuadamente ás tecnoloxías de asistencia.

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

Alternar ligazón Ligazón de alternancia activa Desactivouse a ligazón de alternancia

<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

Podes crear unha instancia de botón co construtor de botóns, por exemplo:

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

Método	Descrición
`toggle`	Alterna o estado push. Dálle ao botón a aparencia de que foi activado.
`dispose`	Destrúe o botón dun elemento. (Elimina os datos almacenados no elemento DOM)
`getInstance`	Método estático que che permite obter a instancia do botón asociada a un elemento DOM, podes usalo así:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Método estático que devolve unha instancia de botón asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así:`bootstrap.Button.getOrCreateInstance(element)`

Por exemplo, para alternar todos os botóns

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

Sass

Variables

$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%;

Mixins

Hai tres mixins para botóns: mixins de variantes de botón e contorno de botón (ambos baseados en $theme-colors), máis un mixin de tamaño de botón.

@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);
}

Loops

As variantes de botón (para botóns regulares e de esquema) usan as súas respectivas mesturas co noso $theme-colorsmapa para xerar as 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);
  }
}