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

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

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

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

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

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

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

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ọ

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Akaụntụ arụmọrụ njikọ

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ọ

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

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.

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

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

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

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

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

Gbanwee njikọ Njikọ ntụgharị na-arụ ọrụ Agbanyụrụ njikọ ntụgharị

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

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

Usoro	Nkọwa
`toggle`	Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.
`dispose`	Na-emebi bọtịnụ mmewere. (Na-ewepụ data echekwara na mmewere DOM)
`getInstance`	Usoro static nke na-enye gị ohere ịnweta ihe atụ bọtịnụ jikọtara na ihe 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)`

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

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

Sass

Mgbanwe

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

Ngwakọta

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

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} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}