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.
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.
<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-hidden
polê 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-nowrap
polê li bişkokê zêde bikin. Di Sass de, hûn dikarin ji $btn-white-space: nowrap
bo her bişkokê pêçana nivîsê neçalak bikin.
Etîketên bişkokê
Ders .btn
tê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ê.
<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.
<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>
Sizes
Bişkokên mezintir an piçûktir dixwazin? Zêde bikin .btn-lg
an .btn-sm
ji bo pîvanên din.
<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>
Dewlet seqet
Bi zêdekirina disabled
taybetmendiya boolean li her hêmanekê , bişkokan neçalak xuya bikin <button>
. Bişkokên neçalak li ser hatine pointer-events: none
sepandin, ku rê li ber xistina hover û dewletên çalak digire.
<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>
Bişkojkên neçalakkirî yên ku <a>
hêmanê bikar tînin hinekî cûda tevdigerin:
<a>
disabled
s taybetmendiyê piştgirî nakin , ji ber vê yekê divê hûn.disabled
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î
pointer-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.
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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 href
taybetmendiyê li ser girêdanek neçalak bihêlin, .disabled
çîn pointer-events: none
hewl 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: none
de, 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.
<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>
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.
<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 md
veqetandinê, li ku derê polê diguhezîne, bi vî rengî kargêriyê betal .d-md-block
dike . Mezinahiya geroka xwe biguhezînin da ku hûn wan biguhezînin..d-grid
gap-2
<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-auto
bikin.
<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.
<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.
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 .active
polê 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.
<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>
<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î:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Awa | Terîf |
---|---|
toggle |
Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye. |
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) |
Mînakî, ji bo guheztina hemî bişkokan
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Variables
$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%;
Mixins
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)
) {
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);
}
Loops
Guhertoyên bişkokê (ji bo bişkokên birêkûpêk û xêzkirî) tevliheviyên xwe yên têkildar bi $theme-colors
nexşeya me re bikar tînin da ku çînên guhêrbar di 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);
}
}