in English

Pogas

Izmantojiet Bootstrap pielāgotos pogu stilus darbībām veidlapās, dialoglodziņos un citur ar atbalstu vairākiem izmēriem, stāvokļiem un citiem.

Šajā lapā

Piemēri

Bootstrap ietver vairākus iepriekš definētus pogu stilus, no kuriem katrs kalpo savam semantiskajam mērķim, ar dažām papildu funkcijām lielākai kontrolei.

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

Nozīmes nodošana palīgtehnoloģijām

Krāsu izmantošana nozīmes pievienošanai nodrošina tikai vizuālu norādi, kas netiks nodota palīgtehnoloģiju lietotājiem, piemēram, ekrāna lasītājiem. Nodrošiniet, lai informācija, kas apzīmēta ar krāsu, būtu vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tā ir iekļauta, izmantojot alternatīvus līdzekļus, piemēram, ar .visually-hiddenklasi paslēptu papildu tekstu.

Atspējot teksta aplaušanu

Ja nevēlaties, lai pogas teksts tiktu aplauzts, varat pievienot .text-nowrapklasi pogai. Programmā Sass varat iestatīt $btn-white-space: nowrap, lai katrai pogai tiktu atspējota teksta aplaušana.

Pogu atzīmes

Klases .btnir paredzētas lietošanai kopā ar <button>elementu. Tomēr šīs klases varat izmantot arī elementos <a>vai <input>elementos (lai gan dažas pārlūkprogrammas var izmantot nedaudz atšķirīgu renderēšanu).

Ja izmantojat pogu klases <a>elementiem, kas tiek izmantoti, lai aktivizētu lapas funkcionalitāti (piemēram, satura sakļaušanai), nevis saiti uz jaunām lapām vai sadaļām pašreizējā lapā, šīm saitēm ir jābūt, role="button"lai tās atbilstoši nodotu to mērķim palīgtehnoloģijās, piemēram, ekrāna lasītāji.

Saite

<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ūru pogas

Vai jums ir vajadzīga poga, bet ne spēcīgās fona krāsas? Aizstājiet noklusējuma modifikatoru klases ar tām .btn-outline-*, lai no jebkuras pogas noņemtu visus fona attēlus un krāsas.

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

Dažiem pogu stiliem tiek izmantota salīdzinoši gaiša priekšplāna krāsa, un tos vajadzētu izmantot tikai uz tumša fona, lai būtu pietiekams kontrasts.

Izmēri

Vai vēlaties lielākas vai mazākas pogas? Pievienojiet .btn-lgvai .btn-smpapildu izmēriem.

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

Atspējots stāvoklis

Padariet pogas neaktīvas, disabledjebkuram <button>elementam pievienojot Būla atribūtu. Atspējotās pogas ir pointer-events: nonelietotas, novēršot kursora novietošanas un aktīvo stāvokļu aktivizēšanu.

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

Atspējotās pogas, kas izmanto <a>elementu, darbojas nedaudz savādāk:

<a>s neatbalsta disabledatribūtu, tāpēc jums ir jāpievieno .disabledklase, lai tā vizuāli izskatītos atspējota.
Ir iekļauti daži nākotnei piemēroti stili, lai atspējotu visas pointer-eventsenkura pogas.
Atspējotajās pogās ir jāiekļauj aria-disabled="true"atribūts, kas norāda palīgtehnoloģiju elementa stāvokli.

Primārā saite Saite

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

Saites funkcionalitātes brīdinājums

Klase .disabledizmanto pointer-events: none, lai mēģinātu atspējot <a>s saites funkcionalitāti, taču šis CSS rekvizīts vēl nav standartizēts. Turklāt pat pārlūkprogrammās, kas atbalsta pointer-events: none, tastatūras navigācija paliek nemainīga, kas nozīmē, ka redzīgi tastatūras lietotāji un palīgtehnoloģiju lietotāji joprojām varēs aktivizēt šīs saites. Tāpēc, lai būtu droši, šajās saitēs aria-disabled="true"iekļaujiet arī tabindex="-1"atribūtu, lai tās nesaņemtu tastatūras fokusu, un izmantojiet pielāgotu JavaScript, lai pilnībā atspējotu to funkcionalitāti.

