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.

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>

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

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

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.

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>

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.

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>

Mutha kugubuduza makonda anu ndi mitundu ya CSS:

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>

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.

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>

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 olumala omwe akugwiritsidwa ntchito <a>akuyenera kukhala ndi mawonekedwe aria-disabled="true"owonetsa momwe zinthu zilili kuukadaulo wothandizira.
Mabatani olemala omwe akugwiritsa ntchito <a> sayenera kukhala ndi mawonekedwe href.

Chiyanjano choyambirira Lumikizani

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 magwiridwe antchito chenjezo

Kuphimba milandu yomwe muyenera kusunga hrefchidziwitso pa ulalo wolemala, .disabledkalasiyo imagwiritsa ntchito pointer-events: nonekuyesa kuletsa ulalo wa <a>s. Dziwani kuti katundu wa CSS uyu sanakhazikitsidwebe pa HTML, koma asakatuli onse amakono amathandizira. 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", tabindex="-1"phatikizaninso zomwe zili pamalumikizidwe awa kuti muwaletse kutsata kiyibodi, ndikugwiritsa ntchito JavaScript kuti muyimitse magwiridwe ake onse.

Chiyanjano choyambirira Lumikizani

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>

Mabatani oletsa

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

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>

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.

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>

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

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>

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.

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>

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 zenera ngati "zofufuzidwa" / "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.

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>

Sinthani ulalo Ulalo wosinthira wokhazikika Ulalo wosinthira woyimitsidwa

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>

Njira

Mutha kupanga mawonekedwe a batani ndi wopanga mabatani, mwachitsanzo:

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

Njira	Kufotokozera
`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)`:.
`toggle`	Imatembenuza dziko lokankhira. Imawonetsa batani kuwonekera kuti yayatsidwa.

Mwachitsanzo, kusintha mabatani onse

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

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la kusintha kwa CSS kwa Bootstrap, mabatani tsopano akugwiritsa ntchito zosintha za CSS zakomweko .btnkuti apititse patsogolo makonda a nthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Kalasi iliyonse .btn-*yosinthira imasintha zosintha zoyenera za CSS kuti muchepetse malamulo owonjezera a CSS ndi athu button-variant(), button-outline-variant(), ndi button-size()zosakaniza.

Nachi chitsanzo .btn-*chopanga kalasi yosinthira makonda monga momwe timachitira ndi mabatani apadera a zolemba zathu pogawanso zosintha za Bootstrap za CSS ndi zosakaniza zathu za CSS ndi 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%)};
}

Zosintha za 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%;

Zosakaniza za Sass

Pali zosakaniza zitatu za mabatani: mabatani ndi mabatani amawunidwe osiyanasiyana (zonse kutengera $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)
) {
  --#{$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 loops

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