Painikkeet

Käytä Bootstrapin mukautettuja painiketyylejä toimintoihin lomakkeissa, valintaikkunoissa ja muissa useiden kokojen, tilojen ja muiden tukien avulla.

Tällä sivulla

Esimerkkejä

Bootstrap sisältää useita ennalta määritettyjä painiketyylejä, joista jokainen palvelee omaa semanttista tarkoitustaan, ja muutama lisätoiminto lisäten hallintaa.

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>

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.

Poista tekstin rivitys käytöstä

Jos et halua painikkeen tekstin rivittyvän, voit lisätä .text-nowrapluokan painikkeeseen. Sassissa voit asettaa $btn-white-space: nowrappoistamaan jokaisen painikkeen tekstin rivityksen käytöstä.

Painikkeiden tunnisteet

Luokat .btnon suunniteltu käytettäviksi <button>elementin kanssa. Voit kuitenkin käyttää näitä luokkia myös <a>elementeissä <input>(tosin jotkin selaimet saattavat käyttää hieman erilaista hahmonnusta).

Kun käytät painikeluokkia <a>elementeissä, joita käytetään käynnistämään sivun sisäisiä toimintoja (kuten tiivistämään sisältöä), sen sijaan, että linkittäisiin nykyisen sivun uusille sivuille tai osiin, näille linkeille tulee antaa role="button"tarkoituksenmukaisesti välittää niiden tarkoitus aputekniikoille, kuten esim. näytönlukijat.

Linkki

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

Jäsennyspainikkeet

Tarvitsetko painikkeen, mutta et niiden tuomia muhkeita taustavärejä? Korvaa oletusmuokkausluokat luokilla .btn-outline-*poistaaksesi kaikki taustakuvat ja värit mistä tahansa painikkeesta.

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>

Jotkut painiketyyleistä käyttävät suhteellisen vaaleaa etualan väriä, ja niitä tulisi käyttää vain tummalla taustalla riittävän kontrastin saamiseksi.

Koot

Haluatko suurempia vai pienempiä painikkeita? Lisää .btn-lgtai .btn-smlisäkokoja varten.

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>

Voit jopa rullata omia mukautettuja kokojasi CSS-muuttujien avulla:

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>

Pois käytöstä

Saat painikkeet näyttämään passiivisilta lisäämällä disabledloogisen attribuutin mihin tahansa <button>elementtiin. Käytöstä poistettuja painikkeita on pointer-events: nonekäytetty, mikä estää hover- ja aktiivisten tilojen laukaisun.

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>

Elementtiä käyttävät käytöstä poistetut painikkeet <a>käyttäytyvät hieman eri tavalla:

<a>s eivät tue disabledmääritettä, joten sinun on lisättävä .disabledluokka, jotta se näyttää visuaalisesti pois käytöstä.
Mukana on joitain tulevaisuuteen sopivia tyylejä, jotka poistavat kaikki pointer-eventsankkuripainikkeet käytöstä.
Käytöstä poistettujen painikkeiden <a>tulee sisältää aria-disabled="true"attribuutti, joka ilmaisee elementin tilan avustaville tekniikoille.
Käytöstä poistetut painikkeet <a> eivät saa sisältää hrefmääritettä.

Ensisijainen linkki Linkki

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>

Varoitus linkin toimivuudesta

Kattaakseen tapaukset, joissa hrefattribuutti on säilytettävä käytöstä poistetussa linkissä, .disabledluokka pointer-events: noneyrittää poistaa <a>s:n linkkitoiminnot käytöstä. Huomaa, että tätä CSS-ominaisuutta ei ole vielä standardoitu HTML:lle, mutta kaikki nykyaikaiset selaimet tukevat sitä. Lisäksi jopa selaimissa, jotka tukevat pointer-events: none, näppäimistönavigointi pysyy ennallaan, mikä tarkoittaa, että näkevät näppäimistön käyttäjät ja avustavien tekniikoiden käyttäjät voivat silti aktivoida nämä linkit. Joten varmuuden vuoksi sisällytä näihin linkkeihin aria-disabled="true"myös tabindex="-1"attribuutti, joka estää niitä vastaanottamasta näppäimistökohdistusta, ja käytä mukautettua JavaScriptiä niiden toiminnan poistamiseksi kokonaan käytöstä.

Ensisijainen linkki Linkki

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>

Estä painikkeet

