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.

html na ɛwɔ hɔ

<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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

<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 na ɛwɔ hɔ

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Wubetumi mpo de CSS variables abɔ w’ankasa custom sizing:

html na ɛwɔ hɔ

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

Tebea a wɔadi dɛm

Ma buttons no nyɛ sɛ nea ɛnyɛ adwuma denam disabledboolean attribute 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.

html na ɛwɔ hɔ

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

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 .disabledclass 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.
<a>Ɛsɛ sɛ button ahorow a wɔadi dɛm a wɔde di dwuma no de aria-disabled="true"su no ka ho de kyerɛ element no tebea ma mfiridwuma ahorow a ɛboa.
<a> Ɛnsɛ sɛ button ahorow a wɔabara a wɔde di dwuma no de hrefsu no ka ho.

Nkitahodi titiriw Link

html na ɛwɔ hɔ

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

Link dwumadie ho kɔkɔbɔ

Sɛ wobɛkata nsɛm a ɛsɛ sɛ wode hrefattribute no sie wɔ link a wɔagyae mu so a, .disabledadesua no de di dwuma pointer-events: nonede bɔ mmɔden sɛ ɛbɛma link dwumadie a ɛwɔ <a>s no ayɛ adwuma. Hyɛ no nsow sɛ saa CSS agyapade yi nnya nyɛɛ standardized mma HTML, nanso nnɛyi browser ahorow nyinaa boa. 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.

Nkitahodi titiriw Link

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

<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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

Akwan a wɔfa so yɛ

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

const bsButton = new bootstrap.Button('#myButton')

Ɔkwan	Nkyerɛmu
`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 wo nya 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 eyi te: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles push tebea no. Ɛma button no te sɛ nea wɔayɛ no adwuma.

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

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

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren bɔtɔn ahorow de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .btnma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

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

.btn-*Modifier class biara yɛ CSS variables a ɛfata no foforo de brɛ CSS mmara foforo ase denam yɛn button-variant(), button-outline-variant(), ne button-size()mixins so.

Nhwɛsoɔ a ɛfa sɛnea yɛkyekyere custom .btn-*modifier class te sɛ nea yɛyɛ ma buttons a ɛyɛ soronko ma yɛn docs no nie denam Bootstrap CSS variables a yɛde yɛn ankasa CSS ne Sass variables afrafra bɛsan de ama no so.

.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 nsakrae ahorow

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

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

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