Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
in English

Amaqhosha

Sebenzisa izimbo zeqhosha le-Bootstrap ukwenza iintshukumo kwiifom, iingxoxo, kunye nokunye ngenkxaso yeesayizi ezininzi, amazwe, kunye nokunye.

Imizekelo

I-Bootstrap ibandakanya izitayile zamaqhosha achazwe kwangaphambili, nganye isebenzela injongo yayo ye-semantic, kunye nokongezwa okumbalwa okuphoswe ukuze kulawuleke ngakumbi.

<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>
Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umz. umbhalo obonakalayo), okanye lubandakanyiwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Khubaza ukusonga umbhalo

Ukuba awufuni ukuba umbhalo weqhosha usongelwe, unokongeza .text-nowrapiklasi kwiqhosha. Kwi-Sass, unokuseta $btn-white-space: nowrapukuvala ukuvalwa kokubhaliweyo kwiqhosha ngalinye.

Iithegi zeqhosha

Iiklasi .btnziyilelwe ukuba zisetyenziswe kunye <button>nesiqalelo. Nangona kunjalo, ungasebenzisa ezi klasi kwi <a>okanye <input>izinto (nangona ezinye iibhrawuza zinokusebenzisa unikezelo olwahluke kancinane).

Xa usebenzisa iiklasi zamaqhosha <a>kwizinto ezisetyenziselwa ukuqalisa ukusebenza kwekhasi (njengomxholo odilikayo), endaweni yokudibanisa amaphepha amatsha okanye amacandelo angaphakathi kwephepha langoku, la makhonkco kufuneka anikwe role="button"ukuhambisa ngokufanelekileyo injongo yawo kubuchwephesha obuncedisayo njenge abafundi besikrini.

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

Amaqhosha enkcazo

Ngaba ufuna iqhosha, kodwa hayi imibala engasemva enzima abayizisayo? Buyisela iiklasi zesilungisi esingagqibekanga ngezo .btn-outline-*zokususa yonke imifanekiso yangasemva kunye nemibala kulo naliphi na iqhosha.

<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>
Ezinye izimbo zamaqhosha zisebenzisa umbala ongaphambili okhanyayo, kwaye kufuneka usetyenziswe kuphela kwimvelaphi emnyama ukuze kubekho umahluko owaneleyo.

Ubukhulu

Unqwenela amaqhosha amakhulu okanye amancinci? Yongeza .btn-lgokanye .btn-smiisayizi ezongezelelweyo.

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

Ilizwe labakhubazekileyo

Yenza amaqhosha abonakale engasebenzi ngokongeza disableduphawu lwe boolean kuyo nayiphi na <button>into. Amaqhosha avaliweyo pointer-events: noneasetyenzisiwe, ukunqanda i-hover kunye neemeko ezisebenzayo ekuqaliseni.

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

Amaqhosha angasebenziyo asebenzisa <a>isiqalelo aziphathe ngokwahlukileyo:

  • <a>s ayiluxhasi disableduphawu, ngoko ke kufuneka udibanise .disablediklasi ukuyenza ibonakale ingasebenzi.
  • Ezinye izimbo ezilungele ixesha elizayo zibandakanyiwe ukuvala zonke pointer-eventskumaqhosha eankile.
  • Amaqhosha avaliweyo kufuneka abandakanye aria-disabled="true"uphawu lokubonisa imeko yento kwiitekhnoloji ezincedisayo.
<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>

Iklasi .disabledisebenzisa pointer-events: noneukuzama ukukhubaza usebenziso lwekhonkco lwe- <a>s, kodwa loo propati ye-CSS ayikabikho emgangathweni. Ukongeza, nakwiziphequluli ezixhasayo pointer-events: none, ukukhangela kwekhibhodi kuhlala kungachaphazeleki, okuthetha ukuba abasebenzisi bekhibhodi ababoniweyo kunye nabasebenzisi bobuchwephesha bokuncedisa baya kuba nakho ukwenza la makhonkco asebenze. Ke ukukhuseleka, ukongeza aria-disabled="true", kukwabandakanya tabindex="-1"uphawu kula makhonkco ukuwathintela ekufumaneni ujoliso lwebhodi yezitshixo, kwaye usebenzise iJavaScript yesiko ukukhubaza ukusebenza kwazo ngokupheleleyo.

Amaqhosha ebhlokhi

