Nupud

Kasutage Bootstrapi kohandatud nupustiile vormides, dialoogides ja muudes toimingutes koos mitme suuruse, oleku ja muu toega.

Sellel lehel

Näited

Bootstrap sisaldab mitut eelmääratletud nupustiili, millest igaüks täidab oma semantilist eesmärki ja millele on lisatud mõned lisad, et paremini juhtida.

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>

Abitehnoloogiate tähenduse edasiandmine

Värvi kasutamine tähenduse lisamiseks annab ainult visuaalse viite, mida ei edastata abitehnoloogiate (nt ekraanilugejate) kasutajatele. .visually-hiddenVeenduge, et värviga tähistatud teave oleks kas sisust endast ilmne (nt nähtav tekst) või kaasatud alternatiivsete vahenditega, näiteks klassiga peidetud lisatekst .

Keela teksti murdmine

Kui te ei soovi, et nupu tekst murtaks, saate .text-nowrapklassi lisada nupule. Sassis saate $btn-white-space: nowrapkeelata iga nupu teksti murramise.

Nuppude sildid

Klassid on mõeldud .btnkasutamiseks koos <button>elemendiga. Siiski saate neid klasse kasutada ka elementide <a>või <input>elementide puhul (kuigi mõned brauserid võivad rakendada veidi erinevat renderdamist).

Kui kasutate nuppude klasse <a>elementidel, mida kasutatakse lehesisese funktsionaalsuse käivitamiseks (nt sisu kokkutõmbamine), selle asemel, et linkida praeguse lehe uutele lehtedele või jaotistele, tuleks nendele linkidele role="button"anda nende eesmärk asjakohaselt edastada abitehnoloogiatele, näiteks ekraanilugejad.

Link

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

Kontuurinupud

Kas vajate nuppu, kuid mitte nende pakutavaid kopsakaid taustavärve? Asendage vaikimisi modifikaatoriklassid klassidega .btn-outline-*, et eemaldada kõik taustpildid ja värvid mis tahes nupult.

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>

Mõned nupustiilid kasutavad suhteliselt heledat esiplaani värvi ja piisava kontrasti saavutamiseks tuleks neid kasutada ainult tumedal taustal.

Suurused

Kas soovite suuremaid või väiksemaid nuppe? Lisa .btn-lgvõi .btn-smlisasuuruste jaoks.

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>

Saate isegi oma kohandatud suuruse CSS-i muutujatega muuta:

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>

Puudega olek

Muutke nupud passiivseks, lisades mis tahes elemendile disabledtõeväärtuse atribuudi . <button>Keelatud nupud on pointer-events: nonerakendunud, takistades hõljumise ja aktiivsete olekute käivitumist.

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>

Elementi kasutavad keelatud nupud <a>käituvad veidi erinevalt:

<a>s ei toeta seda disabledatribuuti, seega peate .disabledklassi lisama, et see visuaalselt keelatud.
Kaasas on mõned tulevikusõbralikud stiilid, et kõik pointer-eventsankurnuppudel keelata.
Kasutatavad keelatud nupud <a>peaksid sisaldama aria-disabled="true"atribuuti, mis näitab abitehnoloogiate jaoks elemendi olekut.
Keelatud nupud <a> ei tohikshref atribuuti sisaldada .

Peamine link Link

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>

Lingi funktsionaalsuse hoiatus

Juhtude katmiseks, kui peate hrefatribuuti hoidma keelatud lingil, püüab .disabledklass s-i lingifunktsiooni keelata. Pange tähele, et see CSS-i atribuut pole veel HTML-i jaoks standarditud, kuid kõik kaasaegsed brauserid toetavad seda. Lisaks jääb klaviatuuriga navigeerimine muutumatuks isegi brauserites, mis toetavad , mis tähendab, et nägemisega klaviatuurikasutajad ja abitehnoloogiate kasutajad saavad neid linke siiski aktiveerida. Ohutuse huvides lisage nendele linkidele lisaks atribuutidele ka atribuut, mis takistab neil klaviatuuri fookuse saamist, ja kasutage nende funktsioonide täielikuks keelamiseks kohandatud JavaScripti.pointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

