Mabhatani

Shandisa Bootstrap's tsika bhatani masitaera ezviito mumafomu, dialog, uye nezvimwe nerutsigiro rwehukuru hwakawanda, nyika, nezvimwe.

Pa peji ino

Mienzaniso

Bootstrap inosanganisira akati wandei akafanotsanangurwa mabhatani masitaera, imwe neimwe ichishandira yayo semantic chinangwa, iine mashoma ekuwedzera akakandwa mukati kuti awedzere kutonga.

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>

Kuendesa zvinoreva kunobatsira matekinoroji

Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .visually-hiddennekirasi.

Dzima kupeta zvinyorwa

Kana iwe usingade kuti bhatani riputirwe, unogona kuwedzera .text-nowrapkirasi kubhatani. MuSass, unogona $btn-white-space: nowrapkuseta kudzima kupeta kwemavara kwebhatani rega rega.

Button tags

Makirasi .btnakagadzirirwa kushandiswa <button>nechinhu. Nekudaro, iwe unogona zvakare kushandisa aya makirasi pane <a>kana <input>zvinhu (kunyangwe mamwe mabhurawuza anogona kushandisa akati siyanei kupa).

Paunenge uchishandisa mabhatani makirasi pane <a>zvinhu zvinoshandiswa kukonzeresa mukati-peji kushanda (sekudonha zvemukati), pane kubatanidza kune mapeji matsva kana zvikamu mukati peji razvino, izvi zvinongedzo zvinofanirwa kupihwa role="button"kuti vaendese chinangwa chavo nenzira kwayo kune tekinoroji inobatsira senge. vanoverenga skrini.

Link

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

Mabhatani erondedzero

Mukuda bhatani, asi kwete iwo hefty kumashure mavara avanounza? Tsiva makirasi ekugadzirisa makirasi neayo .btn-outline-*kuti ubvise mifananidzo yese yekumashure uye mavara pane chero bhatani.

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>

Mamwe masitaera emabhatani anoshandisa ruvara rwemberi rwakati rererei, uye anofanirwa kungoshandiswa pane rima rekumashure kuti rive nemusiyano wakakwana.

Saizi

Unoda mabhatani makuru kana madiki? Wedzera .btn-lgkana .btn-smkuwedzera saizi.

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>

Iwe unogona kunyange kutenderedza yako tsika saizi neCSS zvinosiyana:

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>

Disabled state

Ita kuti mabhatani ataridzike asingashande nekuwedzera iyo disabledboolean hunhu kune chero <button>chinhu. Mabhatani akaremara aiswa pointer-events: nonepa, kudzivirira hover uye active states kubva pakuridza.

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>

Mabhatani akaremara achishandisa <a>chinhu anoita zvakati siyanei:

<a>s haitsigire disabledhunhu, saka unofanirwa kuwedzera .disabledkirasi kuti iite seyakaremara.
Mamwe masitaera ane hushamwari anosanganisirwa kudzima zvese pointer-eventspamabhatani eanchor.
Mabhatani akaremara uchishandisa <a>anofanirwa kusanganisira aria-disabled="true"hunhu kuratidza mamiriro echinhu kune inobatsira tekinoroji.
Akaremara mabhatani uchishandisa <a> haafanire kusanganisira hrefhunhu.

Primary link Link

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>

Link functionality caveat

Kuvhara nyaya dzaunofanirwa kuchengetedza hrefhunhu pane akaremara chinongedzo, .disabledkirasi inoshandisa pointer-events: nonekuyedza kudzima iyo link kushanda kwe <a>s. Ziva kuti iyi CSS pfuma haisati yamira paHTML, asi mabhurawuza ese emazuva ano anoitsigira. Pamusoro pezvo, kunyangwe mumabhurawuza anotsigira pointer-events: none, keyboard navigation inoramba isina kukanganiswa, zvichireva kuti vanoona vashandisi vekhibhodi nevashandisi veanobatsira matekinoroji vachiri kukwanisa kumisa aya malink. Saka kuve wakachengeteka, kuwedzera kune aria-disabled="true", zvakare sanganisira tabindex="-1"hunhu pane aya malink kuvadzivirira kubva pakugashira keyboard, uye shandisa tsika JavaScript kudzima mashandiro avo zvachose.

Primary link Link

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>

Vimba mabhatani

