Bɔtin dɛn

Yuz Bootstrap in kɔstɔm bɔtin stayl dɛn fɔ akshɔn dɛn na fɔm dɛn, dayalɔg dɛn, ɛn mɔ wit sɔpɔt fɔ bɔku saiz dɛn, stet dɛn, ɛn ɔda tin dɛn.

Na dis pej

Ɛgzampul dɛn

Bootstrap inklud sɔm prɛdifayn bɔtin stayl dɛn, ɛni wan de sav in yon sɛmantik pɔpɔshɔn, wit sɔm ɛkstra dɛn we dɛn trowe insay fɔ mɔ kɔntrol.

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>

Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

Disable fɔ rap tɛks

If yu nɔ want di bɔtin tɛks fɔ rap, yu kin ad di .text-nowrapklas to di bɔtin. Insay Sass, yu kin sɛt $btn-white-space: nowrapfɔ disable tɛks wrap fɔ ɛni bɔtin.

Di tag dɛn we de na di bɔtin

Dɛn .btnmek di klas dɛn fɔ yuz wit di <button>ɛlimɛnt. Bɔt yu kin yuz dɛn klas dɛn ya bak pan <a>ɔ <input>ɛlimɛnt dɛn (pan ɔl we sɔm brɔuza dɛn kin yuz wan smɔl difrɛn rɛndreshɔn).

We yu de yuz bɔtin klas dɛn pan <a>ɛlimɛnt dɛn we dɛn kin yuz fɔ trig in-pej wok (lɛk kɔntinyu fɔ kɔlaps), pas fɔ link to nyu pej ɔ sɛkshɔn dɛn insay di pej we de naw, dɛn fɔ gi dɛn link dɛn ya a role="button"fɔ mek dɛn ebul fɔ gi dɛn rizin di rayt we to ɛtɛknɔlɔji dɛn we de ɛp dɛn lɛk skrin rida dɛn.

Link

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

Di bɔtin dɛn fɔ autlayn

Yu nid bɔtin, bɔt nɔto di hefty bakgrɔn kɔlɔ dɛn we dɛn kin briŋ? Riples di difɔlt modifya klas dɛn wit di .btn-outline-*wan dɛn fɔ pul ɔl di bakgrɔn pikchɔ ɛn kɔlɔ dɛn na ɛni bɔtin.

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>

Sɔm pan di bɔtin stayl dɛn de yuz fɔgrɔn kɔlɔ we nɔ rili layt, ɛn dɛn fɔ jɔs yuz am pan dak bakgrɔn fɔ mek dɛn gɛt bɔku kɔntrast.

Sayz dɛn

Fans big ɔ smɔl bɔtin dɛn? Ad .btn-lgɔ .btn-smfɔ ɔda saiz dɛn.

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>

Yu kin ivin rol yu yon kɔstɔm sayzin wit CSS vɛriɔbul dɛn:

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>

Disabled stet

Mek bɔtin dɛn luk inaktiv bay we yu ad di disabledbuli atribyut to ɛni <button>ɛlimɛnt. Disabled bɔtin dɛn dɔn pointer-events: noneaplay to, we de mek di hover ɛn aktiv stet dɛn nɔ trig.

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>

Di bɔtin dɛn we nɔ ebul fɔ yuz di <a>ɛlimɛnt kin biev difrɛn smɔl:

<a>s nɔ de sɔpɔt di disabledatribyut, so yu fɔ ad di .disabledklas fɔ mek i tan lɛk se i nɔ ebul fɔ si.
Sɔm stayl dɛn we go fayn fɔ tumara bambay de fɔ disable ɔl pointer-eventsdi ankɔ bɔtin dɛn.
Disabled bɔtin dɛn we de yuz <a>fɔ inklud di aria-disabled="true"atribyut fɔ sho di stet fɔ di ɛlimɛnt to ɛp teknɔlɔji dɛn.
Disabled bɔtin dɛn we de yuz <a> nɔ fɔ gɛt di hrefatribyut.

Praymari link fɔ di wan dɛn we de Link

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>

Link funkshɔnaliti caveat

Fɔ kɔba kes dɛn usay yu fɔ kip di hrefatribyut pan wan disabul link, di .disabledklas de yuz pointer-events: nonefɔ tray fɔ disable di link funkshɔnaliti fɔ <a>s. Notis se dis CSS prɔpati nɔ standad yet fɔ HTML, bɔt ɔl di mɔdan brawza dɛn de sɔpɔt am. Apat frɔm dat, ivin insay brawza dɛn we de sɔpɔt pointer-events: none, di kibɔd nevigishɔn nɔ de afɛkt, we min se di wan dɛn we de si di kibɔd ɛn di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp dɛn go stil ebul fɔ aktiv dɛn link dɛn ya. So fɔ mek yu sef, apat frɔm aria-disabled="true", put wan tabindex="-1"atribyut bak na dɛn link dɛn ya fɔ mek dɛn nɔ gɛt kibɔd fɔs, ɛn yuz kɔstɔm JavaSkript fɔ disable dɛn wok ɔltogɛda.

Praymari link fɔ di wan dɛn we de Link

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>

