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.

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

Avustavan tekniikan merkityksen välittäminen

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 määrittää $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 osioihin, näille linkeille tulee antaa role="button"tarkoituksenmukaisesti välittää tarkoituksensa aputekniikoille, kuten esim. näytönlukijat.

Linkki

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

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

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

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.

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

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

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

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 poistamiseen kokonaan käytöstä.

Ensisijainen linkki Linkki

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

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.

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

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

<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 esimerkin ja lisänneet painikkeeseen joitain jousto-apuohjelmia ja marginaaliapuohjelman kohdistaaksemme painikkeet oikealle, kun niitä ei enää ole pinottu.

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

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

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

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

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Menetelmä	Kuvaus
`toggle`	Vaihtaa push-tilan. Antaa painikkeelle vaikutelman, että se on aktivoitu.
`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)`

Esimerkiksi vaihtaaksesi kaikkia painikkeita

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

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

Seokset

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

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} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}