Buttons

Ji bo çalakiyên di form, diyalog û hêj bêtir bi piştgirî ji bo gelek pîvan, dewlet û hêj bêtir şêwazên bişkojka xwerû yên Bootstrap bikar bînin.

Li ser vê rûpelê

Examples

Bootstrap gelek şêwazên bişkokê yên ji berê ve diyarkirî vedihewîne, her yek ji armanca xweya semantîkî re xizmet dike, digel ku çend pêvek ji bo bêtir kontrolê têne avêtin.

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>

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .visually-hiddenpolê re veşartî ye.

Rakirina nivîsê neçalak bike

Heke hûn nexwazin ku nivîsa bişkojkê biqelişe, hûn dikarin .text-nowrappolê li bişkokê zêde bikin. Di Sass de, hûn dikarin ji $btn-white-space: nowrapbo her bişkokê pêçana nivîsê neçalak bikin.

Etîketên bişkokê

Ders .btntêne çêkirin ku bi hêmanan re bêne bikar anîn <button>. Lêbelê, hûn dikarin van dersan li ser <a>an <input>hêmanan jî bikar bînin (her çend hin gerok dikarin vegotinek hinekî cûda bicîh bînin).

Dema ku çînên bişkojkê li ser <a>hêmanên ku têne bikar anîn ku fonksiyonên navrûpelê bişopînin (mîna naverok hilweşandî) têne bikar anîn, li şûna girêdana bi rûpelan an beşên nû yên di hundurê rûpela heyî de, divê van lînkan ji bo role="button"ku mebesta xwe bi rêkûpêk bi teknolojiyên arîkar re ragihînin, wekî xwendevanên ekranê.

Pêvek

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

Bişkojkên Outline

Pêdivî bi bişkokek heye, lê ne rengên paşxanê yên giran ku ew tînin? Çînên guhêrbar ên xwerû bi wan re .btn-outline-*biguhezînin da ku hemî wêne û rengan li ser her bişkokê jêbirin.

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>

Hin şêwazên bişkokê rengek pêşek bi rengek sivik bikar tînin, û divê tenê li ser paşxaneyek tarî werin bikar anîn da ku berevajî têr hebe.

Sizes

Bişkokên mezintir an piçûktir dixwazin? Zêde bikin .btn-lgan .btn-smji bo pîvanên din.

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>

Tewra hûn dikarin pîvana xweya xwerû bi guhêrbarên CSS-ê bixin:

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>

Dewlet seqet

Bi zêdekirina disabledtaybetmendiya boolean li her hêmanekê , bişkokan neçalak xuya bikin <button>. Bişkokên neçalak li ser hatine pointer-events: nonesepandin, ku rê li ber xistina hover û dewletên çalak digire.

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>

Bişkojkên neçalakkirî yên ku <a>hêmanê bikar tînin hinekî cûda tevdigerin:

<a>disableds taybetmendiyê piştgirî nakin , ji ber vê yekê divê hûn lê zêde bikin.disabled , ji ber vê yekê divê hûn polê lê zêde bikin da ku ew bi dîtbarî neçalak xuya bike.
Hin şêwazên paşerojê-heval tê de hene ku hemî neçalak bikinpointer-events li ser bişkokên lengerê neçalak bikin.
Bişkokên neçalakkirî yên ku têne bikar anîn <a>divê aria-disabled="true"taybetmendiyek hebe ku rewşa hêmanê ji teknolojiyên alîkar re destnîşan bike.
Bişkokên neçalakkirî yên ku têne bikar anîn divê <a> taybetmendiyêhref nehewînin.

Girêdana seretayî Pêvek

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>

Hişyariya fonksiyona girêdanê

Ji bo vegirtina rewşên ku hûn neçar in ku hreftaybetmendiyê li ser girêdanek neçalak bihêlin, .disabledçîn pointer-events: nonehewl dide ku fonksiyona girêdanê ya <a>s neçalak bike. Têbînî ku ev taybetmendiya CSS hîn ji bo HTML-ê ne standardkirî ye, lê hemî gerokên nûjen wê piştgirî dikin. Wekî din, tewra di gerokên ku piştgirî dikin pointer-events: nonede, navîgasyona klavyeyê bêbandor dimîne, tê vê wateyê ku bikarhênerên klavyeyê yên dîtbar û bikarhênerên teknolojiyên arîkar dê hîn jî karibin van girêdanan çalak bikin. Ji ber vê yekê ji bo ku ewle bin, ji bilî aria-disabled="true", li tabindex="-1"ser van lînkan taybetmendiyek jî vedihewînin da ku pêşî li wergirtina bala klavyeyê bigirin, û JavaScript-a xwerû bikar bînin da ku fonksiyona wan bi tevahî neçalak bikin.

Girêdana seretayî Pêvek

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>

Bişkokên asteng bikin