Bloķēšanas pogas

Izveidojiet atsaucīgas pilna platuma “bloķēšanas pogas”, piemēram, Bootstrap 4, izmantojot mūsu displeja un atstarpes utilītu kombināciju. Izmantojot utilītas, nevis pogas specifiskas klases, mums ir daudz lielāka kontrole pār atstarpēm, izlīdzināšanu un atsaucību.

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

Šeit mēs izveidojam responsīvu variāciju, sākot ar vertikāli saliktām pogām līdz mdpārtraukuma punktam, kur .d-md-blocktiek aizstāta .d-gridklase, tādējādi anulējot gap-2lietderību. Mainiet pārlūkprogrammas izmērus, lai redzētu, kā tie mainās.

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

Varat pielāgot bloku pogu platumu, izmantojot režģa kolonnu platuma klases. Piemēram, pusplatuma “bloķēšanas pogai” izmantojiet .col-6. Centrējiet to horizontāli .mx-autoarī ar .

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

Papildu utilītprogrammas var izmantot, lai pielāgotu pogu izlīdzināšanu horizontālā stāvoklī. Šeit mēs esam izmantojuši mūsu iepriekšējo adaptīvo piemēru un pievienojuši dažas elastīgas utilītprogrammas un pogai piemales utilītu, lai pogas izlīdzinātu pa labi, kad tās vairs nav saliktas.

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

Pogas spraudnis

Pogas spraudnis ļauj izveidot vienkāršas ieslēgšanas/izslēgšanas pogas.

Vizuāli šīs pārslēgšanas pogas ir identiskas izvēles rūtiņas pārslēgšanas pogām . Tomēr palīgtehnoloģijas tos pārraida atšķirīgi: ekrāna lasītāji paziņos par izvēles rūtiņu pārslēgšanu kā “atzīmētas”/“nav atzīmētas” (jo, neskatoties uz izskatu, tās joprojām ir izvēles rūtiņas), savukārt šīs pārslēgšanas pogas tiks paziņotas kā “poga”/“poga nospiesta”. Izvēle starp šīm divām pieejām būs atkarīga no jūsu izveidotā pārslēgšanas veida un no tā, vai lietotājiem būs jēga pārslēgšanai, kad tā tiks paziņota kā izvēles rūtiņa vai faktiska poga.

Pārslēgt stāvokļus

Pievienot data-bs-toggle="button", lai pārslēgtu pogas activestāvokli. Ja iepriekš pārslēdzat pogu, jums manuāli jāpievieno .activeklase un aria-pressed="true" jānodrošina, ka tā tiek atbilstoši nodota palīgtehnoloģijām.

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

Pārslēgt saiti Aktīvā pārslēgšanas saite Atspējota pārslēgšanas saite

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

Metodes

Varat izveidot pogas gadījumu, izmantojot pogu konstruktoru, piemēram:

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

Metode	Apraksts
`toggle`	Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.
`dispose`	Iznīcina elementa pogu. (Noņem DOM elementā saglabātos datus)
`getInstance`	Statiskā metode, kas ļauj iegūt pogas gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Statiskā metode, kas atgriež ar DOM elementu saistītu pogas gadījumu vai izveido jaunu, ja tas nav inicializēts. Varat to izmantot šādi:`bootstrap.Button.getOrCreateInstance(element)`

Piemēram, lai pārslēgtu visas pogas

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

Sass

Mainīgie lielumi

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

Maisījumi

Pogām ir trīs kombinācijas: pogas un pogas kontūras variantu kombinācijas (abi ir balstītas uz $theme-colors), kā arī pogas izmēra miksēšana.

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

Cilpas

Pogu varianti (parastajām un kontūras pogām) izmanto atbilstošos miksus ar mūsu $theme-colorskarti, lai ģenerētu modifikatoru 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);
  }
}