in English

Mygtukai

Naudokite Bootstrap tinkintus mygtukų stilius veiksmams formose, dialoguose ir kt., palaikydami kelis dydžius, būsenas ir kt.

Šiame puslapyje

Pavyzdžiai

„Bootstrap“ apima kelis iš anksto nustatytus mygtukų stilius, kurių kiekvienas atlieka savo semantinę paskirtį, su keliais priedais, kad būtų galima geriau valdyti.

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Išjungti teksto vyniojimą

Jei nenorite, kad mygtuko tekstas būtų apvyniotas, galite pridėti .text-nowrapklasę prie mygtuko. „Sass“ galite nustatyti, $btn-white-space: nowrapkad būtų išjungtas kiekvieno mygtuko teksto įvyniojimas.

Mygtukų žymos

Klasės .btnskirtos naudoti su <button>elementu. Tačiau šias klases galite naudoti <a>ir <input>elementuose (nors kai kurios naršyklės gali taikyti šiek tiek kitokį atvaizdavimą).

Kai naudojate mygtukų klases <a>elementuose, kurie naudojami puslapio funkcijoms suaktyvinti (pvz., turinio sutraukimui), o ne nuorodoms į naujus puslapius ar skiltis dabartiniame puslapyje, šios nuorodos turėtų būti pateiktos role="button"tinkamai perteiktų jų paskirtį pagalbinėms technologijoms, pvz. ekrano skaitytuvai.

Nuoroda

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

Kontūro mygtukai

Reikia mygtuko, bet ne ryškių fono spalvų? Pakeiskite numatytąsias modifikavimo klases tomis .btn-outline-*, kad pašalintumėte visus fono paveikslėlius ir spalvas bet kuriame mygtuke.

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

Kai kurie mygtukų stiliai naudoja gana šviesią priekinio plano spalvą ir turėtų būti naudojami tik tamsiame fone, kad būtų pakankamai kontrasto.

Dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Pridėti .btn-lgarba .btn-smpapildomų dydžių.

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

Neįgalus būsena

disabledPridėkite loginį atributą prie bet kurio <button>elemento , kad mygtukai atrodytų neaktyvūs . Išjungti mygtukai buvo pointer-events: nonepritaikyti, neleidžiantys suaktyvinti užvedimo ir aktyvių būsenų.

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

Išjungti mygtukai, naudojantys <a>elementą, veikia šiek tiek kitaip:

<a>s nepalaiko disabledatributo, todėl turite pridėti .disabledklasę, kad ji vizualiai atrodytų išjungta.
Įtraukti kai kurie ateičiai tinkami stiliai, leidžiantys išjungti visus pointer-eventsinkaro mygtukus.
Į išjungtus mygtukus turėtų būti įtrauktas aria-disabled="true"atributas, nurodantis pagalbinių technologijų elemento būseną.

Pirminė nuoroda Nuoroda

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

Nuorodos funkcijos įspėjimas

.disabledKlasė naudoja pointer-events: nonebandydama išjungti s nuorodos funkcionalumą , <a>tačiau ta CSS ypatybė dar nėra standartizuota. Be to, net naršyklėse, kurios palaiko pointer-events: none, klaviatūros naršymas lieka nepakitęs, o tai reiškia, kad regintys klaviatūros ir pagalbinių technologijų naudotojai vis tiek galės suaktyvinti šias nuorodas. Taigi, kad būtų saugu, šiose nuorodose aria-disabled="true"taip pat įtraukite tabindex="-1"atributą, kad jos negalėtų gauti klaviatūros fokusavimo, ir naudokite tinkintą JavaScript, kad visiškai išjungtumėte jų funkcijas.

Blokavimo mygtukai

Sukurkite reaguojančius viso pločio „blokavimo mygtukų“ šūsnius, tokius kaip „Bootstrap 4“, naudodami mūsų ekrano ir tarpų paslaugų derinį. Naudodami komunalines paslaugas, o ne konkrečias mygtukų klases, galime daug geriau valdyti tarpus, lygiavimą ir reagavimo veiksmus.

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

Čia sukuriame reaguojantį variantą, pradedant vertikaliai sukrautais mygtukais iki mdlūžio taško, kur .d-md-blockpakeičiama .d-gridklasė, taip panaikinant gap-2naudingumą. Pakeiskite naršyklės dydį, kad pamatytumėte, kaip jie keičiasi.

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

Galite reguliuoti bloko mygtukų plotį naudodami tinklelio stulpelio pločio klases. Pavyzdžiui, pusės pločio „blokavimo mygtukui“ naudokite .col-6. Centruokite jį taip pat horizontaliai su .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>

Galima naudoti papildomas priemones, kad būtų galima reguliuoti mygtukų išlygiavimą, kai jie yra horizontaliai. Čia mes paėmėme ankstesnį interaktyvų pavyzdį ir pridėjome keletą lanksčių paslaugų ir mygtuko paraštės paslaugų, kad sulygiuotų mygtukus dešinėje, kai jie nebėra sukrauti.

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

Mygtukų papildinys

Mygtukų papildinys leidžia sukurti paprastus įjungimo/išjungimo mygtukus.

Vizualiai šie perjungimo mygtukai yra identiški žymės langelio perjungimo mygtukams . Tačiau pagalbinės technologijos juos perteikia skirtingai: ekrano skaitytuvai praneš apie žymimuosius langelius kaip „pažymėtus“ / „nepažymėti“ (nes, nepaisant jų išvaizdos, jie iš esmės vis dar yra žymės langeliai), o šie perjungimo mygtukai bus paskelbti kaip „mygtukas“ / „mygtukas paspaustas“. Pasirinkimas tarp šių dviejų būdų priklausys nuo kuriamo perjungimo tipo ir nuo to, ar perjungimas bus prasmingas vartotojams, kai paskelbiamas kaip žymimasis laukelis, ar kaip tikras mygtukas.

Perjungti būsenas

Pridėti data-bs-toggle="button", kad perjungtumėte mygtuko activebūseną. Jei iš anksto perjungiate mygtuką, turite rankiniu būdu pridėti .activeklasę ir aria-pressed="true" užtikrinti, kad ji būtų tinkamai perduota pagalbinėms technologijoms.

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

Perjungti nuorodą Aktyvi perjungimo nuoroda Išjungta perjungimo nuoroda

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

Metodai

Mygtuko egzempliorių galite sukurti naudodami mygtukų konstruktorių, pavyzdžiui:

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

Metodas	apibūdinimas
`toggle`	Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.
`dispose`	Sunaikina elemento mygtuką. (Pašalina saugomus duomenis DOM elemente)
`getInstance`	Statinis metodas, leidžiantis gauti mygtuko egzempliorių, susietą su DOM elementu, galite jį naudoti taip:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Statinis metodas, kuris grąžina mygtuko egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip:`bootstrap.Button.getOrCreateInstance(element)`

Pavyzdžiui, norėdami perjungti visus mygtukus

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

Sass

Kintamieji

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

Mišiniai

Yra trys mygtukų mišiniai: mygtukų ir mygtukų kontūro variantų deriniai (abu pagrįsti $theme-colors) ir mygtuko dydžio mišiniai.

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

Kilpos

Mygtukų variantai (įprastiems ir kontūriniams mygtukams) naudoja atitinkamus mišinius su mūsų $theme-colorsžemėlapiu, kad generuotų modifikatorių klases 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);
  }
}