in English

Abɔtawo ƒe ƒuƒoƒo

Zã Bootstrap ƒe abɔta ƒe atsyã tɔxɛwo na nuwɔna le nuŋlɔɖiwo, dzeɖonyawo, kple bubuwo me kple kpekpeɖeŋu na lolome, nɔnɔme, kple bubuwo geɖe.

Le axa sia dzi

Kpɔɖeŋuwo

Bootstrap la lɔ abɔta ƒe atsyã geɖe siwo woɖo do ŋgɔ ɖe eme, wo dometɔ ɖesiaɖe wɔa eya ŋutɔ ƒe gɔmesese ƒe taɖodzinu, kple kpeɖeŋutɔ ʋee aɖewo siwo wotsɔ ƒu gbe ɖe eme hena dziɖuɖu geɖe wu.

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

Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.

Tsɔ nuŋɔŋlɔwo babla nawɔ dɔ

Ne mèdi be abɔta ƒe nuŋɔŋlɔa naxatsa o la, àte ŋu atsɔ .text-nowrapklass la akpe ɖe abɔta la ŋu. Le Sass me la, àteŋu aɖoe $btn-white-space: nowrapbe yeaxe mɔ ɖe nuŋɔŋlɔ ƒe babla nu na abɔti ɖesiaɖe.

Abɔta ƒe dzesiwo

Wotrɔ .btnasi le klassawo ŋu be woazã kple <button>element la. Gake àteŋu azã klass siawo ɖe <a>alo <input>elements hã dzi (togbɔ be web-browser aɖewo ate ŋu awɔ gɔmeɖeɖe si to vovo vie ŋudɔ hã).

Ne èle abɔta ƒe hatsotsowo zãm ɖe <a>nusiwo wozãna tsɔ dzea axaa me dɔwɔwɔ gɔme (abe nyatakakawo ƒe ƒuƒoƒo ene), tsɔ wu be woatsɔ kadodo aɖo axa yeyewo alo akpa siwo le axa si li fifia me la, ele be woana kadodo siawo a role="button"be woaɖe woƒe taɖodzinu afia mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu abe screen nuxlẽmɔ̃wo.

Kadodo

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

Gblɔ nyatakakadzraɖoƒea ƒe dzesiwo

Èhiã abɔta, gake menye megbe amadede kpekpe siwo wotsɔ vɛ oa? .btn-outline-*Tsɔ esiwo nàtsɔ aɖe megbenɔnɔmetatawo kple amadedewo katã ɖa le abɔta ɖesiaɖe dzi la ɖɔ li tɔtrɔ ƒe hatsotso siwo woɖo ɖi 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>

Abɔta ƒe atsyã aɖewo zãa ŋgɔgbe ƒe amadede si me kɔ vie, eye ele be woazãe le megbe viviti ko dzi be vovototo si sɔ nanɔ wo dome.

Agbɔsɔsɔmewo

Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Tsɔe kpe ɖe eŋu .btn-lgalo .btn-smna lolome bubuwo.

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

Nuwɔametɔ ƒe nɔnɔme

Na abɔtawo nadze abe ɖe womele dɔ wɔm o ene to disabledboolean nɔnɔme la tsɔtsɔ kpe ɖe <button>element ɖesiaɖe ŋu me. Nuwɔametɔ ƒe abɔtawo wɔ pointer-events: nonedɔ ɖe, xe mɔ na hover kple dɔwɔwɔ ƒe nɔnɔmewo be woagadze egɔme o.

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

Nuwɔametɔ ƒe abɔta siwo zãa <a>element la wɔa nu to vovo vie:

<a>s medoa alɔ disablednɔnɔmea o, eyata ele be nàtsɔ .disabledklass la akpe ɖe eŋu be wòadze abe nuwɔametɔ ene le nukpɔkpɔ me.
Wotsɔ atsyã aɖewo siwo asɔ na etsɔme la kpe ɖe eŋu be woawɔ nusiwo katã pointer-eventsle seke ƒe abɔtawo dzi la nuwɔametɔwoe.
Ele be nɔnɔmea nanɔ nuwɔametɔwo ƒe abɔtawo me aria-disabled="true"atsɔ afia nɔnɔme si me element la le na kpekpeɖeŋu mɔ̃ɖaŋunuwo.

Kadodo gbãtɔ Kadodo

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

Kadodo ƒe dɔwɔwɔ ƒe nuxlɔ̃ame

Klas .disabledla zãna pointer-events: nonetsɔ dzea agbagba be yeawɔ <a>s ƒe kadodo ƒe dɔwɔwɔ nuwɔametɔ, gake womeɖo CSS ƒe nɔnɔme ma ɖe ɖoɖo nu haɖe o. Tsɔ kpe ɖe eŋu la, le browser siwo doa alɔ gɔ̃ hã me la, womekpɔa pointer-events: noneŋusẽ ɖe keyboard dzi yiyi dzi o, si fia be keyboard zãla siwo kpɔa nu kple mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo ate ŋu awɔ kadodo siawo ŋudɔ kokoko. Eyata be nànɔ dedie la, tsɔ kpe ɖe aria-disabled="true", hã de tabindex="-1"nɔnɔme aɖe kadodo siawo me be woaxe mɔ na wo be woagaxɔ keyboard ƒe susu o, eye nàzã JavaScript si wowɔ ɖe ɖoɖo nu atsɔ awɔ woƒe dɔwɔwɔ ŋudɔ kura.

