Fara í aðalefni Farðu í skjalaleiðsögn
Check
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.

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

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

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

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>

Þú getur jafnvel rúllað þinni eigin sérsniðnu stærð með CSS breytum:

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>

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

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>

Ó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 sem nota <a>ættu að innihalda aria-disabled="true"eigindina til að gefa til kynna stöðu þáttarins fyrir hjálpartækni.
  • Óvirkir hnappar sem nota <a> ættu ekki að innihalda hrefeigindina.
Aðal hlekkur Tengill
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>

Til að ná yfir tilvik þar sem þú þarft að halda hrefeigindinni á óvirkum hlekk, .disablednotar flokkurinn pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s. Athugaðu að þessi CSS eign er ekki enn staðlað fyrir HTML, en allir nútíma vafrar styðja það. 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.

Aðal hlekkur Tengill
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>

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.

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>

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.

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>

Þú 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.

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>

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.

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>

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.

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>
Skiptu um tengil Virkur skiptatengill Slökkt á skiptatengli
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>

Aðferðir

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

const bsButton = new bootstrap.Button('#myButton')
Aðferð Lýsing
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).
toggle Skiptir á ýtastöðu. Gefur hnappinum það útlit að hann hafi verið virkjaður.

Til dæmis til að skipta um alla hnappa

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

CSS

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap nálgun, nota hnappar nú staðbundnar CSS breytur á .btntil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

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

Hver .btn-*breytingaflokkur uppfærir viðeigandi CSS breytur til að lágmarka viðbótar CSS reglur með button-variant(), button-outline-variant(), og button-size()blöndunum okkar.

Hér er dæmi um að byggja upp sérsniðinn .btn-*breytingaflokk eins og við gerum fyrir hnappana sem eru einstakir fyrir skjölin okkar með því að endurúthluta CSS breytum Bootstrap með blöndu af okkar eigin CSS og Sass breytum.

.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 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:              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%;

Snilldar blöndur

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