Gadzira masaga anoteerera ehupamhi hwakazara, "mabhatani evhavha" seaya ari muBootstrap 4 nemusanganiswa wekuratidzira kwedu uye gap zvishandiso. Nekushandisa zvishandiso panzvimbo yemabhatani chaiwo makirasi, isu tine hukuru hukuru hwekutonga pamusoro penzvimbo, kurongeka, uye hunhu hwekuteerera.

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>

Pano isu tinogadzira shanduko inopindura, kutanga nemabhatani akaturikidzana kusvika mdpakavhurika, .d-md-blockpainotsiva .d-gridkirasi, nekudaro kuita kuti chishandiso gap-2chisashande. Rezesa browser yako kuti uvaone vachichinja.

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>

Iwe unogona kugadzirisa hupamhi hwemabhatani ako evhavha ane grid column upamhi makirasi. Semuenzaniso, kwehafu-yakafara "block button", shandisa .col-6. Pakati payo yakachinjika ne .mx-auto, zvakare.

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>

Zvimwe zvinoshandiswa zvinogona kushandiswa kugadzirisa kurongeka kwemabhatani kana akachinjika. Pano takatora muenzaniso wedu wekare wekupindura uye tikawedzera zvimwe zvinoshandiswa zvinoshanduka uye margin utility pane bhatani kurongedza kurudyi mabhatani kana asisiri akaturikidzana.

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>

Bhatani plugin

Bhatani plugin rinokutendera iwe kuti ugadzire zviri nyore pa/kudzima mabhatani ekushandura.

Nekuona, mabhatani ekushandura aya akafanana nebhokisi rekutarisa mabhatani . Nekudaro, iwo anounzwa zvakasiyana neanobatsira matekinoroji: mabhokisi ekutarisa anozoziviswa nevaverengi vescreen se "akatariswa"/"asina kutariswa" (sezvo, kunyangwe chitarisiko chavo, achiri mabhokisi ekutarisa), nepo mabhatani ekushandura achizoziviswa se "bhatani"/"bhatani rakadzvanywa". Sarudzo pakati peidzi nzira mbiri inoenderana nerudzi rwekuchinjisa yauri kugadzira, uye kuti kana kusachinja kuchaita zvine musoro kune vashandisi kana yaziviswa sebhokisi rekutarisa kana sebhatani chairo.

Toggle states

Wedzera data-bs-toggle="button"kusandura mamiriro ebhatani active. Kana uri kufanobatidza bhatani, unofanira kuwedzera .activekirasi nemaoko uye aria-pressed="true" kuona kuti yasvitswa nenzira kwayo kune tekinoroji inobatsira.

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 link Active toggle link Yadzimwa toggle link

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>

Nzira

Iwe unogona kugadzira bhatani chiitiko nebhatani mugadziri, semuenzaniso:

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

Nzira	Tsanangudzo
`dispose`	Kuparadza bhatani rechimwe chinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
`getInstance`	Static nzira iyo inobvumidza iwe kuti uwane iyo bhatani muenzaniso yakabatana neiyo DOM chinhu, unogona kuishandisa seizvi: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Static nzira inodzosa bhatani chiitiko chakabatana neDOM chinhu kana kugadzira chitsva kana chisina kutangwa. Unogona kuishandisa sezvizvi `bootstrap.Button.getOrCreateInstance(element)`:.
`toggle`	Toggles push state. Inopa bhatani kutaridzika kuti rakaitwa.

Semuenzaniso, kushandura mabhatani ese

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

CSS

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, mabhatani zvino anoshandisa emuno CSS madhizaini .btnpakusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

Yega yega .btn-*modifier kirasi inogadziridza akakodzera CSS akasiyana kuti aderedze yakawedzera CSS mitemo neyedu button-variant(), button-outline-variant(), uye button-size()misanganiswa.

Heino muenzaniso wekuvaka kirasi inogadziridza .btn-*kirasi sezvatinoitira mabhatani akasarudzika kune edu zvinyorwa nekupazve Bootstrap's CSS akasiyana nemusanganiswa weiyo yedu CSS uye Sass akasiyana.

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

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

Kune matatu masanganiswa emabhatani: bhatani uye bhatani ratidziro musiyano musanganiswa (zvose zvichibva pa $theme-colors), pamwe nebhatani saizi musanganiswa.

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

Mabhatani akasiyana (emabhatani enguva dzose uye erondedzero) shandisa iwo musanganiswa $theme-colorsnemepu yedu kugadzira makirasi ekugadzirisa mu 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);
  }
}