Blɔk di bɔtin dɛn

Krio rispɔnsiv stak dɛn we gɛt ful-wid, “blɔk bɔtin dɛn” lɛk di wan dɛn we de na Bootstrap 4 wit wan miks pan wi displei ɛn gap yutiliti dɛn. Bay we wi de yuz yutiliti dɛn instead ɔf bɔtin spɛshal klas dɛn, wi gɛt bɔku mɔ kɔntrol pan spɛshal, alaynɛshɔn, ɛn rispɔnsiv bihayvya.

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>

Na ya wi de mek wan rispɔnsiv vɛryushɔn, stat wit vertikal stak bɔtin dɛn te di mdbrekpɔynt, usay i de .d-md-blockriples di .d-gridklas, so dat de nulify di gap-2yutiliti. Risayz yu brɔwza fɔ si dɛn chenj.

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>

Yu kin ajɔst di wit fɔ yu blɔk bɔtin dɛn wit grid kɔlɔm wit klas dɛn. Fɔ ɛgzampul, fɔ wan af-af “blɔk bɔtin”, yuz .col-6. Senta am ɔrizɔntal wan wit .mx-auto, tu.

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>

Yu kin yuz ɔda yutiliti dɛn fɔ ajɔst di alaynɛshɔn fɔ di bɔtin dɛn we dɛn de ɔrizɔntal. Na ya wi dɔn tek wi fɔs rispɔnsiv ɛgzampul ɛn ad sɔm fleks yutiliti ɛn wan margin yutiliti na di bɔtin fɔ rayt alaynɛt di bɔtin dɛn we dɛn nɔ de stak igen.

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>

Bɔtin plɔgin

Di bɔtin plɔgin de mek yu ebul fɔ mek simpul on/ɔf tɔgl bɔtin dɛn.

We yu si di tɔgl bɔtin dɛn ya na di sem wit di chɛkbɔks tɔgl bɔtin dɛn . Bɔt dɛn kin gi dɛn difrɛn we bay ɛp tɛknɔlɔji dɛn: di chɛkbɔks tɔgl dɛn go anɔys di wan dɛn we de rid di skrin as “chɛk”/“nɔ chɛk” (bikɔs, pan ɔl we dɛn tan lɛk, dɛn na fundamɛnt wan stil chɛkbɔks), usay dɛn tɔgl bɔtin dɛn ya go anɔys as “bɔtin”/“bɔtin we dɛn prɛs”. Di we aw yu go pik bitwin dɛn tu we ya go dipen pan di kayn tɔgl we yu de mek, ɛn if di tɔgl go mek sɛns to di wan dɛn we de yuz am we dɛn anɔys am as chɛkbɔks ɔ as rial bɔtin.

Toggle stet dɛn

Add data-bs-toggle="button"to toggle wan bɔtin in activestet. If yu de pri-toggling wan bɔtin, yu fɔ ad di .activeklas wit yu an ɛn aria-pressed="true" fɔ mek shɔ se dɛn gi am di rayt we to ɛtɛknɔlɔji dɛn we de ɛp yu.

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>

Tɔgl di link Aktiv tɔgl link Di tɔgl link we nɔ de wok

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>

Di we aw dɛn de du am

Yu kin mek wan bɔtin instans wit di bɔtin kɔnstrɔkta, fɔ ɛgzampul:

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

We	Tɔk bɔt
`dispose`	I de pwɛl wan ɛlimɛnt in bɔtin. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
`getInstance`	Statik we de alaw yu fɔ gɛt di bɔtin instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Statik mɛtɔd we de ritɔn wan bɔtin instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we i nɔ bin initialize. Yu kin yuz am lɛk dis: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am.

Fɔ ɛgzampul, fɔ chenj ɔl di bɔtin dɛn

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

CSS we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, bɔtin dɛn naw de yuz lokal CSS vɛriɔbul dɛn on .btnfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

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

Ɛni .btn-*modifya klas de ɔpdet di aprɔpriet CSS vɛriɔbul dɛn fɔ minimiz ɔda CSS lɔ dɛn wit wi button-variant(), button-outline-variant(), ɛn button-size()miksin dɛn.

Na wan ɛgzampul fɔ bil wan kɔstɔm .btn-*modifya klas lɛk aw wi de du fɔ di bɔtin dɛn we yunik to wi dɔk dɛn bay we wi de riasayn Bootstrap in CSS vɛriɔbul dɛn wit wan miksɔp fɔ wi yon CSS ɛn Sass vɛriɔbul dɛn.

.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 di vayriɔbul dɛn

$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 miksin dɛn

Tri miksin dɛn de fɔ bɔtin dɛn: bɔtin ɛn bɔtin ɔtlayn vayriɔnt miksin dɛn (ɔl tu bays pan $theme-colors), plus wan bɔtin saiz miksin.

@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 dɛn

Bɔtin vayriɔnt dɛn (fɔ rɛgyula ɛn ɔtlayn bɔtin dɛn) de yuz dɛn rispektiv miksin dɛn wit wi $theme-colorsmap fɔ jenarayz di modifya klas dɛn na 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);
  }
}