in English

Knäppercher

Benotzt Bootstrap seng personaliséiert Knäppchenstiler fir Aktiounen a Formen, Dialogen a méi mat Ënnerstëtzung fir verschidde Gréissten, Staaten a méi.

Op dëser Säit

Beispiller

Bootstrap enthält verschidde virdefinéiert Knäppercher, jidderee servéiert säin eegene semanteschen Zweck, mat e puer Extrae fir méi Kontroll geworf.

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>

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.

Textverpackung auszeschalten

Wann Dir net wëllt datt de Knäppchen Text wéckelt, kënnt Dir d' .text-nowrapKlass op de Knäppchen addéieren. A Sass kënnt Dir setzen $btn-white-space: nowrapfir Textverpackung fir all Knäppchen auszeschalten.

Button Tags

D' .btnKlassen sinn entwéckelt fir mam <button>Element ze benotzen. Wéi och ëmmer, Dir kënnt dës Klassen och op Elementer benotzen <a>( <input>obwuel e puer Browser eng liicht aner Rendering applizéiere kënnen).

Wann Dir Knäppercher op <a>Elementer benotzt, déi benotzt gi fir In-Säit Funktionalitéit auszeléisen (wéi Zesummebroch Inhalt), anstatt op nei Säiten oder Sektiounen op der aktueller Säit ze verlinken, sollten dës Linken e role="button"ginn fir hiren Zweck an Assistenztechnologien ze vermëttelen, wéi z. Écran Lieser.

Link

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

Outline Knäppchen

Braucht Dir e Knäppchen, awer net déi hefteg Hannergrondfaarwen déi se bréngen? Ersetzen d'Standardmodifikateur Klassen mat .btn-outline-*deenen fir all Hannergrondbiller a Faarwen op all Knäppchen ze läschen.

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>

E puer vun de Knäppercher benotzen eng relativ hell Virdergrondfaarf, a sollten nëmmen op engem donkelen Hannergrond benotzt ginn, fir genuch Kontrast ze hunn.

Gréissten

Loscht op méi grouss oder méi kleng Knäppercher? Addéieren .btn-lgoder .btn-smfir zousätzlech Gréissten.

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>

Dir kënnt souguer Är eege personaliséiert Gréisst mat CSS Variablen rullen:

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>

Behënnert Staat

Maacht Knäppercher inaktiv kucken andeems Dir de disabledbooleschen Attribut un all <button>Element bäidréit. Behënnerte Knäppercher hunn pointer-events: noneugewannt, verhënnert datt Hover an aktive Staaten ausléisen.

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>

Behënnerte Knäppercher mat dem <a>Element behuelen e bëssen anescht:

<a>s Ënnerstëtzung net den disabledAttribut, also musst Dir d' .disabledKlass addéieren fir se visuell behënnert ze maachen.
E puer zukünfteg frëndlech Stiler sinn abegraff fir alles pointer-eventsop Ankerknäppchen auszeschalten.
Behënnerte Knäppercher <a>sollen den aria-disabled="true"Attribut enthalen fir den Zoustand vum Element un Hëllefstechnologien unzeginn.
Behënnert Knäppercher benotzt <a> sollenhref den Attribut net enthalen .

Primärverbindung Link

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>

Link Funktionalitéit Opgepasst

Fir Fäll ze decken wou Dir den hrefAttribut op engem behënnerte Link behalen muss, .disabledbenotzt d'Klass pointer-events: nonefir ze probéieren d'Linkfunktionalitéit vun <a>s auszeschalten. Bedenkt datt dës CSS Eegeschafte nach net standardiséiert ass fir HTML, awer all modern Browser ënnerstëtzen et. Zousätzlech, och a Browser déi ënnerstëtzen pointer-events: none, bleift d'Tastaturnavigatioun net beaflosst, dat heescht datt seent Tastatur Benotzer an d'Benotzer vun Hëllefstechnologien nach ëmmer kënnen dës Linken aktivéieren. Also fir sécher ze sinn, zousätzlech zu aria-disabled="true", enthält och en tabindex="-1"Attribut op dëse Linken fir ze verhënneren datt se Tastaturfokus kréien, a benotzt personaliséiert JavaScript fir hir Funktionalitéit komplett auszeschalten.

Primärverbindung Link

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>

Block Knäppercher

Erstellt reaktiounsfäeger Stack vu voller Breet, "Blockknäppercher" wéi déi am Bootstrap 4 mat enger Mëschung vun eisem Display a Spalt Utilities. Andeems Dir Utilities benotzt anstatt Knäppchespezifesch Klassen, hu mir vill méi grouss Kontroll iwwer Abstand, Ausrichtung a reaktiounsfäeger Verhalen.

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>

