Buttons
Yi amfani da salon maɓalli na al'ada na Bootstrap don ayyuka a cikin tsari, maganganu, da ƙari tare da goyan baya don girma dabam, jihohi, da ƙari.
Misalai
Bootstrap ya ƙunshi nau'ikan maɓalli da aka ƙirƙira, kowannensu yana hidimar maƙasudin nasa, tare da wasu ƙarin abubuwan da aka jefa don ƙarin sarrafawa.
<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>
Isar da ma'ana ga fasahar taimako
Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hidden
ajin.
Kashe rubutun rubutu
Idan ba ka son rubutun maɓallin ya naɗe, za ka iya ƙara .text-nowrap
ajin zuwa maɓallin. A cikin Sass, zaku iya saita $btn-white-space: nowrap
don musaki rubutun rubutu don kowane maɓalli.
Maballin tags
An .btn
tsara azuzuwan don a yi amfani da su tare da <button>
kashi. Koyaya, zaku iya amfani da waɗannan azuzuwan akan <a>
ko <input>
abubuwa (ko da yake wasu masu bincike na iya amfani da ma'anar ta ɗan bambanta).
Lokacin amfani da azuzuwan maɓalli akan <a>
abubuwan da ake amfani da su don haifar da ayyuka na cikin shafi (kamar abun ciki mai rugujewa), maimakon haɗawa zuwa sabbin shafuka ko sassan cikin shafin na yanzu, waɗannan hanyoyin haɗin yakamata a ba role="button"
su don isar da manufar su daidai ga fasahar taimako kamar su. masu karanta allo.
<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">
Maɓallin fayyace
Kuna buƙatar maɓalli, amma ba manyan launukan bangon da suke kawowa ba? Maye gurbin tsoffin azuzuwan gyare-gyare tare da .btn-outline-*
waɗanda don cire duk hotunan bango da launuka akan kowane maɓalli.
<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>
Girman girma
Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-lg
ko .btn-sm
don ƙarin girma.
<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>
Jihar naƙasassu
Sanya maɓallan su zama marasa aiki ta ƙara disabled
sifa ta boolean zuwa kowane <button>
abu. Maɓallan da aka kashe sun pointer-events: none
yi amfani da su, suna hana shawagi da jahohi masu aiki daga kunnawa.
<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>
Maɓallan da aka kashe ta amfani da <a>
kashi sun ɗan bambanta:
<a>
s ba sa goyan bayandisabled
sifa, don haka dole ne ka ƙara.disabled
ajin don ganin ya zama naƙasasshe.- Wasu salon abokantaka na gaba an haɗa su don kashe duk
pointer-events
akan maɓallan anga. - Maɓallin da aka kashe da aka yi amfani da
<a>
su ya kamata ya haɗa daaria-disabled="true"
sifa don nuna yanayin abubuwan fasaha masu taimako. - Maɓallan da aka kashe da ake amfani da
<a>
su bai kamata su haɗa dahref
sifa ba.
<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>
Haɗin aikin haɗin gwiwa
Don rufe shari'o'in da dole ne ka adana href
sifa akan hanyar haɗin da ba ta da naƙasa, .disabled
aji yana amfani pointer-events: none
da shi don ƙoƙarin kashe aikin haɗin <a>
s. Lura cewa har yanzu ba a daidaita wannan kadarorin CSS don HTML ba, amma duk masu bincike na zamani suna goyan bayansa. Bugu da kari, har ma a cikin masu binciken da ke goyan bayan pointer-events: none
, kewayawar madannai ya kasance ba shi da tasiri, ma'ana cewa masu amfani da madannai masu gani da masu amfani da fasahar taimako har yanzu za su iya kunna waɗannan hanyoyin haɗin. Don haka don zama lafiya, ban da aria-disabled="true"
, kuma sun haɗa da tabindex="-1"
sifa akan waɗannan hanyoyin haɗin don hana su karɓar mayar da hankali kan madannai, da amfani da JavaScript na al'ada don kashe ayyukansu gaba ɗaya.
<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>
Maɓallin toshewa
Ƙirƙirar maɓalli na cikakkun faɗin, "maɓallin toshe" kamar waɗanda ke cikin Bootstrap 4 tare da haɗakar nunin mu da abubuwan amfani da rata. Ta amfani da abubuwan amfani maimakon takamaiman azuzuwan maɓalli, muna da iko sosai akan tazara, daidaitawa, da ɗabi'un amsawa.
<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>
Anan mun ƙirƙiri bambance-bambancen amsawa, farawa da maɓallan da aka jera a tsaye har zuwa lokacin md
hutu, inda .d-md-block
ya maye gurbin .d-grid
ajin, ta haka yana lalata gap-2
mai amfani. Maimaita girman burauzar ku don ganin sun canza.
<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>
Kuna iya daidaita faɗin maɓallan toshewar ku tare da azuzuwan faɗin ginshiƙi. Misali, don “maɓallin toshe” rabin nisa, yi amfani da .col-6
. Cika shi a kwance tare da .mx-auto
, ma.
<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>
Ana iya amfani da ƙarin kayan aiki don daidaita jeri na maɓalli lokacin a kwance. Anan mun ɗauki misalinmu na baya mai amsawa kuma mun ƙara wasu kayan aiki masu sassauƙa da mai amfani da gefe akan maballin don daidaita maɓallan dama lokacin da ba a tara su ba.
<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>
Maballin plugin
Maɓallin maɓalli yana ba ku damar ƙirƙirar maɓallan kunnawa/kashe masu sauƙi.
Juyawa jihohi
Ƙara data-bs-toggle="button"
don kunna yanayin maɓalli active
. Idan kuna riga kuna kunna maɓalli, dole ne ku ƙara .active
ajin da hannu kuma aria-pressed="true"
don tabbatar da cewa an isar da shi yadda ya kamata zuwa fasahar taimako.
<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>
Hanyoyin
Kuna iya ƙirƙirar misalin maɓalli tare da maginin maɓalli, misali:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Hanya | Bayani |
---|---|
toggle |
Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi. |
dispose |
Yana lalata maɓalli na wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM) |
getInstance |
Hanyar da ba ta dace ba wacce ke ba ku damar samun misalin maɓallin maɓalli mai alaƙa da ɓangaren DOM, zaku iya amfani da shi kamar haka:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Hanya madaidaiciya wacce ke dawo da misalin maɓalli mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka:bootstrap.Button.getOrCreateInstance(element) |
Misali, don kunna duk maɓallan
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Masu canji
$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
Akwai mixins guda uku don maɓalli: maɓalli da maɓalli bambance-bambancen mahaɗin (duka bisa ga $theme-colors
), da maɓalli girman mahaɗin.
@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);
}
madaukai
Bambance-bambancen maɓalli (na na yau da kullun da maɓallan zayyanawa) suna amfani da mahaɗarsu tare da $theme-colors
taswirar mu don samar da azuzuwan masu gyara a cikin 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);
}
}