Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Butɔnw

Baara kɛ ni Bootstrap ka butɔni cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye, walasa ka walew kɛ sɛbɛnw kɔnɔ, kumasenw kɔnɔ, ani fɛn wɛrɛw la ni dɛmɛ ye hakɛ caman, cogoyaw ani fɛn wɛrɛw la.

Nin ɲɛ in kan

Misaliw

Bootstrap kɔnɔ, butɔni cogoya damadɔ minnu ɲɛfɔlen don ka kɔn, olu kelen-kelen bɛɛ bɛ baara kɛ n’u yɛrɛ ka kɔrɔko ye, ni farankan damadɔ ye minnu bɛ fili a kɔnɔ walasa ka kunnafoni caman sɔrɔ.

<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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Sɛbɛnniw sirili bali

N’i ​​t’a fɛ butɔni sɛbɛnni ka siri, i bɛ se ka .text-nowrapkalan fara butɔni kan. Sass kɔnɔ, i bɛ se $btn-white-space: nowrapka sɛbɛnniw sirili bali butɔni kelen-kelen bɛɛ kama.

Butɔnw ka taamasiyɛnw

Kalansow .btndabɔra ka baara kɛ ni <button>element ye. Nka, i bɛ Se fana ka baara Kɛ ni o kàlanw ye <a>walima <input>fɛn dɔw kan (hali n’a y’a Sɔrɔ navigatɔrɔ dɔw bɛ Se ka baarakɛcogo dɔ Kɛ min tɛ kelen ye dɔɔnin).

Ni baara bɛ kɛ ni butɔni kalasi ye <a>fɛnw kan minnu bɛ kɛ ka ɲɛ kɔnɔ baarakɛcogo daminɛ (i n’a fɔ kɔnɔkow bɛrɛbɛrɛ), sanni ka ɲɔgɔn cɛsiri ni ɲɛ kuraw walima yɔrɔ kuraw ye ɲɛ sisan kɔnɔ, o jɛgɛnsiraw ka kan ka di a role="button"ma walasa k’u kuntilenna lase cogo bɛnnen na dɛmɛ fɛɛrɛw ma i n’a fɔ ekran kalanbagaw.

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

Butɔnw labɛncogo

I mago bɛ butɔni na, nka u tɛ na ni kɔkanna kulɛri gɛlɛnw ye wa? Aw bɛ fɛn minnu bɛ fɛn caman sɛmɛntiya, olu bila u nɔ na ni .btn-outline-*minnu ye walasa ka kɔkanna jaw ni kulɛriw bɛɛ bɔ butɔni o butɔni kan.

<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>
Butɔn cogoya dɔw bɛ baara kɛ ni ɲɛfɛla kulɛri ye min ka nɔgɔn kosɛbɛ, wa u ka kan ka baara kɛ ni kɔkanna dibiman dɔrɔn de ye walasa ka danfara bɛrɛ sɔrɔ.

Bonyaw

Fancy butɔni belebelebaw walima fitininw? Aw bɛ a fara a kan .btn-lgwalima .btn-smwalasa ka hakɛ wɛrɛw fara a kan.

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

Jamana min ye bololabaara ye

Aw bɛ butɔni kɛ i n’a fɔ baarakɛbaliw ni disabledboolean fɛnsɛbɛnni farali ye fɛn o <button>fɛn kan. Butɔnw ye pointer-events: nonebaara kɛ ni, ka hover ni active states bali ka daminɛ.

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

Butɔn minnu bɛ baara kɛ ni <a>fɛn ye, olu bɛ baara kɛ ni fɛn ye min tɛ kelen ye dɔɔnin:

  • <a>s tɛ fɛn in dɛmɛ disabled, o la i ka kan ka .disabledkalasi fara a kan walasa a ka kɛ i n’a fɔ a tɛ se ka baara kɛ.
  • Siti dɔw bɛ yen minnu bɛ se ka kɛ siniɲɛsigi ye walasa ka bɛɛ bali pointer-eventsankɔri butɔni kan.
  • Butɔn minnu bɛ se ka baara kɛ, olu ka kan ka kɛ ni aria-disabled="true"fɛn ye min bɛ se ka fɛn in cogoya jira dɛmɛni fɛɛrɛw la.
Lien fɔlɔ Ka tugu 
<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>

Kalanso .disabledbɛ baara Kɛ pointer-events: nonek’a ɲini ka s ka jὲɲɔgɔnya baarakɛcogo bali <a>, nka o CSS nafolo ma Kɛ fɔlɔ. Ka fara o kan, hali navigatɛriw kɔnɔ minnu bɛ dɛmɛ don pointer-events: none, klaviyeti taamacogo tɛ tiɲɛ, o kɔrɔ ye ko klaviyeti ɲɛnatɔw ni dɛmɛ fɛɛrɛw baarakɛlaw bɛna se ka o jɛgɛnsira ninnu baara hali bi. O la walasa ka lakana, ka fara aria-disabled="true", fana ka fɛn dɔ tabindex="-1"Dòn o jɛgɛnsiraw kan walasa k’u bali ka klaviyeti sinsinnan Sɔrɔ, ani ka JavaScript ladamulen Kɛ k’u ka baarakɛcogo Dabila pewu.