Peamine link Link

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>

Blokeerimisnupud

Looge meie kuvari ja vaheutiliitide seguga tundlike täislaiuste "blokeerimisnuppude" virnad nagu Bootstrap 4-s. Kasutades nuppude spetsiifiliste klasside asemel utiliite, on meil palju suurem kontroll vahekauguste, joonduse ja reageerimiskäitumise üle.

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>

Siin loome tundliku variatsiooni, alustades vertikaalselt virnastatud nuppudest kuni mdkatkestuspunktini, kus .d-md-blockasendab .d-gridklassi, tühistades seega gap-2utiliidi. Nende muutumise nägemiseks muutke oma brauseri suurust.

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>

Saate reguleerida ploki nuppude laiust ruudustiku veeru laiuse klassidega. Näiteks poole laiuse blokeerimisnupu jaoks kasutage .col-6. Keskendage see horisontaalselt ka nupuga .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>

Horisontaalsete nuppude joonduse reguleerimiseks saab kasutada täiendavaid utiliite. Siin oleme võtnud oma eelmise reageeriva näite ja lisanud nupule mõned paindlikud utiliidid ja veerisutiliidi, et nuppe paremale joondada, kui need pole enam virnastatud.

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>

Nupu pistikprogramm

Nuppude pistikprogramm võimaldab luua lihtsaid sisse/välja lülitusnuppe.

Visuaalselt on need lülitusnupud identsed märkeruudu lülitusnuppudega . Abitehnoloogiad edastavad need aga erinevalt: ekraanilugejad teatavad märkeruutude lülitustest kui "märgitud"/"mitte märgistatud" (kuna vaatamata välimusele on need põhimõtteliselt ikkagi märkeruudud), samas kui need lülitusnupud kuulutatakse kui "nupp"/"nupp vajutatud". Valik nende kahe lähenemisviisi vahel sõltub loodava lüliti tüübist ja sellest, kas see lüliti on kasutajatele mõttekas, kui see teatatakse märkeruudu või tegeliku nupuna.

Lülitage olekuid

Lisa data-bs-toggle="button"nupu activeoleku vahetamiseks. Kui lülitate nuppu eelnevalt ümber, peate .activeklassi käsitsi lisama ja aria-pressed="true" tagama, et see edastatakse abitehnoloogiatele õigesti.

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>

Lülita link Aktiivne lülituslink Lülituslink on keelatud

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>

meetodid

Nupueksemplari saate luua nupukonstruktoriga, näiteks:

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

meetod	Kirjeldus
`dispose`	Hävitab elemendi nupu. (Eemaldab DOM-elemendile salvestatud andmed)
`getInstance`	Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud nupu eksemplari, saate seda kasutada järgmiselt: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Staatiline meetod, mis tagastab DOM-i elemendiga seotud nupueksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.

Näiteks kõigi nuppude ümberlülitamiseks

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

CSS

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad nupud nüüd kohalikke CSS-i muutujaid, .btnet täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

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

Iga .btn-*modifikaatoriklass värskendab sobivaid CSS-i muutujaid, et minimeerida täiendavaid CSS-reegleid meie button-variant(), button-outline-variant(), ja button-size()mixinidega.

Siin on näide kohandatud .btn-*modifikaatoriklassi loomisest, nagu teeme oma dokumentide jaoks ainulaadsete nuppude jaoks, määrates Bootstrapi CSS-muutujad ümber meie enda CSS-i ja Sassi muutujate seguga.

.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%)};
}

Sassi muutujad

$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

Nuppude jaoks on kolm mixini: nupu ja nupu kontuuri variandi mixinid (mõlemad põhinevad $theme-colors), pluss nupu suuruse 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 aasad

Nuppude variandid (tavaliste ja kontuurinuppude jaoks) kasutavad meie $theme-colorskaardiga vastavaid miksineid, et genereerida modifikaatoriklassid 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);
  }
}