Xɔ mɔ ɖe abɔtawo nu

Wɔ ŋuɖoɖo ƒe ƒuƒoƒo siwo keke blibo, “block buttons” abe esiwo le Bootstrap 4 me kple míaƒe ɖeɖefia kple dometsotso dɔwɔnuwo ƒe tsakatsaka. To utilities zazã ɖe button specific classes teƒe la, míekpɔ ŋusẽ geɖe wu ɖe dometsotso, ɖoɖowɔwɔ, kple nuwɔna siwo ɖoa nya ŋu dzi.

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

Le afisia la míewɔa tɔtrɔ si ɖoa nya ŋu, míedzea egɔme kple abɔta siwo woɖo ɖe wo nɔewo dzi le tsitrenu vaseɖe esime mdwoagbã, afisi .d-md-blockwòxɔna ɖe .d-gridklass la teƒe, si wɔnɛ be dɔwɔnua nyea nu gap-2dzodzro. Trɔ wò browser ƒe lolome be nàkpɔ woatrɔ.

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

Àteŋu atrɔ asi le wò block buttons ƒe kekeme ŋu kple grid column width classes. Le kpɔɖeŋu me, ne èdi “block button” si keke afã la, zã .col-6. Tsɔe ɖo titina le tsia dzi kple .mx-auto, 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>

Woate ŋu azã dɔwɔnu bubuwo atsɔ atrɔ asi le abɔtawo ƒe ɖoɖo ŋu ne wole tsia dzi. Afisiae míetsɔ míaƒe ŋuɖoɖo ƒe kpɔɖeŋu si va yi eye míetsɔ flex utilities aɖewo kple margin utility kpe ɖe eŋu le button la dzi be wòaɖo abɔtaawo ɖe ɖoɖo nu le ɖusime ne womegaƒo ƒu o.

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

Abɔta ƒe kpeɖeŋutɔ

Button plugin la na be nàte ŋu awɔ on/off toggle button bɔbɔewo.

Le nukpɔkpɔ me la, asitɔtrɔ ƒe dzesi siawo sɔ kple dzesideɖaka ƒe tɔtrɔ ƒe dzesiwo . Gake mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu la ɖea wo fiana le mɔ vovovowo nu: screen readers aɖe gbeƒãe be “wode dzesii”/“womede dzesii o” (esi wònye be, togbɔ be wodzena hã la, le gɔmedzedzea me la, wogakpɔtɔ nye dzesideɖakawo), gake woaɖe gbeƒã toggle button siawo ya be “abɔta”/“abɔta si wozi”. Tiatia si nàwɔ le mɔnu eve siawo dome anɔ te ɖe tɔtrɔ ƒomevi si nèle wɔwɔm dzi, kple nenye be gɔmesese anɔ tɔtrɔa ŋu na ezãlawo ne woɖe gbeƒãe be enye dzesiɖaka alo abe abɔti ŋutɔŋutɔ ene alo mawɔe o.

Trɔ asi le dukɔwo ŋu

Tsɔ kpe ɖe eŋu data-bs-toggle="button"be nàtrɔ asi le abɔta aɖe ƒe activenɔnɔme ŋu. Ne èle abɔta aɖe trɔm do ŋgɔ la, ele be nàtsɔ asi atsɔ .activeklass la akpe ɖe eŋu eye aria-pressed="true" nàkpɔ egbɔ be wotsɔe yi na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu nyuie.

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

Trɔ asi le kadodoa ŋu Toggle ƒe kadodo si le dɔ wɔm Wotu toggle ƒe kadodoa nuwɔametɔe

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

Mɔnuwo

Àteŋu awɔ abɔta ƒe kpɔɖeŋu kple abɔta ƒe xɔtula, le kpɔɖeŋu me:

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

Nuwɔmɔnu	Nuɖᴐɖᴐ
`toggle`	Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene.
`dispose`	Tsrɔ̃a element aɖe ƒe abɔta. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
`getInstance`	Static mɔnu si ɖea mɔ na wò be nàxɔ button instance si do ƒome kple DOM element aɖe, àteŋu azãe ale:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Static mɔnu si trɔa button ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:`bootstrap.Button.getOrCreateInstance(element)`

Le kpɔɖeŋu me, be nàtrɔ asi le abɔtawo katã ŋu

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

Sass ƒe nyawo

Nusiwo trɔna

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

Nusiwo wotsɔ tsakae

Mixin etɔ̃ li na buttons: button kple button outline variant mixins (wo ame evea siaa nɔ te ɖe $theme-colors), kpakple button ƒe lolome 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)
) {
  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 ƒe ƒuƒoƒo

Button variants (na edziedzi kple outline buttons) zãa woƒe mixins kple míaƒe $theme-colorsmap tsɔ wɔa modifier classes le 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);
  }
}