in English

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.

<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

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

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

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

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.

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

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

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg 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

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

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.

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

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

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

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

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

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

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

Nzira	Tsanangudzo
`toggle`	Toggles push state. Inopa bhatani kutaridzika kuti rakaitwa.
`dispose`	Kuparadza bhatani rechimwe chinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
`getInstance`	Static nzira iyo inokutendera 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 element kana kugadzira chitsva kana isina kutangwa. Unogona kuishandisa seizvi:`bootstrap.Button.getOrCreateInstance(element)`

Semuenzaniso, kushandura mabhatani ese

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

Sass

Variables

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

Mixins

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

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} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}