in English

Ebikondo ebiyitibwa Buttons

Kozesa emisono gya button egya bulijjo egya Bootstrap ku bikolwa mu ffoomu, enjogera, n'ebirala ng'owagira sayizi eziwera, embeera, n'ebirala.

Ku muko guno

Eby’okulabirako

Bootstrap erimu emisono gya button egiwerako egyategekebwa edda, nga buli emu ekola ekigendererwa kyayo eky’amakulu, nga waliwo ebirala ebitonotono ebisuuliddwamu okusobola okufuga ennyo.

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

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.

Lemesa okuzinga ebiwandiiko

Bw’oba toyagala biwandiiko bya bbaatuuni kuzinga, osobola okwongera .text-nowrapkiraasi ku bbaatuuni. Mu Sass, osobola okuteekawo $btn-white-space: nowrapokulemesa okuzinga ebiwandiiko ku buli bbaatuuni.

Ebiwandiiko ebiraga obutambi

Ebika .btnbikoleddwa okukozesebwa ne <button>elementi. Naye, osobola n’okukozesa kiraasi zino ku <a>oba <input>elementi (wadde nga browser ezimu ziyinza okukozesa rendering eyawukana katono).

Nga okozesa ebika bya button ku <a>elementi ezikozesebwa okutandikawo emirimu mu lupapula (nga okugwa ebirimu), okusinga okuyunga ku mpapula empya oba ebitundu munda mu lupapula oluliwo kati, enkolagana zino zirina okuweebwa a role="button"okutuusa obulungi ekigendererwa kyazo eri tekinologiya ayamba nga ebisoma ku ssirini.

Okuyunga

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

Ebiwandiiko ebiraga ensengeka

Mu kwetaaga button, naye si hefty background colors ze baleeta? Kikyuse kiraasi z'omukyusa ezisookerwako .btn-outline-*n'ezo eziggyawo ebifaananyi byonna eby'emabega ne langi ku bbaatuuni yonna.

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

Ezimu ku sitayiro za bbaatuuni zikozesa langi y’omu maaso eyaka ennyo, era zirina okukozesebwa ku mugongo omuddugavu gwokka okusobola okuba n’enjawulo emala.

Sayizi ezitali zimu

Fancy buttons ennene oba entono? Okwongerako .btn-lgoba .btn-smokufuna sayizi endala.

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

Embeera ebalema

Fuula buttons okulabika nga ezitakola nga ossaako disabledboolean attribute ku <button>element yonna. Buttons ezilema pointer-events: nonezikozesezza ku, okulemesa hover ne active states okutandika.

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

Butaamu ezilema nga zikozesa <a>elementi zeeyisa mu ngeri ya njawulo katono:

<a>s teziwagira disabledattribute, kale olina okwongerako .disabledclass okugifuula visually okulabika nga eremeddwa.
Emisono egimu egy’omukwano mu biseera eby’omu maaso giteekeddwamu okulemesa byonna pointer-eventsku buttons za anchor.
Butaamu ezilema zirina okubeeramu aria-disabled="true"ekintu okulaga embeera y'ekintu eri tekinologiya ayamba.

Enkolagana enkulu Okuyunga

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

Okulabula ku nkola y’okuyunga

Ekibiina .disabledekozesa pointer-events: noneokugezaako okulemesa enkola y'okuyunga eya <a>s, naye ekyo CSS eky'obugagga tekinnatuuka ku mutindo. Okugatta ku ekyo, ne mu browser ezikola obuwagizi pointer-events: none, okutambulira ku kibboodi kusigala nga tekukoseddwa, ekitegeeza nti abakozesa kiiboodi abalaba n’abakozesa tekinologiya ayamba bajja kuba bakyasobola okukola enkolagana zino. Kale okubeera obukuumi, nga kwotadde ne aria-disabled="true", era teekamu tabindex="-1"attribute ku links zino okuziremesa okufuna keyboard focus, era kozesa custom JavaScript okulemesa ddala emirimu gyazo.

