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.

<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

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

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.

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

<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 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 ti fanele ku katsa aria-disabled="true"xihlawulekisi ku kombisa xiyimo xa elemente eka thekinoloji yo pfuneta.

Xihlanganisi xa le henhla Hlanganisa

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

Xitsundzuxo xa ntirho wa link

Tlilasi .disabledyi tirhisa pointer-events: noneku ringeta ku tshikisa ntirho wa xihlanganisi wa <a>s, kambe nhundzu yoleyo ya CSS a yi si ringanisiwa. 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.

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

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

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.

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

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

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 buti lexi fambelanaka na elemente ya DOM kumbe ku 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-colorsmepe 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);
  }
}