Vés al contingut principal Saltar a la navegació de documents
Check
in English

Botons

Utilitzeu els estils de botons personalitzats de Bootstrap per a accions en formularis, diàlegs i més amb suport per a diverses mides, estats i molt més.

En aquesta pàgina

Exemples

Bootstrap inclou diversos estils de botons predefinits, cadascun amb el seu propi propòsit semàntic, amb alguns extres incorporats per a més control.

html 
<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>
Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.

Desactiva l'ajustament del text

Si no voleu que el text del botó s'ajusti, podeu afegir la .text-nowrapclasse al botó. A Sass, podeu configurar $btn-white-space: nowrapper desactivar l'ajustament de text per a cada botó.

Etiquetes de botons

Les .btnclasses estan dissenyades per ser utilitzades amb l' <button>element. Tanmateix, també podeu utilitzar aquestes classes en <a>o <input>elements (tot i que alguns navegadors poden aplicar una representació lleugerament diferent).

Quan s'utilitzen classes de botons en <a>elements que s'utilitzen per activar la funcionalitat de la pàgina (com ara col·lapsar el contingut), en lloc d'enllaçar a pàgines noves o seccions dins de la pàgina actual, aquests enllaços s'han de donar una role="button"opció per transmetre adequadament el seu propòsit a tecnologies d'assistència com ara lectors de pantalla.

Enllaç
html 
<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">

Botons d'esquema

Necessites un botó, però no els intensos colors de fons que aporten? Substituïu les classes modificadores predeterminades per les .btn-outline-*que permeten eliminar totes les imatges i colors de fons de qualsevol botó.

html 
<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>
Alguns dels estils de botons utilitzen un color de primer pla relativament clar i només s'han d'utilitzar sobre un fons fosc per tenir un contrast suficient.

Mides

Voleu botons més grans o més petits? Afegiu .btn-lgo .btn-smper a mides addicionals.

html 
<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 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Fins i tot podeu utilitzar la vostra mida personalitzada amb variables CSS:

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

Estat desactivat

Feu que els botons semblin inactius afegint l' disabledatribut booleà a qualsevol <button>element. S'han aplicat botons desactivats pointer-events: noneper evitar que s'activin els estats actius.

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

Els botons desactivats que utilitzen l' <a>element es comporten una mica diferent:

  • <a>s no admeten l' disabledatribut, de manera que heu d'afegir la .disabledclasse perquè sembli visualment desactivada.
  • S'inclouen alguns estils futurs per desactivar tots pointer-eventsels botons d'ancoratge.
  • L' ús dels botons desactivats <a>hauria d'incloure l' aria-disabled="true"atribut per indicar l'estat de l'element a les tecnologies d'assistència.
  • Els botons desactivats <a> no haurien d' incloure l' hrefatribut.
Enllaç principal Enllaç
html 
<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>

Per cobrir casos en què heu de mantenir l' hrefatribut en un enllaç desactivat, la .disabledclasse fa servir pointer-events: noneper intentar desactivar la funcionalitat d'enllaç de <a>s. Tingueu en compte que aquesta propietat CSS encara no està estandarditzada per a HTML, però tots els navegadors moderns ho admeten. A més, fins i tot als navegadors que admeten pointer-events: none, la navegació amb el teclat no es veu afectada, el que significa que els usuaris de teclat vidents i els usuaris de tecnologies d'assistència encara podran activar aquests enllaços. Així, per estar segur, a més de aria-disabled="true", també inclou un tabindex="-1"atribut en aquests enllaços per evitar que rebin el focus del teclat i utilitzeu JavaScript personalitzat per desactivar-ne la funcionalitat.

Enllaç principal Enllaç
html 
<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>

Bloquejar botons

Creeu piles sensibles de "botons de bloqueig" d'amplada completa com els de Bootstrap 4 amb una combinació de les nostres utilitats de visualització i espai. En utilitzar utilitats en lloc de classes específiques de botons, tenim un control molt més gran sobre l'espaiat, l'alineació i els comportaments de resposta.

html 
<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í creem una variació sensible, començant amb botons apilats verticalment fins al mdpunt d'interrupció, on .d-md-blocksubstitueix la .d-gridclasse, anul·lant així la gap-2utilitat. Canvieu la mida del vostre navegador per veure'ls canviar.

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

Podeu ajustar l'amplada dels vostres botons de bloc amb classes d'amplada de columna de quadrícula. Per exemple, per a un "botó de bloqueig" de mitja amplada, utilitzeu .col-6. Centreu-lo horitzontalment amb .mx-auto, també.

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

Es poden utilitzar utilitats addicionals per ajustar l'alineació dels botons quan són horitzontals. Aquí hem pres el nostre exemple de resposta anterior i hem afegit algunes utilitats flexibles i una utilitat de marge al botó per alinear els botons a la dreta quan ja no estan apilats.

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

Connector de botons

El connector de botons us permet crear botons d'activació/desactivació senzills.

Visualment, aquests botons de commutació són idèntics als botons de commutació de la casella de selecció . No obstant això, les tecnologies d'assistència les transmeten de manera diferent: els lectors de pantalla anunciaran els canvis de caselles com a "marcat"/"no marcat" (ja que, malgrat la seva aparença, fonamentalment segueixen sent caselles de selecció), mentre que aquests botons de commutació s'anunciaran com a "botó"/"botó pressionat". L'elecció entre aquests dos enfocaments dependrà del tipus de commutació que estigueu creant i de si la commutació tindrà sentit per als usuaris quan s'anunciï com a casella de selecció o com a botó real.

Commuta els estats

Afegeix data-bs-toggle="button"per canviar l'estat d'un botó active. Si esteu activant un botó prèviament, heu d'afegir la .activeclasse manualment per aria-pressed="true" assegurar-vos que es transmeti adequadament a les tecnologies d'assistència.

html 
<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>
Commuta l'enllaç Enllaç de commutació actiu S'ha desactivat l'enllaç de commutació
html 
<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ètodes

Podeu crear una instància de botó amb el constructor de botons, per exemple:

const bsButton = new bootstrap.Button('#myButton')
Mètode Descripció
dispose Destrueix el botó d'un element. (Elimina les dades emmagatzemades a l'element DOM)
getInstance Mètode estàtic que us permet obtenir la instància del botó associada a un element DOM, podeu utilitzar-lo així: bootstrap.Button.getInstance(element).
getOrCreateInstance Mètode estàtic que retorna una instància de botó associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així: bootstrap.Button.getOrCreateInstance(element).
toggle Commuta l'estat push. Dóna al botó l'aspecte que s'ha activat.

Per exemple, per canviar tots els botons

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

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'evolució de l'enfocament de les variables CSS de Bootstrap, els botons ara utilitzen variables CSS locals activades per .btna una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

  --#{$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);

Cada .btn-*classe modificadora actualitza les variables CSS adequades per minimitzar regles CSS addicionals amb els nostres mixins button-variant(), button-outline-variant(), i .button-size()

Aquí teniu un exemple de creació d'una .btn-*classe modificadora personalitzada com fem per als botons exclusius dels nostres documents, reassignant les variables CSS de Bootstrap amb una barreja de les nostres pròpies variables CSS i Sass.

.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%)};
}

Variables Sass

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

Hi ha tres mixins per als botons: mixins de variants de botó i contorn de botó (tots dos basats en $theme-colors), més un mixin de mida de botó.

@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

Les variants de botons (per a botons normals i d'esquema) utilitzen les seves respectives combinacions amb el nostre $theme-colorsmapa per generar les classes modificadores 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);
  }
}