Butɔnw bloki

Aw bɛ jaabiw dilan ni u bonya dafalen ye, “block buttons” i n’a fɔ Bootstrap 4 kɔnɔ taw ni an ka jiralan ni gap nafalanw ɲagaminen ye. Ni an bɛ baara kɛ ni nafamafɛnw ye butɔni kɛrɛnkɛrɛnnenw ka kalasiw nɔ na, ​​an bɛ se ka fanga sɔrɔ kosɛbɛ yɔrɔjan, ɲɔgɔndan ani jaabi kɛcogo kan.

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

Yan an bɛ jaabi-yɔrɔ-ko dɔ Dabɔ, k’a Daminɛ ni butɔni jɔlenw ye fo ka Se mdkariyɔrɔ ma, yɔrɔ min bɛ kalasi .d-md-blocknɔnabila , o cogo la ka nafalan in Kɛ fu ye. I ka navigatɛri bonya caman sɛmɛntiya walisa k’a ye k’u bɛ fɛn caman Changer..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>

Aw bɛ se ka aw ka bloki butɔni bonya ladilan ni grid column width classes ye. Misali la, “blɔki butɔni” tilancɛ bonya kama, baara kɛ ni .col-6. A cɛmancɛ la ni .mx-auto, fana ye.

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

Nafa wɛrɛw bɛ se ka kɛ ka butɔniw labɛncogo ladilan ni u bɛ jɛgɛn. Yan an y'an ka jaabi misali tɛmɛnen Tà k'a Fàra flex utilité dɔw kan ani margin utilité dɔ kan butɔni kan ka butɔniw Labɛn kinin fɛ n'u ma Sìgi ɲɔgɔn kan tugun.

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

Butɔnw ka plugin

Butɔn plugin bɛ a to i ka se ka on/off toggle button nɔgɔmanw dilan.

Yecogo la, o bεnkansεbεnw ni bεnkansεbεnw bε kelen ye . Nka, u bɛ Lase cogo wɛrɛ la dɛmɛ fɛɛrɛw fɛ : jatebɔ-yɔrɔ-yɔrɔ-yɔrɔ-ko-yɔrɔw bɛna Laseli ekran-kalanbagaw fɛ ko “sɛgɛsɛgɛli”/“sɛgɛsɛgɛli ma Kɛ” (k’a sababu Kɛ, hali n’u yecogo ye, u jɔyɔrɔba ye jatebɔ-yɔrɔ ye halibi), k’a sɔrɔ o jatebɔ-yɔrɔ-yɔrɔ-ko-butɔnw bɛna Laseli i n’a fɔ “butɔni”/“butɔni digilen”. Sugandili min bɛ kɛ nin fɛɛrɛ fila ninnu cɛ, o bɛna bɔ i bɛ ka toggle suguya min Dabɔ, ani ni toggle bɛna kɛ sababu ye walima n’a tɛna kɛ sababu ye ka baarakɛlaw la ni a laseli kɛra i n’a fɔ jatebɔyɔrɔ walima i n’a fɔ butɔni yɛrɛ.

Toggle jamanaw

A fara a kan data-bs-toggle="button"ka butɔni dɔ activecogoya wuli. N’i ​​bɛ butɔni dɔ wuli ka kɔn, i ka kan ka .activekalansen fara a kan i bolo fɛ ani aria-pressed="true" k’a lajɛ k’a lase cogo bɛnnen na dɛmɛni fɛɛrɛw ma.

<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 ka jɛgɛn Lien toggle min bɛ baara la Toggle link min bɛ baara la 
<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>

Fɛɛrɛw

Aw bɛ se ka butɔni misali dɔ dabɔ ni butɔni dilanbaga ye, misali la:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Kɛcogo Cogojirali
toggle Toggles push jamana. A bɛ butɔni di i n’a fɔ a bɛ baara la.
dispose A bɛ element dɔ ka butɔni tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Static method min b’a To i bɛ se ka butɔni instance Sɔrɔ min bɛ tali Kɛ DOM element dɔ la, i bɛ Se ka baara Kɛ n’a ye nin cogo in na:bootstrap.Button.getInstance(element)
getOrCreateInstance Fɛɛrɛ jɔlen min bɛ butɔni misali dɔ Lasegin min bɛ tali Kɛ DOM fɛn dɔ la walima ka kura Dabɔ n'a ma Daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la:bootstrap.Button.getOrCreateInstance(element)

Misali la, ka butɔni bɛɛ wuli

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

Sass ye

Yɛlɛma-yɛlɛmaw

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

Mixinw (Mixins).

Mixin saba bɛ butɔni kama: butɔni ani butɔni outline variant mixin (u fila bɛɛ sinsinnen bɛ $theme-colors), ka fara butɔni hakɛ mixin kan.

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

Loopuw

Butɔn suguya caman (butɔni basigilenw ni jatebɔlanw kama) bɛ baara Kɛ n’u ka mixins kelen-kelenw ye n’an ka $theme-colorskarti ye walasa ka fɛn caman sɛgɛsɛgɛli Kɛ 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);
  }
}