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.

Eka tluka leri

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.

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>

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

Tiyisisa ku phutsela matsalwa

Loko u nga lavi leswaku tsalwa ra buti ri phutsela, u nga engetela .text-nowraptlilasi eka buti. Eka Sass, u nga veka $btn-white-space: nowrapku tshikisa ku phutsela matsalwa eka buti yin’wana na yin’wana.

Tithegi ta swikomba-nkarhi

Titlilasi .btnti 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.

Hlanganisa

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

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.

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>

Switayili swin’wana swa swikomba-nkarhi swi tirhisa muvala wa le mahlweni lowu nga vonakiki ngopfu, naswona swi fanele swi tirhisiwa ntsena eka ndzhaku ka ntima leswaku swi ta va ni ku hambana loku eneleke.

Tisayizi

Xana u fanisa swikomba-nkarhi leswikulu kumbe leswitsongo? Engetela .btn-lgkumbe .btn-smku kuma tisayizi leti engetelekeke.

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>

U nga ha tlhela u rhendzeleka na ku pima ka wena ka ntolovelo hi swilo leswi cinca-cincaka swa 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>

Xiyimo xa vulema

Endla leswaku swikomba-nkarhi swi languteka swi nga tirhi hi ku engetela disabledxihlawulekisi xa boolean eka <button>elemente yihi na yihi. Tiboto leti nga tirhiki ti pointer-events: nonetirhile eka, ku sivela ku hover na swiyimo leswi tirhaka ku pfurha.

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>

Tiboto leti nga tirhiki leti tirhisaka <a>elemente ti tikhoma hi ndlela leyi hambaneke nyana:

<a>s a va seketeli disabledxihlawulekisi, kutani u fanele ku engetela .disabledtlilasi 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-eventseka swikomba-nkarhi swa anchor.
Tiboto leti nga tirhiki leti tirhisaka ti <a>fanele ku katsa aria-disabled="true"xihlawulekisi ku kombisa xiyimo xa elemente eka thekinoloji yo pfuneta.
Tiboto leti nga tirhiki leti tirhisaka a ti <a> fanelanga ti katsa hrefxihlawulekisi.

Xihlanganisi xa le henhla Hlanganisa

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>

Xitsundzuxo xa ntirho wa link

Ku hlanganisa timhaka laha u faneleke ku hlayisa hrefxihlawulekisi eka xihlanganisi lexi nga tirhiki, .disabledtlilasi yi tirhisa pointer-events: noneku 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.

Xihlanganisi xa le henhla Hlanganisa

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>

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.

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>

Laha hi endla ku cinca-cinca loku hlamulaka, hi sungula hi swikomba-nkarhi leswi hlanganisiweke hi ndlela yo olova ku fikela eka mdbreakpoint, laha .d-md-blockku sivaka .d-gridtlilasi, xisweswo hi endla leswaku gap-2vukorhokeri byi nga vi na nchumu. Cinca sayizi ya browser ya wena leswaku u vona swi cinca.

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>

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.

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>

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.

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>

Xitirhisiwa xa buti

Plugin ya button yi ku pfumelela ku endla swikomba-ndlela swo olova swo pfula/tima.

Hi ku vona, swikomba-nkarhi leswi swo cinca-cinca swi fana ni swikomba-nkarhi leswi cinca-cincaka swa bokisi ro kambela . Kambe, ti hundziseriwa hi ndlela yo hambana hi thekinoloji yo pfuneta: ku cinca-cinca ka bokisi ro kambela ku ta tivisiwa hi vahlayi va xikirini tanihi “leswi kamberiweke”/“leswi nga kamberiwangiki” (tanihi leswi, ku nga khathariseki ku languteka ka swona, hi xisekelo ya ha ri mabokisi yo kambela), kasi swikomba-ndlela leswi swi ta tivisiwa tanihi “button”/“button yi tshikileriwile”. Ku hlawula exikarhi ka maendlelo lawa mambirhi ku ta ya hi muxaka wa ku cinca-cinca loku u ku endlaka, na loko ku cinca-cinca ku ta endla nhlamuselo eka vatirhisi loko ku tivisiwa tanihi bokisi ro kambela kumbe tanihi buti ya xiviri kumbe e-e.

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 .activetlilasi hi voko na aria-pressed="true" ku tiyisisa leswaku yi hundziseriwa hi ndlela leyi faneleke eka thekinoloji yo pfuneta.

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 xihlanganisi Xihlanganisi xa toggle lexi tirhaka Xihlanganisi xo cinca-cinca lexi nga tirhiki

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>

Maendlelo

U nga endla xikombiso xa buti hi muaki wa buti, xikombiso:

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

Ndlela	Nhlamuselo
`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)`.
`toggle`	Ku cinca-cinca xiyimo xa push. Yi nyika button xivumbeko xa leswaku yi tirhisiwile.

Hi xikombiso, ku cinca-cinca swikomba-nkarhi hinkwaswo

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

CSS

Swilo leswi cinca-cincaka

Ku engeteriwe eka v5.2.0

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, swikomba-nkarhi sweswi swi tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya eka .btnku antswisiwa ka ku cinca-cinca ka nkarhi wa xiviri. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

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

Tlilasi yin’wana na yin’wana .btn-*ya mucinci yi pfuxeta swilo leswi cinca-cincaka swa CSS leswi faneleke ku hunguta milawu yo engetela ya CSS hi button-variant(), button-outline-variant(), na button-size()mixins ya hina.

Hi lexi xikombiso xa ku aka .btn-*tlilasi ya mucinci wa ntolovelo ku fana na leswi hi swi endlaka eka swikomba-nkarhi leswi hlawulekeke eka tidokisi ta hina hi ku tlhela hi avela swilo leswi cinca-cincaka swa CSS swa Bootstrap hi ku hlangana ka swilo swa hina swa CSS na 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%)};
}

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

Ti mixins ta Sass

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)
) {
  --#{$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 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-colorsmepe wa hina ku humesa titlilasi ta swihundzuluxi eka 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);
  }
}