Luo responsiivisia pinoja täysleveitä, "blokkipainikkeita", kuten Bootstrap 4:ssä, käyttämällä näyttö- ja väliapuohjelmiamme. Käyttämällä apuohjelmia painikekohtaisten luokkien sijasta voimme hallita paljon paremmin välilyöntejä, kohdistusta ja reagointia.

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>

Täällä luomme responsiivisen muunnelman, alkaen pystysuoraan pinotuista painikkeista mdkeskeytyskohtaan saakka, jossa .d-md-blockkorvataan .d-gridluokka, mikä mitätöi gap-2apuohjelman. Muuta selaimesi kokoa nähdäksesi ne muuttuvat.

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>

Voit säätää lohkopainikkeiden leveyttä ruudukon sarakkeiden leveysluokkien avulla. Käytä esimerkiksi puolileveälle "blokkipainikkeelle" .col-6. Keskitä se vaakasuoraan myös .mx-auto-painikkeella.

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>

Muita apuohjelmia voidaan käyttää painikkeiden kohdistuksen säätämiseen vaaka-asennossa. Tässä olemme ottaneet edellisen responsiivisen esimerkkimme ja lisänneet painikkeeseen joitain jousto-apuohjelmia ja marginaaliapuohjelman kohdistaaksemme painikkeet oikealle, kun niitä ei enää ole pinottu.

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>

Painikelaajennus

Painikelaajennuksen avulla voit luoda yksinkertaisia päälle/pois-vaihtopainikkeita.

Visuaalisesti nämä vaihtopainikkeet ovat identtisiä valintaruudun vaihtopainikkeen kanssa . Avustavat tekniikat välittävät ne kuitenkin eri tavalla: näytönlukijat ilmoittavat valintaruutujen vaihdoista "valituiksi"/"ei valittuiksi" (koska ulkonäöstään huolimatta ne ovat pohjimmiltaan edelleen valintaruutuja), kun taas nämä vaihtopainikkeet ilmoitetaan "painike"/"painike painettu". Valinta näiden kahden lähestymistavan välillä riippuu luomasi vaihtokytkimen tyypistä ja siitä, onko kytkin järkevää käyttäjille, kun se ilmoitetaan valintaruuduna vai varsinaisena painikkeena.

Vaihda tilat

Lisää data-bs-toggle="button"vaihtaaksesi painikkeen activetilan. Jos vaihdat painiketta etukäteen, sinun on lisättävä .activeluokka manuaalisesti ja aria-pressed="true" varmistettava, että se välitetään asianmukaisesti aputekniikoille.

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>

Vaihda linkki Aktiivinen vaihtolinkki Vaihtolinkki poistettu käytöstä

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>

menetelmät

Voit luoda painikeesiintymän painikekonstruktorilla, esimerkiksi:

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

Menetelmä	Kuvaus
`dispose`	Tuhoaa elementin painikkeen. (Poistaa DOM-elementtiin tallennetut tiedot)
`getInstance`	Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän painikkeen esiintymän, voit käyttää sitä seuraavasti: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Staattinen menetelmä, joka palauttaa DOM-elementtiin liitetyn painikeesiintymän tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Vaihtaa työntötilan. Antaa painikkeelle vaikutelman, että se on aktivoitu.

Esimerkiksi vaihtaaksesi kaikkia painikkeita

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

CSS

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa painikkeet käyttävät nyt paikallisia CSS-muuttujia .btntehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

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

Jokainen .btn-*muokkausluokka päivittää sopivat CSS-muuttujat minimoidakseen CSS-lisäsäännöt button-variant(), button-outline-variant(), ja button-size()mixinien avulla.

Tässä on esimerkki mukautetun .btn-*muokkausluokan rakentamisesta, kuten teemme asiakirjoillemme ainutlaatuisille painikkeille määrittämällä Bootstrapin CSS-muuttujat omien CSS- ja Sass-muuttujien sekoituksella.

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

$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

Painikkeille on kolme mixinia: painike- ja painikkeen ääriviivavarianttien mixinit (molemmat perustuvat -merkkiin $theme-colors) sekä painikkeen kokoinen 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 silmukat

Painikemuunnelmat (tavallisille painikkeille ja ääriviivapainikkeille) käyttävät vastaavia mixinejä karttamme kanssa $theme-colorsluomaan muokkausluokat 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);
  }
}