in English

Nsɛmma nhoma no

Fa Bootstrap no custom button styles di dwuma ma nneyɛe wɔ forms, dialogs, ne nea ɛkeka ho a ɛboa ma akɛse, tebea, ne nea ɛkeka ho pii.

Wɔ kratafa yi so

Nhwɛso ahorow

Bootstrap no de button ahorow pii a wɔadi kan akyerɛkyerɛ mu ka ho, a emu biara di n’ankasa nkyerɛase atirimpɔw ho dwuma, a wɔde nneɛma kakraa bi a ɛka ho a wɔtow gu mu ma wotumi di so kɛse.

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

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.

Ma nsɛm a wɔde kyekyere nneɛma ho no nyɛ adwuma

Sɛ wompɛ sɛ button no nkyerɛwee no bɛbɔ a, wubetumi de .text-nowrapadesuakuw no aka button no ho. Wɔ Sass mu no, wobɛtumi ahyɛ $btn-white-space: nowrapsɛ wobɛma nsɛm a wɔde kyekyere bɔtn biara ayɛ adwuma.

Nsɛm a wɔde hyɛ bɔton mu

Wɔayɛ .btnadesua ahorow no sɛ wɔde bedi dwuma ne <button>element no. Nanso, wubetumi nso de saa adesua ahorow yi adi dwuma wɔ <a>anaa <input>nneɛma ahorow so (ɛwom sɛ browser ahorow bi betumi de nkyerɛase soronko kakra adi dwuma de).

Sɛ wode button classes redi dwuma wɔ <a>elements a wɔde kanyan in-page functionality (te sɛ collapsing content), sen sɛ wobɛfa link akɔ nkratafa foforo anaa afã horow a ɛwɔ krataafa a ɛwɔ hɔ mprempren no mu a, ɛsɛ sɛ wɔma saa links yi a sɛnea role="button"ɛbɛyɛ a ɛbɛda wɔn atirimpɔw adi yiye akɔ mfiridwuma a ɛboa te sɛ screen akenkanfo a wɔkenkan ade.

Link

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

Nkyerɛkyerɛmu button ahorow

Wohia button, nanso ɛnyɛ hefty akyi kɔla ahorow a wɔde ba no? Fa nea .btn-outline-*ɛbɛyi akyi mfonini ne kɔla nyinaa a ɛwɔ bɔtn biara so no sesa default modifier classes no.

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

Button ahorow no bi de anim kɔla a ɛyɛ hare kakra na edi dwuma, na ɛsɛ sɛ wɔde di dwuma wɔ akyi a ɛyɛ sum nkutoo so sɛnea ɛbɛyɛ a wobenya nsonsonoe a ɛdɔɔso.

Nneɛma akɛse

Fancy akɛse anaa nketewa buttons? Fa ka ho .btn-lganaasɛ wopɛ .btn-smsɛ wonya akɛse afoforo.

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

Tebea a wɔadi dɛm

Ma buttons no nyɛ sɛ nea ɛnyɛ adwuma denam disabledboolean attribute no a wode bɛka <button>element biara ho no so. Disabled buttons ayɛ pointer-events: noneadwuma wɔ, asiw hover ne active states kwan sɛ ɛbɛkanyan.

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

Disabled buttons a wɔde <a>element no di dwuma no yɛ wɔn ade soronko kakra:

<a>s ntumi mmoa disabledattribute no, enti ɛsɛ sɛ wode .disabledadesua no ka ho na ama ayɛ te sɛ nea ɛyɛ adwuma wɔ aniwa so.
Wɔde daakye-adamfofa kwan ahorow bi ka ho na ama ne nyinaa ayɛ adwuma pointer-eventswɔ anchor buttons so.
Ɛsɛ sɛ buttons a wɔadi dɛm no de aria-disabled="true"attribute no ka ho de kyerɛ element no tebea ma mmoa mfiridwuma ahorow.

Nkitahodi titiriw Link

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

Link dwumadie ho kɔkɔbɔ

.disabledKlas no de di dwuma de pointer-events: nonebɔ mmɔden sɛ ɛbɛma link dwumadie a ɛwɔ <a>s no ayɛ adwuma, nanso saa CSS agyapadeɛ no nnya nyɛɛ standardized. Afei nso, wɔ browser ahorow a ɛboa pointer-events: none, mpo mu no, keyboard akwantu no da so ara nnya nkɛntɛnso biara, a ɛkyerɛ sɛ wɔn a wɔde keyboard di dwuma a wohu ade ne wɔn a wɔde mfiri a ɛboa di dwuma no bɛda so ara atumi de saa link ahorow yi ayɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, de aka ho no aria-disabled="true", fa tabindex="-1"su bi nso ka saa link ahorow yi ho na amma wɔrennya keyboard focus, na fa JavaScript a wɔahyɛ da ayɛ no di dwuma de siw wɔn dwumadi ano koraa.

