Swikomba-nkarhi
Tirhisa switayele swa swikomba-nkarhi swa Bootstrap swa ntolovelo eka swiendlo eka tifomo, ti-dialog, na swin’wana hi nseketelo wa vukulu byo tala, swiyimo, na swin’wana.
Swikombiso
Bootstrap yi katsa switayele swo hlayanyana swa swikomba-nkarhi leswi hlamuseriweke ka ha ri emahlweni, xin’wana ni xin’wana xi tirhela xikongomelo xa xona xa semantiki, na swin’wana swi nga ri swingani leswi engetelekeke leswi hoxiweke endzeni leswaku ku ta va ni vulawuri lebyi engetelekeke.
<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>
Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta
Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .visually-hidden
tlilasi.
Tiyisisa ku phutsela matsalwa
Loko u nga lavi leswaku tsalwa ra buti ri phutsela, u nga engetela .text-nowrap
tlilasi eka buti. Eka Sass, u nga veka $btn-white-space: nowrap
ku tshikisa ku phutsela matsalwa eka buti yin’wana na yin’wana.
Tithegi ta swikomba-nkarhi
Titlilasi .btn
ti endleriwe ku tirhisiwa na <button>
elemente. Kambe, u nga ha tlhela u tirhisa titlilasi leti eka <a>
kumbe <input>
swiaki (hambi leswi swihlamusela-marito swin’wana swi nga ha tirhisaka ku hundzuluxela loku hambaneke katsongo).
Loko u tirhisa titlilasi ta swikomba-nkarhi eka <a>
swiaki leswi tirhisiwaka ku hlohlotela ntirho wa le ndzeni ka pheji (ku fana na ku pfotlosa swilo), ematshan’wini yo hlanganisa eka matluka lamantshwa kumbe swiyenge endzeni ka tluka ra sweswi, swihlanganisi leswi swi fanele ku nyikiwa a role="button"
ku hundzisela xikongomelo xa swona hi ndlela leyi faneleke eka thekinoloji yo pfuneta ku fana na swihlaya swa xikirini.
<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">
Swikomba-nkarhi swa outline
U lava button, kambe ku nga ri mihlovo yo tika ya le ndzhaku leyi va yi tisaka? Cinca titlilasi ta swicinci swa ntolovelo hi leti nga .btn-outline-*
ta susa swifaniso hinkwaswo swa le ndzhaku ni mihlovo eka buti yihi na yihi.
<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>
Tisayizi
Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Engetela .btn-lg
kumbe .btn-sm
ku kuma tisayizi leti engetelekeke.
<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>
Xiyimo xa vulema
Endla leswaku swikomba-nkarhi swi languteka swi nga tirhi hi ku engetela disabled
xihlawulekisi xa boolean eka <button>
elemente yihi na yihi. Tiboto leti nga tirhiki ti pointer-events: none
tirhile eka, ku sivela ku hover na swiyimo leswi tirhaka ku pfurha.
<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>
Tiboto leti nga tirhiki leti tirhisaka <a>
elemente ti tikhoma hi ndlela leyi hambaneke nyana:
<a>
s a va seketelidisabled
xihlawulekisi, kutani u fanele ku engetela.disabled
tlilasi ku endla leswaku hi ku vona yi vonaka yi nga tirhi.- Switayili swin’wana leswi nga ni xinghana eka nkarhi lowu taka swi katsiwile ku tshikisa hinkwaswo
pointer-events
eka swikomba-nkarhi swa anchor. - Tiboto leti nga tirhiki leti tirhisaka ti
<a>
fanele ku katsaaria-disabled="true"
xihlawulekisi ku kombisa xiyimo xa elemente eka thekinoloji yo pfuneta. - Tiboto leti nga tirhiki leti tirhisaka a ti
<a>
fanelanga ti katsahref
xihlawulekisi.
<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>
Xitsundzuxo xa ntirho wa link
Ku hlanganisa timhaka laha u faneleke ku hlayisa href
xihlawulekisi eka xihlanganisi lexi nga tirhiki, .disabled
tlilasi yi tirhisa pointer-events: none
ku ringeta ku tshikisa ntirho wa xihlanganisi wa <a>
s. Xiya leswaku nhundzu leyi ya CSS a yi si ringanisiwa eka HTML, kambe swihlamusela-marito hinkwaswo swa manguva lawa swi yi seketela. Ku engetela kwalaho, hambi ku ri eka swihlamusela-marito leswi endlaka nseketelo pointer-events: none
, ku famba-famba ka khibhodi a ku khumbekanga, leswi vulaka leswaku vatirhisi va khibhodi lava vonaka ni vatirhisi va thekinoloji leyi pfunaka va ha ta kota ku tirhisa swihlanganisi leswi. Kutani ku va u hlayisekile, ku engetela eka aria-disabled="true"
, tlhela u katsa tabindex="-1"
xihlawulekisi eka swihlanganisi leswi ku swi sivela ku amukela ku kongomisa ka khibhodi, naswona tirhisa JavaScript ya ntolovelo ku tshikisa ntirho wa swona hi ku helela.
<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>
Swikomba-ndlela swa ku pfalela
Endla switachi leswi hlamulaka swa ku anama loku heleleke, “swikomba-ndlela swo sivela” ku fana ni leswi nga eka Bootstrap 4 hi ku hlangana ka switirhisiwa swa hina swa nkombiso ni swa xivandla. Hi ku tirhisa switirhisiwa ematshan’wini ya titlilasi to karhi ta buti, hi na vulawuri lebyikulu swinene eka ku hambana, ku ringanisa, na mahanyelo yo hlamula.
<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>
Laha hi endla ku cinca-cinca loku hlamulaka, hi sungula hi swikomba-nkarhi leswi hlanganisiweke hi ndlela yo olova ku fikela eka md
breakpoint, laha .d-md-block
ku sivaka .d-grid
tlilasi, xisweswo hi endla leswaku gap-2
vukorhokeri byi nga vi na nchumu. Cinca sayizi ya browser ya wena leswaku u vona swi cinca.
<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>
U nga lulamisa ku anama ka swikomba-nkarhi swa wena swa xibokisana hi titlilasi ta ku anama ka kholomo ya gridi. Hi xikombiso, eka “block button” ya hafu ya ku anama, tirhisa .col-6
. Yi exikarhi hi ndlela leyi nga etlhelo hi .mx-auto
, na yona.
<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>
Switirhisiwa leswi engetelekeke swi nga tirhisiwa ku lulamisa ku ringanana ka swikomba-nkarhi loko swi ri horizontal. Laha hi tekile xikombiso xa hina xa khale xo hlamula hi engetela switirhisiwa swin’wana swa flex na vukorhokeri bya margin eka buti ku ringanisa swikomba-nkarhi hi xinene loko swi nga ha hlanganisiwanga.
<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>
Xitirhisiwa xa buti
Plugin ya button yi ku pfumelela ku endla swikomba-ndlela swo olova swo pfula/tima.
Toggle swifundzha
Engetela data-bs-toggle="button"
ku cinca-cinca xiyimo xa buti active
. Loko u ri karhi u cinca-cinca buti, u fanele ku engetela .active
tlilasi hi voko na aria-pressed="true"
ku tiyisisa leswaku yi hundziseriwa hi ndlela leyi faneleke eka thekinoloji yo pfuneta.
<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>
Maendlelo
U nga endla xikombiso xa buti hi muaki wa buti, xikombiso:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Ndlela | Nhlamuselo |
---|---|
toggle |
Ku cinca-cinca xiyimo xa push. Yi nyika button xivumbeko xa leswaku yi tirhisiwile. |
dispose |
Ku herisa buti wa elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM) |
getInstance |
Static method leyi ku pfumelelaka ku kuma xikombiso xa button lexi fambelanaka na element ya DOM, u nga xi tirhisa hi ndlela leyi:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Ndlela ya static leyi vuyisaka xikombiso xa button lexi fambelanaka na elemente ya DOM kutani yi tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi:bootstrap.Button.getOrCreateInstance(element) |
Hi xikombiso, ku cinca-cinca swikomba-nkarhi hinkwaswo
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Swilo leswi cinca-cincaka
$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%;
Ti- mixins
Kuna ti mixins tinharhu ta ti buttons: ti button na ti button outline variant mixins (hinkwaswo swi sekeriwe eka $theme-colors
), xikan’we na 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);
}
Swirhendzevutana
Swihlawulekisi swa swikomba-nkarhi (eka swikomba-nkarhi swa ntolovelo na swa xivumbeko xa le handle) swi tirhisa ti-mixin ta swona hi ku hambana ka tona na $theme-colors
mepe wa hina ku humesa titlilasi ta swihundzuluxi eka 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);
}
}