Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Knoppen

Brûk de oanpaste knopstilen fan Bootstrap foar aksjes yn formulieren, dialogen en mear mei stipe foar meardere grutte, steaten, en mear.

Op dizze side

Foarbylden

Bootstrap omfettet ferskate foarôf definieare knopstilen, dy't elk har eigen semantyske doel tsjinje, mei in pear ekstra's ynlutsen foar mear kontrôle.

<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>
Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.

Tekstomloop útskeakelje

As jo ​​​​net wolle dat de tekst fan 'e knop omslacht, kinne jo de .text-nowrapklasse tafoegje oan de knop. Yn Sass kinne jo ynstelle $btn-white-space: nowrapom tekstomslach foar elke knop út te skeakeljen.

Knop tags

De .btnklassen binne ûntwurpen om te brûken mei it <button>elemint. Jo kinne dizze klassen lykwols ek brûke op <a>of <input>eleminten (hoewol guon browsers in wat oare rendering kinne tapasse).

By it brûken fan knopklassen op <a>eleminten dy't brûkt wurde om funksjonaliteit op 'e side te triggerjen (lykas ynstoarte ynhâld), ynstee fan keppeljen nei nije siden of seksjes binnen de hjoeddeistige side, moatte dizze keppelings in wurde jûn role="button"om har doel passend oer te bringen oan assistinte technologyen lykas skermlêzers.

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

In knop nedich, mar net de heftige eftergrûnkleuren dy't se bringe? Ferfange de standert modifikaasjeklassen mei dy .btn-outline-*om alle eftergrûnôfbyldings en kleuren op elke knop te ferwiderjen.

<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>
Guon fan 'e knopstilen brûke in relatyf ljochte foargrûnkleur, en moatte allinich brûkt wurde op in donkere eftergrûn om genôch kontrast te hawwen.

Maten

Wolle jo gruttere of lytsere knoppen? Add .btn-lgof .btn-smfoar ekstra maten.

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

Utskeakele steat

Meitsje knoppen lykje ynaktyf troch it tafoegjen fan it disabledBooleaanske attribút oan elk <button>elemint. Utskeakele knoppen binne pointer-events: nonetapast op, foarkommen fan hover en aktive steaten út te triggerjen.

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

Utskeakele knoppen mei it <a>elemint gedrage in bytsje oars:

  • <a>s stypje it disabledattribút net, dus jo moatte de .disabledklasse tafoegje om it fisueel útskeakele te meitsjen.
  • Guon takomstfreonlike stilen binne opnommen om alles pointer-eventsop ankerknoppen út te skeakeljen.
  • Utskeakele knoppen dy't brûke <a>moatte it aria-disabled="true"attribút omfetsje om de steat fan it elemint oan te jaan oan assistinte technologyen.
  • Utskeakele knoppen dy't brûke <a> moattehref it attribút net befetsje .
Primêre keppeling Link 
<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>

Om te dekken gefallen dêr't jo moatte hâlden it hrefattribút op in útskeakele keppeling, de .disabledklasse brûkt pointer-events: noneom te besykjen te skeakeljen de keppeling funksjonaliteit fan <a>s. Tink derom dat dizze CSS-eigenskip noch net standerdisearre is foar HTML, mar alle moderne browsers stypje it. Derneist, sels yn browsers dy't stypje pointer-events: none, bliuwt toetseboerdnavigaasje net beynfloede, wat betsjuttet dat sichtbere toetseboerdbrûkers en brûkers fan assistinte technologyen dizze keppelings noch kinne aktivearje. Dus om feilich te wêzen, befetsje njonken aria-disabled="true", ek in tabindex="-1"attribút op dizze keppelings om te foarkommen dat se toetseboerdfokus krije, en brûk oanpaste JavaScript om har funksjonaliteit hielendal út te skeakeljen.

Primêre keppeling Link 
<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>

Blokke knoppen

Meitsje responsive stapels fan "blokknoppen" yn 'e heule breedte lykas dy yn Bootstrap 4 mei in miks fan ús display- en gap-hulpprogramma's. Troch helpprogramma's te brûken ynstee fan knopspesifike klassen, hawwe wy folle gruttere kontrôle oer ôfstân, ôfstimming en responsyf gedrach.

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

Hjir meitsje wy in responsive fariaasje, begjinnend mei fertikaal steapele knoppen oant it mdbrekpunt, wêr't .d-md-blockde klasse ferfangt .d-grid, en dus it gap-2nut annulearret. Feroarje de grutte fan jo blêder om se te feroarjen.

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

Jo kinne de breedte fan jo blokknoppen oanpasse mei rasterkolombreedteklassen. Bygelyks, foar in heale breedte "blok knop", brûk .col-6. Sintrearje it ek horizontaal mei .mx-auto.

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

Oanfoljende nutsbedriuwen kinne brûkt wurde om de ôfstimming fan knoppen oan te passen as se horizontaal binne. Hjir hawwe wy ús foarige responsive foarbyld nommen en wat flex-hulpprogramma's tafoege en in marzje-hulpprogramma op 'e knop om de knoppen rjochts út te rjochtsjen as se net mear steapele binne.

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

Knop plugin

De knop-plugin lit jo ienfâldige oan / útskeakelje knoppen meitsje.

Visueel binne dizze wikselknoppen identyk oan de wikselknoppen foar karfakje . Se wurde lykwols oars oerbrocht troch assistinte technologyen: de karfakjes sille wurde oankundige troch skermlêzers as "kontrolearre" / "net kontrolearre" (omdat se, nettsjinsteande har uterlik, yn prinsipe noch karfakjes binne), wylst dizze toggle-knoppen wurde oankundige as "knop"/"knop yndrukt". De kar tusken dizze twa oanpakken sil ôfhingje fan it type skeakel dat jo oanmeitsje, en oft de skeakel sin sil meitsje foar brûkers as oankundige as in karfakje of as in feitlike knop.

Toggle steaten

Foegje data-bs-toggle="button"ta om de status fan in knop te wikseljen active. As jo ​​​​foarôf in knop wikselje, moatte jo de .activeklasse manuell tafoegje en aria-pressed="true" soargje dat it passend wurdt oerbrocht nei assistinte technologyen.

<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>
Skeakelje keppeling Aktive wikselkeppeling Utskeakele wikselkeppeling 
<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>

Metoaden

Jo kinne in knopeksimplaar oanmeitsje mei de knopkonstruktor, bygelyks:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Metoade Beskriuwing
toggle Wizigje push-status. Jout de knop it uterlik dat it is aktivearre.
dispose Fernielet in elemint syn knop. (Ferwidert bewarre gegevens op it DOM-elemint)
getInstance Statyske metoade wêrmei jo de knopeksimplaar kinne krije assosjearre mei in DOM-elemint, jo kinne it sa brûke:bootstrap.Button.getInstance(element)
getOrCreateInstance Statyske metoade dy't in knopeksimplaar werombringt dy't ferbûn is mei in DOM-elemint of in nije oanmeitsje foar it gefal dat it net inisjalisearre is. Jo kinne it sa brûke:bootstrap.Button.getOrCreateInstance(element)

Bygelyks om alle knoppen te wikseljen

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

Sass

Fariabelen

$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

D'r binne trije mixins foar knoppen: knop- en knop-outline fariantmixins (beide basearre op $theme-colors), plus in knopgruttemixin.

@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

Knopfarianten (foar gewoane en omtrekknoppen) brûke har respektive mixins mei ús $theme-colorskaart om de modifikaasjeklassen yn te generearjen 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);
  }
}