Hei kreéiere mir eng reaktiounsfäeger Variatioun, ugefaange mat vertikal gestapelte Knäppercher bis zum mdBreakpoint, wou .d-md-blockd'Klass ersetzt .d-grid, sou datt d' gap-2Utility nullifizéiert gëtt. Ännert d'Gréisst vun Ärem Browser fir se ze gesinn änneren.

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>

Dir kënnt d'Breet vun Äre Block Knäppercher mat Gitter Kolonn Breet Klassen ajustéieren. Zum Beispill, fir eng hallef Breet "Block Button", benotzt .col-6. Centre et horizontal mat .mx-auto, ze.

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>

Zousätzlech Utilities kënne benotzt ginn fir d'Ausrichtung vun de Knäppercher unzepassen wann se horizontal sinn. Hei hu mir eist viregt reaktiounsfäeger Beispill geholl an e puer Flex Utilities an e Margin Utility op de Knäppchen bäigefüügt fir d'Knäppercher richteg auszegläichen wann se net méi gestapelt sinn.

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>

Knäppchen Plugin

De Knäppchen Plugin erlaabt Iech einfach On / Off Knäppercher ze kreéieren.

Visuell sinn dës Toggle Buttons identesch mat de Checkbox Toggle Buttons . Wéi och ëmmer, si ginn duerch Assistenztechnologien anescht vermëttelt: d'Checkbox-Togles ginn vun de Bildschirmlieser als "gecheckt"/"net kontrolléiert" ugekënnegt (well se trotz hirer Erscheinung grondsätzlech nach Checkboxen sinn), wärend dës Toggle-Knäppercher als "Knäppchen" / "Knäppchen gedréckt". D'Wiel tëscht dësen zwou Approche hänkt vun der Aart vum Toggle of, deen Dir erstellt, an ob den Toggle Sënn fir d'Benotzer mécht wann se als Checkbox oder als aktuellen Knäppchen ugekënnegt ginn.

Toggle Staaten

Füügt fir den Zoustand data-bs-toggle="button"vun engem Knäppchen ze activewiesselen. Wann Dir e Knäpp pre-toggelt, musst Dir d' .activeKlass manuell derbäisetzen a aria-pressed="true" fir sécherzestellen datt se entspriechend un Assistenztechnologien vermëttelt gëtt.

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>

Toggle Link Aktive Toggle Link Behënnert Toggle Link

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>

Methoden

Dir kënnt e Knäppcheninstanz mam Knäppekonstruktor erstellen, zum Beispill:

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

Method	Beschreiwung
`dispose`	Zerstéiert en Element Knäppchen. (läscht gespäichert Daten am DOM Element)
`getInstance`	Statesch Method déi Iech erlaabt d'Knäppcheninstanz mat engem DOM-Element verbonnen ze kréien, Dir kënnt et esou benotzen `bootstrap.Button.getInstance(element)`:.
`getOrCreateInstance`	Statesch Method déi e Knäppcheinstanz mat engem DOM Element assoziéiert zréckkënnt oder en neit erstellt am Fall datt et net initialiséiert gouf. Dir kënnt et esou benotzen `bootstrap.Button.getOrCreateInstance(element)`:.
`toggle`	Wiesselt Push Staat. Gëtt de Knäppchen d'Erscheinung datt et aktivéiert gouf.

Zum Beispill, fir all Knäppercher ze wiesselen

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

CSS

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotze Knäpper elo lokal CSS Variablen op .btnfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

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

All .btn-*Modifier Klass aktualiséiert déi entspriechend CSS Variablen fir zousätzlech CSS Reegele mat eise button-variant(), button-outline-variant(), a button-size()Mixins ze minimiséieren.

Hei ass e Beispill fir eng personaliséiert .btn-*Modifizéierungsklass ze bauen wéi mir fir d'Knäppercher eenzegaarteg fir eis Dokumenter maachen andeems Dir Bootstrap's CSS Variablen mat enger Mëschung vun eisen eegene CSS a Sass Variablen ëmgeet.

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

$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

Et ginn dräi Mixins fir Knäppercher: Knäppchen a Knäppchen Kontur Variant Mixins (souwuel baséiert op $theme-colors), plus e Knäppchen Gréisst Mixin.

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

Knäppevarianten (fir regelméisseg a Konturknäpper) benotzen hir jeeweileg Mixins mat eiser $theme-colorsKaart fir d'Modifier Klassen an ze generéieren 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);
  }
}