Tsallake zuwa babban abun ciki Tsallake zuwa kewayawa na takardu
Check
in English

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.

A wannan shafi

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.

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

Kashe rubutun rubutu

Idan ba ka son rubutun maɓallin ya naɗe, za ka iya ƙara .text-nowrapajin zuwa maɓallin. A cikin Sass, zaku iya saita $btn-white-space: nowrapdon musaki rubutun rubutu don kowane maɓalli.

Maballin tags

An .btntsara 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.

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

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.

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>
Wasu nau'ikan maɓalli suna amfani da launi mai haske na gaba, kuma yakamata a yi amfani da su akan bangon duhu kawai don samun isasshen bambanci.

Girman girma

Kuna son manyan maɓalli ko ƙarami? Ƙara .btn-lgko .btn-smdon ƙarin girma.

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>

Hakanan kuna iya mirgine girman ku na al'ada tare da masu canjin CSS:

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>

Jihar naƙasassu

Sanya maɓallan su zama marasa aiki ta ƙara disabledsifa ta boolean zuwa kowane <button>abu. Maɓallan da aka kashe sun pointer-events: noneyi amfani da su, suna hana shawagi da jahohi masu aiki daga kunnawa.

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>

Maɓallan da aka kashe ta amfani da <a>kashi sun ɗan bambanta:

  • <a>s ba sa goyan bayan disabledsifa, don haka dole ne ka ƙara .disabledajin don ganin ya zama naƙasasshe.
  • Wasu salon abokantaka na gaba an haɗa su don kashe duk pointer-eventsakan maɓallan anga.
  • Maɓallin da aka kashe da aka yi amfani da <a>su ya kamata ya haɗa da aria-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 da hrefsifa ba.
Mahadar farko mahada
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>

Don rufe shari'o'in da dole ne ka adana hrefsifa akan hanyar haɗin da ba ta da naƙasa, .disabledaji yana amfani pointer-events: noneda 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.

Mahadar farko mahada
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>

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.

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>

Anan mun ƙirƙiri bambance-bambancen amsawa, farawa da maɓallan da aka jera a tsaye har zuwa lokacin mdhutu, inda .d-md-blockya maye gurbin .d-gridajin, ta haka yana lalata gap-2mai amfani. Maimaita girman burauzar ku don ganin sun canza.

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>

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.

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>

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.

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>

Maballin plugin

Maɓallin maɓalli yana ba ku damar ƙirƙirar maɓallan kunnawa/kashe masu sauƙi.

A gani, waɗannan maɓallan juyawa suna kama da maɓallan jujjuyawar akwati . Koyaya, ana isar da su daban ta hanyar fasahar taimako: masu karatun allo za su sanar da alamar akwatin a matsayin "lalacewa"/"ba a duba" (tunda, duk da bayyanar su, ainihin har yanzu akwatunan rajista ne), yayin da waɗannan maɓallin kunnawa za a sanar da su azaman. "button"/"latsa maɓallin". Zaɓin tsakanin waɗannan hanyoyin guda biyu zai dogara ne akan nau'in jujjuyawar da kuke ƙirƙira, kuma ko kunna ko a'a zai yi ma'ana ga masu amfani lokacin da aka sanar a matsayin akwati ko azaman ainihin maɓalli.

Juyawa jihohi

Ƙara data-bs-toggle="button"don kunna yanayin maɓalli active. Idan kuna riga kuna kunna maɓalli, dole ne ku ƙara .activeajin da hannu kuma aria-pressed="true" don tabbatar da cewa an isar da shi yadda ya kamata zuwa fasahar taimako.

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>
Juya hanyar haɗin gwiwa Hanyar hanyar juyawa mai aiki An kashe hanyar haɗin yanar gizo
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>

Hanyoyin

Kuna iya ƙirƙirar misalin maɓalli tare da maginin maɓalli, misali:

const bsButton = new bootstrap.Button('#myButton')
Hanya Bayani
dispose Yana lalata maɓalli na wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM)
getInstance Hanyar a tsaye wacce ke ba ku damar samun misalin maɓalli da ke da alaƙa da nau'in 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):.
toggle Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi.

Misali, don kunna duk maɓallan

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

CSS

Masu canji

An ƙara a cikin v5.2.0

A matsayin wani ɓangare na tsarin canza canjin CSS na Bootstrap, maɓallai yanzu suna amfani da masu canjin CSS na gida .btndon haɓaka gyare-gyare na ainihin lokaci. An saita dabi'u don masu canjin CSS ta hanyar Sass, don haka har yanzu ana tallafawa keɓancewar Sass, ma.

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

Kowane .btn-*aji mai gyara yana sabunta madaidaitan masu canji na CSS don rage ƙarin ka'idojin CSS tare da button-variant(), button-outline-variant(), da button-size()mixins.

Anan ga misali na gina .btn-*aji na gyare-gyare na al'ada kamar yadda muke yi don maɓalli na musamman ga takaddun mu ta hanyar sake sanya mabambantan Bootstrap na CSS tare da cakuda masu canjin CSS namu da Sass.

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

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

Bambance-bambancen maɓalli (na na yau da kullun da maɓallan zayyanawa) suna amfani da mahaɗarsu tare da $theme-colorstaswirar mu don samar da azuzuwan masu gyara a cikin 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);
  }
}