Ebikondo ebiyitibwa Buttons

Kozesa emisono gya button egya bulijjo egya Bootstrap ku bikolwa mu foomu, enjogera, n'ebirala nga olina obuwagizi bwa 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.

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>

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

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

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.

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>

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.

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>

Osobola n'okuyiringisiza sizing yo eya custom n'enkyukakyuka za CSS:

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>

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.

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>

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.
Buttons ezilema nga zikozesa <a>zirina okubeeramu aria-disabled="true"attribute okulaga embeera ya element eri tekinologiya ayamba.
Buttons ezilemeseddwa nga zikozesa <a> tezirina kubaamu hrefattribute.

Enkolagana enkulu Okuyunga

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>

Okulabula ku nkola y’okuyunga

Okubikka ku mbeera nga olina okukuuma hrefekintu ku link eremeddwa, .disabledekibiina ekozesa pointer-events: noneokugezaako okulemesa enkola y'enkolagana eya <a>s. Weetegereze nti ekintu kino ekya CSS tekinnatuuka ku mutindo gwa HTML, naye browser zonna ez'omulembe zikiwagira. 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.

Enkolagana enkulu Okuyunga

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>

Okuziyiza obutambi

Tonda stacks eziddamu ez’obugazi obujjuvu, “block buttons” nga ezo eziri mu Bootstrap 4 n’okutabula kw’ebikozesebwa byaffe eby’okwolesebwa n’ebituli. Nga tukozesa ebikozesebwa mu kifo kya button specific classes, tulina obuyinza bungi nnyo ku spacing, alignment, n'enneeyisa eziddamu.

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>

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.

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>

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.

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>

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.

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>

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 abasoma ku ssirini nga “eziteekeddwako akabonero”/“tezikebereddwa” (okuva, wadde nga zirabika, mu bukulu zikyali bbokisi z’okukebera), 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.

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>

Toggle enkolagana Enkolagana y'okukyusakyusa ekola Enkolagana y'okukyusakyusa eremeseddwa

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>

Enkola

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

const bsButton = new bootstrap.Button('#myButton')

Engeri	Okunnyonnyola
`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)`.
`toggle`	Ekyusakyusa embeera y'okusika. Awa button endabika nti ebadde ekozeseddwa.

Okugeza, okukyusakyusa obutambi bwonna

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

CSS

Enkyukakyuka ezikyukakyuka

Yayongerwako mu v5.2.0

Nga ekitundu ku nkola ya Bootstrap egenda ekulaakulana enkyukakyuka za CSS, buttons kati zikozesa enkyukakyuka za CSS ez'omu kitundu ku .btnfor enhanced real-time customization. Emiwendo gy'enkyukakyuka za CSS giteekebwawo nga giyita mu Sass, kale okulongoosa Sass kukyawagirwa, nakyo.

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

Buli .btn-*kiraasi y’omukyusa etereeza enkyukakyuka za CSS ezisaanidde okukendeeza ku mateeka ga CSS ag’enjawulo ne button-variant(), button-outline-variant(), ne button-size()mixins zaffe.

Wano waliwo ekyokulabirako ky’okuzimba ekibiina ky’okukyusakyusa eky’ennono .btn-*nga bwe tukola ku buttons ez’enjawulo ku docs zaffe nga tuddamu okugabanya enkyukakyuka za CSS eza Bootstrap n’okutabula enkyukakyuka zaffe eza CSS ne Sass.

.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%)};
}

Enkyukakyuka za Sass

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

Sass 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)
) {
  --#{$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 loopu zaayo

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