Siw bɔtɔn ahorow ano

Yɛ mmuaeɛ stacks a ɛyɛ full-width, “block buttons” te sɛ deɛ ɛwɔ Bootstrap 4 mu a yɛde yɛn display ne gap utilities afrafra. Ɛdenam utilities a yɛde bedi dwuma sen sɛ yɛde button pɔtee bi bedi dwuma so no, yɛwɔ tumi kɛse kɛse wɔ ntam kwan, nhyiam, ne nneyɛe a ɛma mmuae so.

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

Ɛha na yɛyɛ mmuaeɛ nsakraeɛ, ɛfiri aseɛ de buttons a wɔaboaboa ano vertically kɔsi mdbreakpoint, baabi a ɛbɛsi class .d-md-blockno ananmu , ɛnam saa kwan yi so ayɛ nullifying utility no. Sesa wo browser no kɛse na wubehu sɛ wɔasesa..d-gridgap-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>

Wubetumi de grid column width classes asiesie wo block buttons no trɛw. Sɛ nhwɛso no, sɛ wopɛ “block button” a ne trɛw fã bi a, fa .col-6. Center no horizontally ne .mx-auto, nso.

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

Wobetumi de utilities afoforo adi dwuma de asiesie sɛnea button ahorow no hyia bere a ɛwɔ soro no. Ɛha na yɛafa yɛn kan mmuaeɛ nhwɛsoɔ na yɛde flex utilities binom ne margin utility bi aka ho wɔ button no so de ahyɛ buttons no nifa so bere a wɔmfa stacked bio no.

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

Bɔtɔn a wɔde hyɛ mu

Button plugin no ma wo kwan ma wobɔ on/off toggle buttons a ɛnyɛ den.

Sɛ wohwɛ a, saa toggle buttons yi ne checkbox toggle buttons no yɛ pɛ . Nanso, ɛsono sɛnea mfiridwuma a ɛboa no de ma: screen akenkanfo bɛbɔ checkbox toggles no ho dawuru sɛ “wɔahyɛ no agyirae”/“wɔanhyɛ no agyirae” (esiane sɛ, ɛmfa ho sɛnea ɛte no, ne titiriw no, ɛda so ara yɛ checkbox ahorow), bere a wɔbɛbɔ saa toggle button ahorow yi ho amanneɛ sɛ “bɔtɔn”/“bɔtɔn a wɔabɔ so”. Nneɛma abien yi mu a wobɛpaw no begyina toggle ko a woreyɛ no so, ne sɛ ebia toggle no bɛyɛ nea ntease wom ama wɔn a wɔde di dwuma bere a wɔde to gua sɛ checkbox anaasɛ sɛ button ankasa anaasɛ ɛnte saa.

Toggle aman ahorow

Fa ka data-bs-toggle="button"ho na woadannan button bi activetebea. Sɛ woreyɛ pre-toggling button bi a, ɛsɛ sɛ wode nsa de .activeadesuakuw no ka ho na aria-pressed="true" wohwɛ hu sɛ wɔde bɛma sɛnea ɛfata ama mfiridwuma ahorow a ɛboa.

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

Toggle link no kɔ baabiara Toggle link a ɛyɛ adwuma Wɔagyae toggle link no

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

Akwan a wɔfa so yɛ

Wubetumi de button constructor no ayɛ button instance, sɛ nhwɛso no:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Ɔkwan	Nkyerɛmu
`toggle`	Toggles push tebea no. Ɛma button no te sɛ nea wɔayɛ no adwuma.
`dispose`	Ɔsɛe element bi bɔtn. (Eyi data a wɔde asie wɔ DOM element no so)
`getInstance`	Static kwan a ɛma wo kwan ma wonya button instance a ɛbata DOM element bi ho, wubetumi de adi dwuma sɛnea eyi te:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Static kwan a ɛsan de button instance a ɛbata DOM element bi ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea ɛte yi:`bootstrap.Button.getOrCreateInstance(element)`

Sɛ nhwɛso no, sɛ wobɛdannan button ahorow no nyinaa

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

Sass

Nneɛma a Ɛsakra

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

Nneɛma a wɔde frafra

Mixins abiɛsa na ɛwɔ hɔ ma buttons: button ne button outline variant mixins (abien no nyinaa gyina $theme-colors), ne button size mixin.

@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 a wɔde yɛ nneɛma

Button variants (ma daa ne outline buttons) de wɔn mu biara mixins ne yɛn $theme-colorsmap no di dwuma de yɛ modifier classes wɔ 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);
  }
}