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.

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>

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 (nko gusenyuka ibirimo), aho guhuza page cyangwa ibice bishya kurupapuro rwubu, iyi link igomba guhabwa a role="button"kugirango yerekane neza intego yabo muburyo bwikoranabuhanga bufasha nka abasomyi ba ecran.

Ihuza

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

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.

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>

Bimwe muburyo bwa buto yuburyo bukoresha ibara ryoroheje ryibanze, kandi rigomba gukoreshwa gusa kumurongo wijimye kugirango ugire itandukaniro rihagije.

Ingano

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

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>

Urashobora no kuzunguza ubunini bwawe bwite hamwe na CSS ihinduka:

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>

Leta yamugaye

Kora buto isa nkidakora wongeyeho disabledikiranga boolean kubintu byose <button>. Utubuto twahagaritswe twasabye pointer-events: nonekuri, kubuza kugendagenda hamwe na reta ikora.

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>

Utubuto twahagaritswe ukoresheje <a>element yitwara gato:

<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 ukoresheje <a>ugomba gushyiramo aria-disabled="true"ikiranga kwerekana imiterere yibintu bifasha tekinoroji.
Utubuto twahagaritswe ukoresheje <a> ntigomba gushyiramo hrefikiranga.

Ihuza ryibanze Ihuza

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>

Ihuza imikorere caveat

Kugirango utwikire imanza aho ugomba kugumana hrefikiranga kumurongo wamugaye, urwego .disabledrukoresha pointer-events: nonekugirango ugerageze guhagarika imikorere yimikorere ya <a>s. Menya ko uyu mutungo wa CSS utarasanzwe kuri HTML, ariko mushakisha zose zigezweho zirabishyigikira. 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.

Ihuza ryibanze Ihuza

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>

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.

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>

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.

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>

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.

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>

Ibikoresho byinyongera birashobora gukoreshwa muguhuza guhuza buto mugihe utambitse. Hano twafashe urugero rwambere rwishubije hanyuma twongeramo ibikorwa byingirakamaro hamwe na margin yingirakamaro kuri buto kugirango iburyo uhuze buto mugihe zitakibitswe.

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>

Gucomeka

Akabuto plugin igufasha gukora byoroshye kuri / kuzimya buto.

Biboneka, utubuto twa buto turasa na cheque yisanduku yo guhinduranya buto . Ariko, zitangwa muburyo butandukanye nubuhanga bufasha: kugenzura agasanduku ka gasanduku kazatangazwa nabasomyi ba ecran nka "bagenzuwe" / "ntibagenzuwe" (kuva, nubwo bagaragara, baracyari agasanduku k'isanduku), mugihe utubuto twa toggle 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"

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>

Guhuza Guhuza ibikorwa Guhagarika guhuza

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>

Uburyo

Urashobora gukora buto urugero hamwe na buto yubaka, kurugero:

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

Uburyo	Ibisobanuro
`dispose`	Gusenya buto yibintu. (Kuraho amakuru yabitswe kubintu bya DOM)
`getInstance`	Uburyo buhamye butuma ubona buto urugero ijyanye nibintu bya DOM, 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)`.
`toggle`	Toggles gusunika leta. Itanga buto igaragara ko yakoreshejwe.

Kurugero, Kuri Guhindura Utubuto Byose

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

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihindagurika, buto noneho ikoresha CSS ihindagurika kumurongo .btnkugirango wongere igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

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

Buri .btn-*cyiciro cyo guhindura ibintu gihindura CSS ihindagurika kugirango igabanye amategeko yinyongera ya CSS hamwe natwe button-variant(), button-outline-variant()hamwe na button-size()mixin.

Dore urugero rwo kubaka icyiciro cyihariye cyo .btn-*guhindura ibintu nkuko tubikora kuri buto yihariye ya doc yacu muguhindura CSS ya Bootstrap ya CSS hamwe nuruvange rwibihinduka byacu 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%)};
}

Ibihinduka bya Sass

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

Sass ivanze

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

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