Utubuto

Koresha Bootstrap yihariye ya buto yuburyo bwibikorwa muburyo, ibiganiro, nibindi byinshi hamwe nubufasha kubunini bwinshi, leta, nibindi byinshi.

Kuriyi page

Ingero

Bootstrap ikubiyemo buto yuburyo bwateganijwe mbere, buri kimwe gikora intego yacyo, hamwe ninyongera zijugunywe kubindi bigenzura.

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

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Hagarika gupfunyika inyandiko

Niba udashaka ko buto yinyandiko irangira, urashobora kongeramo urwego .text-nowrapkuri buto. Muri Sass, urashobora gushiraho $btn-white-space: nowrapkugirango uhagarike inyandiko ipfunyika kuri buri buto.

Utubuto

Amasomo .btnyagenewe gukoreshwa hamwe nibintu <button>. Ariko, urashobora kandi gukoresha aya masomo kuri <a>cyangwa <input>ibintu (nubwo mushakisha zimwe zishobora gukoresha uburyo butandukanye).

Mugihe ukoresheje ibyiciro bya buto kubintu <a>bikoreshwa mugukurura page mumikorere (nkibintu bisenyuka), aho guhuza page cyangwa ibice bishya kurupapuro rwubu, aya mahuza agomba guhabwa a role="button"kugirango yerekane neza intego zabo muburyo bwikoranabuhanga bufasha nka abasomyi ba ecran.

Ihuza

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

Urucacagu Utubuto

Ukeneye buto, ariko ntabwo amabara meza cyane bazana? Simbuza ibyiciro byahinduye ibyiciro hamwe .btn-outline-*nibyo kugirango ukureho amashusho yose yibara n'amabara kuri buto iyariyo yose.

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

Bimwe muburyo bwa buto yuburyo bukoresha ibara ryoroheje ryimbere, kandi rigomba gukoreshwa gusa inyuma yijimye kugirango ugire itandukaniro rihagije.

Ingano

Ibyiza binini cyangwa bito? Ongeraho .btn-lgcyangwa .btn-smkubunini bwinyongera.

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

Leta yamugaye

Kora buto isa nkidakora wongeyeho disabledikiranga boolean kubintu byose <button>. Utubuto twahagaritswe twasabye pointer-events: nonekuri, kubuza kugendana na leta zikora zitera.

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

Utubuto twahagaritswe ukoresheje <a>element yitwara bitandukanye:

<a>s ntushyigikire disabledikiranga, ugomba rero kongeramo urwego .disabledkugirango bigaragare ko byahagaritswe.
Bimwe mubihe bizaza-byinshuti zirimo guhagarika byose pointer-eventskuri buto ya ankor.
Utubuto twahagaritswe tugomba gushyiramo aria-disabled="true"ikiranga kugirango twerekane imiterere yibintu bifasha tekinoroji.

Ihuza ryibanze Ihuza

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

Ihuza imikorere caveat

Icyiciro .disabledgikoresha pointer-events: nonekugirango ugerageze guhagarika imikorere yimikorere ya <a>s, ariko uwo mutungo wa CSS nturagerwaho. Mubyongeyeho, no muri mushakisha zishyigikira pointer-events: none, kugendana na clavier bikomeza kutagira ingaruka, bivuze ko abakoresha clavier babonye hamwe nabakoresha tekinoroji ifasha bazakomeza gukora iyo miyoboro. Kugirango rero ugire umutekano, usibye aria-disabled="true", ushyiremo tabindex="-1"ikiranga kuriyi miyoboro kugirango ubabuze kwakira intumbero ya clavier, kandi ukoreshe JavaScript yihariye kugirango uhagarike imikorere yabo yose.

Hagarika buto

Kora uduce twiza twubugari bwuzuye, "guhagarika buto" nkibiri muri Bootstrap 4 hamwe no kuvanga ibyerekanwa byacu hamwe nibikorwa byingenzi. Mugukoresha ibikorwa aho gukoresha buto ibyiciro byihariye, dufite igenzura ryinshi kurwego, guhuza, hamwe nimyitwarire isubiza.

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

Hano turema itandukaniro ryitondewe, duhereye kumurongo uhagaritse utubuto kugeza aho mdutandukaniye, aho .d-md-blockusimbuye urwego .d-grid, bityo ugahindura gap-2akamaro. Hindura amashusho yawe kugirango ubone impinduka.

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

Urashobora guhindura ubugari bwa bouton yawe yo guhagarika hamwe na grid inkingi yubugari bwamasomo. Kurugero, kuri kimwe cya kabiri cy'ubugari “guhagarika buto”, koresha .col-6. Hagati mu buryo butambitse hamwe .mx-auto, na.

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

Ibikoresho byinyongera birashobora gukoreshwa muguhuza guhuza buto mugihe utambitse. Hano twafashe urugero rwambere rwitondewe hanyuma twongeramo ibintu bimwe na bimwe byingirakamaro hamwe na margin yingirakamaro kuri buto kugirango iburyo uhuze buto iyo itakibitswe.

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

Gucomeka

Akabuto plugin igufasha gukora byoroshye kuri / kuzimya buto.

Biboneka, utubuto twa buto turasa na cheque yisanduku yo guhinduranya buto . Nyamara, zitangwa muburyo butandukanye nubuhanga bufasha: kugenzura agasanduku ka gasanduku kazamenyeshwa nabasomyi ba ecran nka "bagenzuwe" / "ntibagenzuwe" (kuva, nubwo bagaragara, baracyari agasanduku k'isanduku), mugihe utubuto two guhinduranya tuzatangazwa nk “Akabuto” / “buto kanda”. Guhitamo hagati yubu buryo bubiri bizaterwa nubwoko bwo guhinduranya urimo gukora, kandi niba guhinduranya bizasobanuka kubakoresha mugihe byatangajwe nkigenzura cyangwa nka buto ifatika.

Toggle ivuga

Ongeraho data-bs-toggle="button"kugirango uhindure buto ya activeleta. Niba ubanziriza guhinduranya buto, ugomba kwandikisha intoki kandi.active ukareba ko yatanzwe muburyo bukenewe bwa tekinoroji. aria-pressed="true"

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

Guhuza Guhuza ibikorwa Guhagarika guhuza

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

Uburyo

Urashobora gukora buto urugero hamwe na buto yubaka, kurugero:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Uburyo	Ibisobanuro
`toggle`	Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.
`dispose`	Gusenya buto yibintu. (Kuraho amakuru yabitswe kubintu bya DOM)
`getInstance`	Uburyo buhamye butuma ubona buto yintangarugero ijyanye na DOM element, urashobora kuyikoresha gutya:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Uburyo buhagaze busubiza buto urugero ifitanye isano na DOM cyangwa gukora bundi bushya mugihe itatangijwe. Urashobora kuyikoresha gutya:`bootstrap.Button.getOrCreateInstance(element)`

Kurugero, Kuri Guhindura Utubuto Byose

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Ibihinduka

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

Imvange

Hano hari imvange eshatu kuri buto: buto na buto yerekana uruvangitirane ruvanze (byombi bishingiye $theme-colors), wongeyeho ubunini bwa buto.

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

Umuzingi

Impinduka za buto (kubisanzwe na buto ya buto) koresha imvange hamwe $theme-colorsnikarita yacu kugirango tubyare ibyiciro bihindura muri 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);
  }
}