in English

Mabatani

Gwiritsani ntchito masitayilo a Bootstrap pamabatani kuti muchitepo kanthu m'mitundu, zokambirana, ndi zina zambiri mothandizidwa ndi makulidwe angapo, zigawo, ndi zina zambiri.

Patsamba ili

Zitsanzo

Bootstrap imaphatikizapo masitayelo angapo ofotokozedweratu, iliyonse imagwira ntchito yakeyake, ndi zina zowonjezera zomwe zimaponyedwa kuti ziziwongolera.

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

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Letsani kukulunga mawu

Ngati simukufuna kuti mawu a batani atseke, mutha kuwonjezera .text-nowrapkalasi ku batani. Ku Sass, mutha $btn-white-space: nowrapkuyimitsa kutsekereza zolemba pa batani lililonse.

Ma tag a batani

Maphunzirowa .btnamapangidwa kuti agwiritsidwe ntchito ndi <button>element. Komabe, mutha kugwiritsanso ntchito makalasi awa <a>kapena <input>zinthu (ngakhale asakatuli ena atha kugwiritsa ntchito kumasulira kosiyana pang'ono).

Mukamagwiritsa ntchito mabatani azinthu <a>zomwe zimagwiritsidwa ntchito kuyambitsa ntchito zapatsamba (monga kugwa), m'malo molumikizana ndi masamba atsopano kapena magawo omwe ali patsamba lapano, maulalo awa ayenera kuperekedwa role="button"kuti afotokozere moyenera cholinga chawo kuukadaulo wothandizira monga. owerenga chophimba.

Lumikizani

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

Mabatani owonetsera

Mukufuna batani, koma osati mitundu yayikulu yakumbuyo yomwe amabweretsa? Bwezerani m'malo mwa makalasi osintha .btn-outline-*kuti muchotse zithunzi zonse zakumbuyo ndi mitundu pa batani lililonse.

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

Mabatani ena amagwiritsa ntchito utoto wopepuka wakutsogolo, ndipo uyenera kugwiritsidwa ntchito pamalo amdima kuti pakhale kusiyana kokwanira.

Makulidwe

Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-lgkapena .btn-smma size owonjezera.

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

Dziko olumala

Pangani mabatani kuti awoneke ngati osagwira ntchito powonjezera mawonekedwe a disabledboolean ku <button>chinthu chilichonse. Mabatani olemala agwiritsidwa pointer-events: nonentchito, kuletsa ma hover ndi magwiridwe antchito kuti ayambitse.

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

Mabatani olemala omwe amagwiritsa ntchito <a>chinthucho amachita mosiyana pang'ono:

<a>s sizigwirizana ndi disabledchikhalidwecho, chifukwa chake muyenera kuwonjezera .disabledkalasi kuti iwoneke ngati yolumala.
Masitayelo ena ogwirizana ndi mtsogolo akuphatikizidwa kuti muyimitse zonse pamabatani pointer-eventsa nangula.
Mabatani olemala akuyenera kukhala ndi mawonekedwe aria-disabled="true"owonetsa momwe zinthu zilili kuukadaulo wothandizira.

Mgwirizano woyamba Lumikizani

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

Link magwiridwe antchito chenjezo

Kalasiyo .disabledimagwiritsa ntchito pointer-events: nonekuyesa kuletsa magwiridwe antchito a <a>s, koma katundu wa CSS sunakhazikitsidwebe. Kuphatikiza apo, ngakhale m'masakatuli omwe amathandizira pointer-events: none, kuyenda kwa kiyibodi sikukhudzidwa, kutanthauza kuti ogwiritsa ntchito kiyibodi omwe amawona komanso ogwiritsa ntchito matekinoloje othandizira azitha kuyatsa maulalo awa. Chifukwa chake kuti mukhale otetezeka, kuwonjezera pa aria-disabled="true", phatikizaninso mawonekedwe tabindex="-1"pamalumikizidwe awa kuti awaletse kuti asalandire chidwi cha kiyibodi, ndikugwiritsa ntchito JavaScript yanthawi zonse kuti ayimitse magwiridwe ake onse.

Mabatani oletsa

Pangani masanjidwe omvera amtali mwake, "mabatani otsekereza" monga omwe ali mu Bootstrap 4 ndi kusakanikirana kwa mawonedwe athu ndi zinthu zomwe zimagwiritsa ntchito kusiyana. Pogwiritsira ntchito zofunikira m'malo mwa makalasi apadera a mabatani, timakhala ndi mphamvu zambiri pa malo, kuyanjanitsa, ndi machitidwe omvera.

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

Apa tikupanga kusinthika komvera, kuyambira ndi mabatani okhazikika mpaka mdpagawo losweka, pomwe .d-md-blockm'malo mwa .d-gridkalasiyo, ndikuchotsa gap-2zofunikira. Sinthani kukula kwa msakatuli wanu kuti muwone akusintha.

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

Mutha kusintha kukula kwa mabatani anu a block ndi makalasi amtundu wa gridi. Mwachitsanzo, pa "batani" la m'lifupi, gwiritsani ntchito .col-6. Pakatikati mopingasa ndi .mx-auto.

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

Zina zowonjezera zitha kugwiritsidwa ntchito kusintha masanjidwe a mabatani akakhala yopingasa. Apa tatenga chitsanzo chathu cham'mbuyomu ndikuwonjezera zida zosinthira ndi zida zam'mphepete pa batani kuti muyanjanitse mabataniwo pomwe sadapakidwenso.

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

batani plugin

Pulogalamu yowonjezera ya batani imakupatsani mwayi wopanga / kuzimitsa mabatani osinthira.

M'mawonekedwe, mabatani osinthira awa ali ofanana ndi mabatani osinthira mabokosi . Komabe, zimaperekedwa mosiyana ndi matekinoloje othandizira: zosintha zamabokosi zidzalengezedwa ndi owerenga pazenera kuti "zafufuzidwa" / "osayang'aniridwa" (popeza, ngakhale akuwoneka, akadali mabokosi), pomwe mabatani osinthira awa adzalengezedwa ngati. "batani"/"batani" Kusankha pakati pa njira ziwirizi kudzadalira mtundu wakusintha komwe mukupanga, komanso ngati kusinthaku kudzakhala komveka kwa ogwiritsa ntchito akalengezedwa ngati bokosi loyang'anira kapena ngati batani lenileni.

Sinthani maiko

Onjezani data-bs-toggle="button"kuti musinthe mawonekedwe a batani active. Ngati musinthiratu batani, muyenera kuwonjezera pamanja .activekalasi ndikuwonetsetsa aria-pressed="true" kuti yaperekedwa moyenera kuukadaulo wothandizira.

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

Sinthani ulalo Ulalo wosinthira wokhazikika Ulalo wosinthira woyimitsidwa

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

Njira

Mutha kupanga mawonekedwe a batani ndi wopanga mabatani, mwachitsanzo:

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

Njira	Kufotokozera
`toggle`	Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa.
`dispose`	Iwononga batani la chinthu. (Imachotsa deta yosungidwa pa chinthu cha DOM)
`getInstance`	Njira yosasunthika yomwe imakupatsani mwayi wopeza batani lolumikizidwa ndi chinthu cha DOM, mutha kuchigwiritsa ntchito motere:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Njira yosasunthika yomwe imabweretsanso batani logwirizana ndi chinthu cha DOM kapena kupanga china chatsopano ngati sichinayambike. Mutha kugwiritsa ntchito motere:`bootstrap.Button.getOrCreateInstance(element)`

Mwachitsanzo, kusintha mabatani onse

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

Sass

Zosintha

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

Zosakaniza

Pali zosakaniza zitatu za mabatani: mabatani ndi mabatani amawu osakanikirana (zonse zotengera $theme-colors), kuphatikiza kaphatikizidwe ka kukula kwa batani.

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

Lupu

Mitundu ya mabatani (ya mabatani anthawi zonse ndi autilaini) imagwiritsa ntchito zosakaniza zawo ndi $theme-colorsmapu athu kupanga makalasi osintha 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);
  }
}