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.

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>

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

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

Kontūro mygtukai

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

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>

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

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>

Jūs netgi galite pakeisti savo tinkintą dydį naudodami CSS kintamuosius:

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>

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

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>

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 <a>turėtų būti įtrauktas aria-disabled="true"atributas, nurodantis elemento būseną pagalbinėms technologijoms.
Išjungtuose mygtukuose <a> neturėtų būti hrefatributo.

Pirminė nuoroda Nuoroda

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>

Nuorodos funkcijos įspėjimas

Kad apimtų atvejus, kai turite išlaikyti hrefatributą išjungtoje nuorodoje, .disabledklasė naudoja pointer-events: nonebandydama išjungti s nuorodos funkcionalumą <a>. Atminkite, kad ši CSS ypatybė dar nėra standartizuota HTML, tačiau visos šiuolaikinės naršyklės ją palaiko. 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.

Pirminė nuoroda Nuoroda

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>

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.

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>

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

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>

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.

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>

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.

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>

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.

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>

Perjungti nuorodą Aktyvi perjungimo nuoroda Išjungta perjungimo nuoroda

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>

Metodai

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

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

Metodas	apibūdinimas
`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)`.
`toggle`	Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.

Pavyzdžiui, norėdami perjungti visus mygtukus

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

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, mygtukai dabar naudoja vietinius CSS kintamuosius, .btnkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

Kiekviena .btn-*modifikavimo klasė atnaujina atitinkamus CSS kintamuosius, kad sumažintų papildomas CSS taisykles naudojant mūsų button-variant(), button-outline-variant(), ir button-size()mixins.

Štai pavyzdys, kaip sukurti tinkintų .btn-*modifikatorių klasę, kaip tai darome mūsų dokumentams būdingiems mygtukams, perskirdami Bootstrap CSS kintamuosius su savo CSS ir Sass kintamųjų mišiniu.

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

Yra trys mygtukų mišiniai: mygtukų ir mygtukų kontūro variantų mišiniai (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)
) {
  --#{$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 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} {
    @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);
  }
}