Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Bọtịnụ

Jiri ụdị bọtịnụ omenala Bootstrap maka omume n'ụdị, mkparịta ụka na ndị ọzọ na nkwado maka ọtụtụ nha, steeti na ndị ọzọ.

Na ibe a

Ihe atụ

Bootstrap gụnyere ọtụtụ ụdị bọtịnụ eburu ụzọ kọwaa, nke ọ bụla na-eje ozi ebumnuche nke ya, yana mgbakwunye ole na ole tụbara maka njikwa ọzọ.

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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.

Gbanyụọ mkpuchi ederede

Ọ bụrụ na ịchọghị ka ederede bọtịnụ ahụ kechie, ị nwere ike itinye .text-nowrapklas ahụ na bọtịnụ ahụ. Na Sass, ị nwere ike ịtọ $btn-white-space: nowrapka gbanyụọ mpịachi ederede maka bọtịnụ ọ bụla.

Mkpado bọtịnụ

Emebere .btnklaasị ndị ahụ ka ejiri <button>mmewere mee ihe. Agbanyeghị, ị nwekwara ike iji klaasị ndị a na <a>ma ọ bụ <input>ihe (n'agbanyeghị na ụfọdụ ihe nchọgharị nwere ike itinye ntụgharị dịtụ iche).

Mgbe ị na-eji klaasị bọtịnụ na <a>ihe ndị a na-eji kpalite ọrụ n'ime ibe (dị ka ọdịnaya dara ada), kama ijikọ na ibe ọhụrụ ma ọ bụ ngalaba dị n'ime ibe dị ugbu a, ekwesịrị inye njikọ ndị a role="button"iji kwupụta ebumnuche ha nke ọma maka teknụzụ enyemaka dị ka. ndị na-agụ ihuenyo.

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

bọtịnụ ndetu

Ịchọrọ bọtịnụ, mana ọ bụghị agba ndabere dị egwu ha na-eweta? Dochie klaasị mgbanwe ndabara na nke .btn-outline-*iji wepu onyonyo na agba niile na bọtịnụ ọ bụla.

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>
Ụfọdụ n'ime ụdị bọtịnụ ahụ na-eji agba ihu ihu dị nfe, na ekwesịrị iji ya na okirikiri gbara ọchịchịrị ka e wee nwee ọdịiche zuru oke.

Nha

Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Tinye .btn-lgma ọ bụ .btn-smmaka nha ndị ọzọ.

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>

Ị nwere ike jiri mgbanwe CSS tụgharịa n'ụdị omenala gị:

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>

Ọnọdụ nkwarụ

Mee ka bọtịnụ yie ihe adịghị arụ ọrụ site na ịgbakwunye njirimara disabledboolean na ihe ọ <button>bụla. Bọtịnụ ndị nwere nkwarụ pointer-events: noneetinyerela, na-egbochi ntugharị na steeti ndị na-arụ ọrụ ka ọ ghara ịkpalite.

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>

Bọtịnụ ndị nwere nkwarụ na-eji <a>mmewere na-akpa àgwà dịtụ iche:

  • <a>s anaghị akwado disablednjirimara ahụ, yabụ ị ga-agbakwunyerịrị .disabledklas ahụ iji mee ka ọ dị ka ọ nweghị nkwarụ.
  • Agụnyere ụfọdụ ụdị enyi na enyi n'ọdịnihu iji gbanyụọ ihe niile pointer-eventsna bọtịnụ arịlịka.
  • Bọtịnụ ndị nwere nkwarụ na-eji <a>kwesịrị ịgụnye aria-disabled="true"njirimara iji gosi ọnọdụ nke mmewere na teknụzụ enyemaka.
  • Bọtịnụ ndị nwere nkwarụ na-eji <a> ekwesịghị ịgụnye hrefnjirimara.
Njikọ mbụ Njikọ
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>

Iji kpuchie ikpe ebe ị ga- hrefedobe njirimara na njikọ nwere nkwarụ, .disabledklaasị na-eji pointer-events: nonenwaa gbanyụọ ọrụ njikọ nke <a>s. Rịba ama na ahazibeghị akụrụngwa CSS a maka HTML, mana ihe nchọgharị ọgbara ọhụrụ niile na-akwado ya. Na mgbakwunye, ọbụlagodi na ihe nchọgharị na-akwado pointer-events: none, igodo igodo ahụ ka na-emetụtaghị ya, nke pụtara na ndị ọrụ ahụigodo ahụ na ndị ọrụ teknụzụ enyemaka ka ga-enwe ike ịgbalite njikọ ndị a. Ya mere, ka ọ bụrụ nchekwa, na mgbakwunye na aria-disabled="true", tinyekwara tabindex="-1"àgwà na njikọ ndị a iji gbochie ha ịnweta mgbado ahụigodo, ma jiri Javascript omenala iji gbanyụọ ọrụ ha kpamkpam.

Njikọ mbụ Njikọ
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>

Mgbochi bọtịnụ

Mepụta nchịkọta nzaghachi nke obosara zuru oke, "bọtịnụ ngọngọ" dị ka ndị ahụ dị na Bootstrap 4 yana ngwakọta nke ihe ngosi anyị na oghere oghere. Site n'iji ngwa kama iji klaasị bọtịnụ akọwapụtara, anyị nwere njikwa dị ukwuu karịa ohere, nhazi na omume anabatara.

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>

N'ebe a, anyị na-emepụta mgbanwe na-anabata, na-amalite site na bọtịnụ kwụkọtara na kwụ ọtọ ruo ebe mdnkwụsịtụ, ebe .d-md-blockdochie .d-gridklas ahụ, si otú ahụ mebie gap-2uru ahụ. Hagharịa nha ihe nchọgharị gị ka ịhụ ka ha na-agbanwe.

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>

Ị nwere ike ịhazigharị obosara nke bọtịnụ ngọngọ gị site na iji klaasị obosara kọlụm grid. Dịka ọmụmaatụ, maka “bọtịnụ ngọngọ” ọkara obosara, jiri .col-6. Tinye ya n'ahịrị n'ahịrị .mx-auto, kwa.

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>

Enwere ike iji ihe ndị ọzọ agbakwunyere iji dozie nhazi nke bọtịnụ mgbe ọ bụla kwụ n'ahịrị. N'ebe a, anyị ewerela ihe atụ nzaghachi anyị gara aga wee gbakwunye ụfọdụ ngwa mgbanwe yana ihe dị n'akụkụ na bọtịnụ iji kwado bọtịnụ ndị ahụ n'aka nri mgbe anaghị ekpokọta ha.

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>

Ngwa mgbakwunye bọtịnụ

Ngwa mgbakwunye bọtịnụ na-enye gị ohere ịmepụta bọtịnụ mgbanyụ ma ọ bụ gbanyụọ dị mfe.

N'anya, bọtịnụ ntụgharị ndị a yiri bọtịnụ ngbanwe igbe . Otú ọ dị, a na-ebuga ha n'ụzọ dị iche site na teknụzụ enyemaka: ndị na-agụ ihuenyo ga-ekwupụta ọkwa nlele igbe dị ka "enyocha"/"anaghị enyocha ya" (ebe ọ bụ na n'agbanyeghị ọdịdị ha, ha ka bụ igbe igbe), ebe a ga-akpọsa bọtịnụ ntụgharị ndị a dị ka. "bọtịnụ"/"pịa bọtịnụ". Nhọrọ n'etiti ụzọ abụọ a ga-adabere n'ụdị ntụgharị ị na-eke, yana ma ntụgharị ahụ ọ ga-abụ ihe ezi uche dị na ya nye ndị ọrụ mgbe ekwuputara dị ka igbe nlele ma ọ bụ dị ka bọtịnụ n'ezie.

Tụgharịa steeti

Tinye data-bs-toggle="button"ka ịgbanwee ọnọdụ bọtịnụ active. Ọ bụrụ na ị na-ebu ụzọ na-atụgharị bọtịnụ, ị ga-eji aka tinye .activeklaasị ma aria-pressed="true" hụ na ebufere ya nke ọma na teknụzụ enyemaka.

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>
Gbanwee njikọ Njikọ ntụgharị na-arụ ọrụ Agbanyụrụ njikọ ntụgharị
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>

Ụzọ

Ị nwere ike ịmepụta ihe atụ bọtịnụ na onye nrụpụta bọtịnụ, dịka ọmụmaatụ:

const bsButton = new bootstrap.Button('#myButton')
Usoro Nkọwa
dispose Na-emebi bọtịnụ mmewere. (Na-ewepụ data echekwara na mmewere DOM)
getInstance Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ bọtịnụ jikọtara na mmewere DOM, ịnwere ike iji ya dịka nke a: bootstrap.Button.getInstance(element).
getOrCreateInstance Usoro kwụ ọtọ nke na-eweghachi ihe atụ bọtịnụ jikọtara na mmewere DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidobeghị ya. Ị nwere ike iji ya dị ka nke a bootstrap.Button.getOrCreateInstance(element):.
toggle Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.

Dịka ọmụmaatụ, ka ịgbanwee bọtịnụ niile

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

CSS

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke mgbanwe mgbanwe CSS nke Bootstrap, bọtịnụ ugbu a na-eji mgbanwe CSS mpaghara .btnmaka imeziwanye ezigbo oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

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

Klas modifier ọ bụla .btn-*na-emelite mgbanwe CSS kwesịrị ekwesị iji wedata iwu CSS ndị ọzọ site na iji button-variant(), button-outline-variant(), na button-size()mixins.

Nke a bụ ihe atụ nke iwulite .btn-*klaasị modifier dị ka anyị na-eme maka bọtịnụ pụrụ iche na docs anyị site na-ekenye mgbanwe Bootstrap CSS yana ngwakọta nke mgbanwe CSS na Sass nke anyị.

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

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

Ngwakọta Sass

Enwere ngwakọta atọ maka bọtịnụ: bọtịnụ na bọtịnụ ndepụta variant mixins (ha abụọ dabere na $theme-colors), gbakwunyere mixin nha bọtịnụ.

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

Bọtịnụ dị iche iche (maka bọtịnụ oge niile na ndepụta) na-eji ngwakọta nke otu ha na $theme-colorsmaapụ anyị iji mepụta klaasị mgbanwe 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);
  }
}