Okuziyiza obutambi

Tonda stacks eziddamu eza full-width, “block buttons” nga ezo eziri mu Bootstrap 4 nga zitabuddwamu display yaffe ne gap utilities. Nga tukozesa ebikozesebwa mu kifo kya kiraasi ezikwata ku button, tulina obuyinza obusingako ku bbanga, okulaganya, n’enneeyisa eziddamu.

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

Wano tukola enkyukakyuka eddamu, nga tutandika ne buttons eziteekeddwa mu vertikal okutuuka ku mdbreakpoint, awali .d-md-blockekifo kya .d-gridclass, bwe kityo ne nullifying gap-2utility. Kyuusa sayizi ya browser yo olabe nga zikyuka.

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

Osobola okutereeza obugazi bwa buttons zo eza block ne grid column width classes. Okugeza, ku “block button” ey’ekitundu ky’obugazi, kozesa .col-6. Kisengeke wakati mu bbanga nga olina .mx-auto, era.

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

Ebikozesebwa ebirala bisobola okukozesebwa okutereeza ensengeka ya buttons nga horizontal. Wano tututte ekyokulabirako kyaffe eky’okuddamu eky’emabega ne twongerako ebimu ku bikozesebwa ebya flex n’ekintu ekiyitibwa margin utility ku button okukwataganya buttons ku ddyo nga tezikyali stacked.

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

Ekintu ekiyitibwa button plugin

Plugin ya button ekusobozesa okukola buttons ennyangu ezikyusa on/off.

Mu kulaba, obutambi buno obukyusakyusa bufaanagana ne butaamu obukyusakyusa mu kasanduuko akalaga . Naye, zituusibwa mu ngeri ey’enjawulo tekinologiya ayamba: enkyukakyuka z’akabokisi zijja kulangirirwa abasomi ku screen nga “eziteekeddwako akabonero”/“tezikebereddwa” (okuva, wadde nga zirabika, mu musingi zikyali bbokisi ezikebera), so nga obutambi buno obukyusakyusa bujja kulangirirwa nga “button”/“button enyigiddwa”. Okulonda wakati w’enkola zino ebbiri kijja kusinziira ku kika kya toggle ky’okola, era oba toggle ejja kukola amakulu eri abakozesa nga elangirirwa nga checkbox oba nga button yennyini oba nedda.

Toggle amawanga

Okwongerako data-bs-toggle="button"okukyusakyusa embeera ya button active. Bw’oba nga tonnaba kukyusa bbaatuuni, olina okwongerako .activekiraasi mu ngalo n’okukakasa aria-pressed="true" nti etuusibwa mu ngeri esaanidde eri tekinologiya ayamba.

<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 enkolagana Enkolagana y'okukyusakyusa ekola Enkolagana y'okukyusakyusa eremeseddwa

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

Enkola

Osobola okukola ekifaananyi kya button n'omuzimbi wa button, okugeza:

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

Engeri	Okunnyonnyola
`toggle`	Ekyusakyusa embeera y'okusika. Awa button endabika nti ebadde ekozeseddwa.
`dispose`	Esaanyaawo bbaatuuni ya elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)
`getInstance`	Enkola ya static ekusobozesa okufuna button instance ekwatagana ne DOM element, osobola okugikozesa nga eno:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Enkola ya static ezzaayo ekifaananyi kya button ekikwatagana ne elementi ya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo:`bootstrap.Button.getOrCreateInstance(element)`

Okugeza, okukyusakyusa obutambi bwonna

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

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Ebirungo ebitabuddwa

Waliwo mixins ssatu eza buttons: button ne button outline variant mixins (zombi nga zeesigamiziddwa ku $theme-colors), nga kwogasse mixin ya button size.

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

Ebikondo ebiyitibwa Loops

Enkyukakyuka za button (ku buttons eza bulijjo ne outline) zikozesa mixins zazo ne $theme-colorsmaapu yaffe okukola ebika by'ebikyusa mu 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);
  }
}