Bi tevliheviya pêşandana me û karûbarên valahiyê stûnên bersivdar ên tev-fireh, "bişkokên astengkirinê" yên mîna yên li Bootstrap 4-ê biafirînin. Bi karanîna karûbaran li şûna dersên taybetî yên bişkojkê, me li ser veqetandin, rêzkirin, û tevgerên bersivdar kontrolek pir mezintir heye.

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>

Li vir em guhertoyek bersivdar diafirînin, ku bi bişkokên vertîkal ên lihevkirî dest pê dikin heya xala mdveqetandinê, li ku derê polê diguhezîne, bi vî rengî kargêriyê betal .d-md-blockdike . Mezinahiya geroka xwe biguhezînin da ku hûn wan biguhezînin..d-gridgap-2

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>

Hûn dikarin firehiya bişkokên bloka xwe bi çînên firehiya stûna torê eyar bikin. Mînakî, ji bo "bişkoka blokê" ya nîv-fireh, bikar bînin .col-6. Di heman demê de wê bi horizontî re jî navendî .mx-autobikin.

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>

Karûbarên pêvek dikarin bêne bikar anîn da ku lihevhatina bişkokan dema ku horîzontal eyar bikin. Li vir me mînaka xweya bersûc a berê girt û hin karûbarên nerm û karûbarek marjînal li ser bişkokê lê zêde kir da ku bişkokan gava ku ew êdî li hev nebin rast hev bikin.

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>

Pêveka bişkokê

Pêveka bişkojkê destûrê dide te ku hûn bişkokên guheztinê yên sade/çalak bikin.

Bi dîtbarî, van bişkokên guheztinê bi bişkokên guheztina qutiya kontrolê re yek in . Lêbelê, ew ji hêla teknolojiyên arîkar ve cûda têne ragihandin: guheztinên qutiya kontrolê dê ji hêla xwendevanên ekranê ve wekî "kontrolkirî" / "ne kontrolkirî" were ragihandin (ji ber ku, tevî xuyabûna wan, ew di bingeh de hîn jî qutiyên kontrolê ne), lê ev bişkokên veguheztinê dê wekî bêne ragihandin. "button"/"button pêxist". Hilbijartina di navbera van her du nêzîkatiyan de dê bi celebê guheztina ku hûn diafirînin ve girêdayî be, û gelo gava ku wekî qutiyek kontrolê an wekî bişkokek rastîn were ragihandin dê guheztin ji bikarhêneran re watedar be an na.

Dewletên veguherîn

Ji data-bs-toggle="button"bo guheztina rewşa bişkokekê lê zêde bike active. Ger hûn bişkokek pêş-guhartin, divê hûn bi desta .activepolê lê zêde bikin û aria-pressed="true" pê ewle bibin ku ew bi rêkûpêk ji teknolojiyên arîkar re tê veguheztin.

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>

Girêdanê biguherîne Girêdana veguhertina çalak Girêdana veguhertina neçalak

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>

Methods

Hûn dikarin bi çêkera bişkojkê mînakek bişkokê biafirînin, mînakî:

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

Awa	Terîf
`dispose`	Bişkoka hêmanek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)
`getInstance`	Rêbaza statîkî ya ku dihêle hûn mînaka bişkojka ku bi hêmanek DOM-ê ve girêdayî ye bistînin, hûn dikarin wê bi vî rengî bikar bînin: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Rêbaza statîk a ku mînakek bişkojkek bi hêmanek DOM-ê ve girêdayî vedigerîne an heke ew nehatibe destpêkirin yek nû diafirîne. Hûn dikarin wê bi vî rengî bikar bînin `bootstrap.Button.getOrCreateInstance(element)`:.
`toggle`	Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.

Mînakî, ji bo guheztina hemî bişkokan

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

CSS

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, bişkok naha guhêrbarên CSS-ê yên herêmî li ser .btnji bo xweşkirina xwerû ya rast-a-dem-ê çêtir bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Her çînek guhêrbar guhêrbarên CSS-ê yên guncan nûve dike da ku bi , , û mîksên .btn-*me re qaîdeyên CSS yên din kêm bike .button-variant()button-outline-variant()button-size()

Li vir mînakek avakirina .btn-*çînek guhêrbarek xwerû ye mîna ku em ji bo bişkokên ku ji belgeyên xwe re yekta dikin bi vejandina guhêrbarên CSS yên Bootstrap bi tevliheviya guhêrbarên xwe yên CSS û Sass re.

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

Guherbarên Sass

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

Ji bo bişkokan sê mixîn hene: Miksên guhertoya bişkok û bişkokê (her du jî li ser bingehê $theme-colors), plus mîksek bişkokê.

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

Loops Sass

Guhertoyên bişkokê (ji bo bişkokên birêkûpêk û xêzkirî) tevliheviyên xwe yên têkildar bi $theme-colorsnexşeya me re bikar tînin da ku çînên guhêrbar di 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);
  }
}