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.
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-hidden
kiraasi.
Lemesa okuzinga ebiwandiiko
Bw’oba toyagala biwandiiko bya bbaatuuni kuzinga, osobola okwongera .text-nowrap
ekibiina ku bbaatuuni. Mu Sass, osobola okuteekawo $btn-white-space: nowrap
okulemesa okuzinga ebiwandiiko ku buli bbaatuuni.
Ebiwandiiko ebiraga obutambi
Ebika .btn
bikoleddwa 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.
<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>
Sayizi ezitali zimu
Fancy buttons ennene oba entono? Okwongerako .btn-lg
oba .btn-sm
okufuna 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 disabled
boolean attribute ku <button>
element yonna. Buttons ezilema pointer-events: none
zikozesezza 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 teziwagiradisabled
attribute, kale olina okwongerako.disabled
class okugifuula visually okulabika nga eremeddwa.- Emisono egimu egy’omukwano mu biseera eby’omu maaso giteekeddwamu okulemesa byonna
pointer-events
ku buttons za anchor. - Buttons ezilema nga zikozesa
<a>
zirina okubeeramuaria-disabled="true"
attribute okulaga embeera ya element eri tekinologiya ayamba. - Buttons ezilemeseddwa nga zikozesa
<a>
tezirina kubaamuhref
attribute.
<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>
Okulabula ku nkola y’okuyunga
Okubikka ku mbeera nga olina okukuuma href
ekintu ku link eremeddwa, .disabled
ekibiina ekozesa pointer-events: none
okugezaako 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.
<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>
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.
<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 md
breakpoint, awali .d-md-block
ekifo kya .d-grid
class, bwe kityo ne nullifying gap-2
utility. 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.
Toggle amawanga
Okwongerako data-bs-toggle="button"
okukyusakyusa embeera ya button active
. Bw’oba nga tonnaba kukyusa bbaatuuni, olina okwongerako .active
kiraasi 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>
<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:
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-colors
maapu 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);
}
}