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.

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>

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. Pārliecinieties, ka informācija, kas apzīmēta ar krāsu, ir vai nu acīmredzama no paša satura (piemēram, redzamā teksta), vai arī tiek iekļauta, izmantojot alternatīvus līdzekļus, piemēram, papildu tekstu, kas paslēpts kopā ar .visually-hiddenklasi.

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

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

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>

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.

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 pat varat mainīt savu pielāgoto izmēru, izmantojot CSS mainīgos:

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>

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.

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>

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ām pogām <a>ir jāiekļauj aria-disabled="true"atribūts, kas norāda elementa stāvokli palīgtehnoloģijās.
Atspējotajās pogās, kas izmanto <a> , nevajadzētu ietvert hrefatribūtu.

Primārā saite Saite

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>

Saites funkcionalitātes brīdinājums

Lai aptvertu gadījumus, kad hrefatribūts ir jāsaglabā atspējotā saitē, .disabledklase izmanto pointer-events: none, lai mēģinātu atspējot <a>s saites funkcionalitāti. Ņemiet vērā, ka šis CSS rekvizīts vēl nav standartizēts HTML, taču visas mūsdienu pārlūkprogrammas to atbalsta. 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.

Primārā saite Saite

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>

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.

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>

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

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>

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 .

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>

Papildu utilītprogrammas var izmantot, lai pielāgotu pogu izlīdzināšanu, kad tās atrodas horizontāli. Šeit mēs ņēmām savu iepriekšējo adaptīvo piemēru un pievienojām dažas elastīgas utilītprogrammas un pogai piemales utilītu, lai pogas izlīdzinātu pa labi, kad tās vairs nav saliktas.

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>

Pogas spraudnis

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

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>

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

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>

Metodes

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

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

Metode	Apraksts
`dispose`	Iznīcina elementa pogu. (Noņem DOM elementā saglabātos datus)
`getInstance`	Statiskā metode, kas ļauj iegūt ar DOM elementu saistīto pogas gadījumu, 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)`.
`toggle`	Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.

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

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

CSS

Mainīgie

Pievienots v5.2.0

Kā daļu no Bootstrap attīstošās CSS mainīgo pieejas pogas tagad izmanto vietējos CSS mainīgos, .btnlai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

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

Katra .btn-*modifikatoru klase atjaunina atbilstošos CSS mainīgos, lai samazinātu papildu CSS noteikumus, izmantojot mūsu button-variant(), button-outline-variant(), un button-size()mixins.

Šeit ir piemērs, kā izveidot pielāgotu .btn-*modifikatoru klasi, kā mēs to darām mūsu dokumentiem unikālajām pogām, atkārtoti piešķirot Bootstrap CSS mainīgos ar mūsu pašu CSS un Sass mainīgo sajaukumu.

.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 mainīgie

$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

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

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

Pogu varianti (parastajām un kontūru 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} {
    @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);
  }
}