Fara í aðalefni Farðu í skjalaleiðsögn
in English

Hnappar

Notaðu sérsniðna hnappastíl Bootstrap fyrir aðgerðir í eyðublöðum, gluggum og fleira með stuðningi fyrir margar stærðir, stöður og fleira.

Á þessari síðu

Dæmi

Bootstrap inniheldur nokkra fyrirfram skilgreinda hnappastíla, sem hver þjónar sínum merkingarfræðilega tilgangi, með nokkrum aukahlutum til að fá meiri stjórn.

<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>
Að miðla merkingu til hjálpartækja

Notkun lita til að bæta við merkingu gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar af innihaldinu sjálfu (td sýnilegum texta), eða séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .visually-hiddenbekknum.

Slökktu á textabroti

Ef þú vilt ekki að hnappatextinn hverfi, geturðu bætt .text-nowrapbekknum við hnappinn. Í Sass geturðu stillt $btn-white-space: nowrapá að slökkva á textaumbroti fyrir hvern hnapp.

Hnapparmerki

Flokkarnir .btneru hannaðir til að nota með <button>frumefninu. Hins vegar geturðu líka notað þessa flokka á <a>eða <input>þætti (þó sumir vafrar gætu notað aðeins öðruvísi flutning).

Þegar hnappaflokkar eru notaðir á <a>þætti sem eru notaðir til að kveikja á virkni síðunnar (eins og efni sem hrynur saman), frekar en að tengja við nýjar síður eða hluta á núverandi síðu, ætti að gefa þessum hlekkjum til role="button"að koma tilgangi sínum á framfæri á viðeigandi hátt til hjálpartækni eins og skjálesarar.

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

Útlínuhnappar

Þarftu hnapp, en ekki stífu bakgrunnslitina sem þeir koma með? Skiptu út sjálfgefnum breytingaflokkum fyrir .btn-outline-*þá til að fjarlægja allar bakgrunnsmyndir og liti á hvaða hnapp sem er.

<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>
Sumir hnappastílanna nota tiltölulega ljósan forgrunnslit og ætti aðeins að nota á dökkum bakgrunni til að hafa nægilega birtuskil.

Stærðir

Langar þig í stærri eða minni hnappa? Bæta við .btn-lgeða .btn-smfyrir fleiri stærðir.

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

Óvirkt ástand

Láttu hnappa líta út fyrir að vera óvirkir með því að bæta disabledboolean eiginleikanum við hvaða <button>frumefni sem er. Óvirkir hnappar hafa pointer-events: noneverið notaðir til að koma í veg fyrir að sveima og virkt ástand kvikni.

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

Óvirkir hnappar sem nota <a>þáttinn hegða sér svolítið öðruvísi:

  • <a>s styðja ekki disabledeigindina, svo þú verður að bæta við .disabledbekknum til að láta hann líta út fyrir að vera óvirkur.
  • Sumir framtíðarvænir stílar eru innifaldir til að slökkva á öllu pointer-eventsá akkerihnappum.
  • Óvirkir hnappar ættu að innihalda aria-disabled="true"eigindina til að gefa til kynna stöðu þáttarins fyrir hjálpartækni.
Aðal hlekkur Tengill 
<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>

Bekkurinn .disablednotar pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s, en þessi CSS eign er ekki enn staðlað. Að auki, jafnvel í vöfrum sem styðja pointer-events: none, er lyklaborðsleiðsögn óbreytt, sem þýðir að sjáandi lyklaborðsnotendur og notendur hjálpartækni munu enn geta virkjað þessa tengla. Svo til að vera öruggur skaltu, auk aria-disabled="true", einnig innihalda tabindex="-1"eiginleika á þessum hlekkjum til að koma í veg fyrir að þeir fái lyklaborðsfókus, og notaðu sérsniðið JavaScript til að slökkva á virkni þeirra með öllu.

Blokkarhnappar

Búðu til móttækilega stafla af „blokkunarhnöppum“ í fullri breidd eins og í Bootstrap 4 með blöndu af skjá- og biltólum okkar. Með því að nota tól í stað hnappa tiltekinna flokka höfum við miklu meiri stjórn á bili, röðun og móttækilegri hegðun.

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

Hér búum við til móttækilegt afbrigði, sem byrjar með lóðrétt staflaðum hnöppum þar til mdbrotpunkturinn .d-md-blockkemur í staðinn fyrir .d-gridbekkinn og ógildir þannig gap-2gagnsemina. Breyttu stærð vafrans til að sjá þá breytast.

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

Þú getur stillt breidd blokkarhnappanna með breiddarflokkum fyrir dálka. Til dæmis, fyrir hálfbreidd „blokkunarhnapp“, notaðu .col-6. Miðaðu það líka lárétt með .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>

Hægt er að nota fleiri tól til að stilla röðun hnappa þegar þeir eru láréttir. Hér höfum við tekið fyrra móttækilegt dæmi okkar og bætt við nokkrum sveigjanlegum tólum og spássíuforriti á hnappinn til að stilla hnappana til hægri þegar þeir eru ekki lengur staflaðir.

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

Hnappa viðbót

Hnappaviðbótin gerir þér kleift að búa til einfalda kveikja/slökkvahnappa.

Sjónrænt eru þessir skiptahnappar eins og skiptahnappar gátreitsins . Hins vegar eru þær fluttar á annan hátt með hjálpartækni: skjálesarar munu tilkynna að gátreitirnir séu „merktir“/“ekki hakaðir“ (þar sem þeir eru í grundvallaratriðum enn gátreitir þrátt fyrir útlitið), en þessir skiptahnappar verða tilkynntir sem „hnappur“/“hnappur ýtt á“. Valið á milli þessara tveggja aðferða fer eftir tegund skipta sem þú ert að búa til, og hvort skiptan mun vera skynsamleg fyrir notendur þegar tilkynnt er um gátreit eða sem raunverulegan hnapp.

Skiptu um ríki

Bæta við data-bs-toggle="button"til að skipta um stöðu hnapps active. Ef þú ert að skipta um hnapp fyrirfram verður þú að bæta .activebekknum við handvirkt og aria-pressed="true" tryggja að hann sé fluttur á viðeigandi hátt til hjálpartækni.

<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>
Skiptu um tengil Virkur skiptatengill Slökkt á skiptatengli 
<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Aðferðir

Þú getur búið til hnappatilvik með hnappasmiðnum, til dæmis:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Aðferð Lýsing
toggle Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.
dispose Eyðir hnappi frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)
getInstance Statísk aðferð sem gerir þér kleift að fá hnappatilvikið tengt DOM frumefni, þú getur notað það svona:bootstrap.Button.getInstance(element)
getOrCreateInstance Statísk aðferð sem skilar hnappatilviki sem tengist DOM-einingu eða býr til nýjan ef hann var ekki frumstilltur. Þú getur notað það svona:bootstrap.Button.getOrCreateInstance(element)

Til dæmis til að skipta um alla hnappa

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

Sass

Breytur

$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

Það eru þrjár blöndur fyrir hnappa: hnappa og hnappaútlínur afbrigði blöndunar (báðar byggðar á $theme-colors), auk hnappastærðar blöndunar.

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

Lykkjur

Hnappafbrigði (fyrir venjulega hnappa og útlínur) nota viðkomandi blöndun með $theme-colorskortinu okkar til að búa til breytingaflokkana í 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);
  }
}