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.

<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

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

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

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

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.

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

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.
Keelatud nupud peaksid sisaldama aria-disabled="true"atribuuti, mis näitab abitehnoloogiate jaoks elemendi olekut.

Peamine link Link

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

Lingi funktsionaalsuse hoiatus

Klass .disabledkasutab s-i pointer-events: nonelingifunktsiooni keelamiseks <a>, kuid see CSS-i atribuut pole veel standarditud. Lisaks pointer-events: nonejää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 aria-disabled="true"ka atribuut, mis takistab neil klaviatuuri fookuse saamist, ja kasutage nende funktsioonide täielikuks keelamiseks kohandatud JavaScripti.tabindex="-1"

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.

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

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

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

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

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

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

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

meetodid

Nupueksemplari saate luua nupukonstruktoriga, näiteks:

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

meetod	Kirjeldus
`toggle`	Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.
`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)`

Näiteks kõigi nuppude ümberlülitamiseks

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

Sass

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

Segud

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

Silmused

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

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