Yenza imfumba ephendulayo yobubanzi obugcweleyo, "amaqhosha ebhloko" njengalawo aseBootstrap 4 ngomxube wokubonisa kwethu kunye nezixhobo ze-gap. Ngokusebenzisa izinto eziluncedo endaweni yeeklasi ezithile zamaqhosha, sinolawulo olukhulu ngakumbi kwisithuba, ulungelelwaniso, kunye nokuziphatha okuphendulayo.

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

Apha senza utshintsho oluphendulayo, siqala ngamaqhosha apakishwe ngokuthe nkqo kude kube kwindawo mdyoqhawulo, apho .d-md-blockithatha indawo .d-gridyodidi, ngokwenza njalo ungasebenzi gap-2. Phinda umlinganiselo wesikhangeli sakho ukuze uzibone zitshintsha.

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

Ungahlengahlengisa ububanzi bamaqhosha akho ebhloko ngeeklasi zobubanzi bekholamu yegridi. Ngokomzekelo, kwi-half-width "iqhosha lebhloko", sebenzisa .col-6. Yibeke kwindawo ethe tye nge .mx-auto, nayo.

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

Izixhobo ezongezelelweyo zingasetyenziselwa ukulungelelanisa ukulungelelaniswa kwamaqhosha xa tye. Apha sithathe umzekelo wethu wangaphambili ophendulayo kwaye songeza izinto eziguqukayo kunye nesixhobo somda kwiqhosha ukulungelelanisa amaqhosha ekunene xa engasapakishwanga.

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

Iqhosha leplagi

I-plugin yeqhosha ikuvumela ukuba wenze lula ukuvula/ukuvala amaqhosha okuguqula.

Ngokubonakalayo, la maqhosha okuguqula ayafana kwibhokisi yokukhangela amaqhosha okuguqula . Nangona kunjalo, zihanjiswa ngokwahlukileyo ngobuchwepheshe obuncedisayo: iibhokisi zokukhangela ziya kubhengezwa ngabafundi besikrini njenge "tshekiweyo"/"ayikhangelwanga" (ekubeni, ngaphandle kwenkangeleko yazo, iseziibhokisi zokukhangela), ngelixa la maqhosha okuguqula aya kubhengezwa njengawo. “iqhosha”/“iqhosha licinezelwe”. Ukukhetha phakathi kwezi ndlela zimbini kuya kuxhomekeka kuhlobo loguqulo olwenzayo, kwaye nokuba uguqulo luya kwenza ingqiqo kubasebenzisi xa bebhengezwa njengebhokisi yokukhangela okanye njengeqhosha lokwenyani.

Guqula amazwe

Yongeza data-bs-toggle="button"ukuguqula imeko yeqhosha active. Ukuba ucofa ngaphambili iqhosha, kufuneka wongeze .activeiklasi ngesandla kwaye aria-pressed="true" uqinisekise ukuba ihanjiswa ngokufanelekileyo kwiiteknoloji ezincedisayo.

<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Iindlela

Unokwenza umzekelo weqhosha kunye nomakhi weqhosha, umzekelo:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Indlela Inkcazo
toggle Itshintsha imeko yokutyhala. Inika iqhosha inkangeleko yokuba livuliwe.
dispose Itshabalalisa iqhosha lesiqalelo. (Isusa idatha egciniweyo kwisiqalelo seDOM)
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo weqhosha elihambelana nento yeDOM, ungayisebenzisa ngolu hlobo:bootstrap.Button.getInstance(element)
getOrCreateInstance Indlela engatshintshiyo ebuyisela umzekelo weqhosha eliyanyaniswa nento yeDOM okanye wenze entsha ukuba ayiqalwanga. Ungayisebenzisa ngolu hlobo:bootstrap.Button.getOrCreateInstance(element)

Umzekelo, ukuguqula onke amaqhosha

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Izinto eziguquguqukayo

$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%;

Imixube

Kukho imixube emithathu yamaqhosha: iqhosha kunye neqhosha lokuchaza okwahlukileyo imixube (zombini zisekwe kwi $theme-colors), kunye nobukhulu beqhosha lomxube.

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

Iiluphu

Ukwahluka kwamaqhosha (amaqhosha aqhelekileyo kunye nolwandlalo) asebenzisa imixube ehlukeneyo kunye $theme-colorsnemephu yethu ukuvelisa iiklasi zesilungisi kwi 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);
  }
}