Mabatani
Gwiritsani ntchito masitayilo a Bootstrap pamabatani kuti muchitepo kanthu m'mitundu, zokambirana, ndi zina zambiri mothandizidwa ndi makulidwe angapo, zigawo, ndi zina zambiri.
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-hidden
kalasi.
Letsani kukulunga mawu
Ngati simukufuna kuti mawu a batani atseke, mutha kuwonjezera .text-nowrap
kalasi ku batani. Ku Sass, mutha $btn-white-space: nowrap
kuyimitsa kutsekereza zolemba pa batani lililonse.
Ma tag a batani
Maphunzirowa .btn
amapangidwa 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.
<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>
Makulidwe
Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-lg
kapena .btn-sm
ma 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 disabled
boolean ku <button>
chinthu chilichonse. Mabatani olemala agwiritsidwa pointer-events: none
ntchito, 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 ndidisabled
chikhalidwecho, chifukwa chake muyenera kuwonjezera.disabled
kalasi kuti iwoneke ngati yolumala.- Masitayelo ena ogwirizana ndi mtsogolo akuphatikizidwa kuti muyimitse zonse pamabatani
pointer-events
a nangula. - Mabatani olumala omwe akugwiritsidwa ntchito
<a>
akuyenera kukhala ndi mawonekedwearia-disabled="true"
owonetsa momwe zinthu zilili kuukadaulo wothandizira. - Mabatani olemala omwe akugwiritsa ntchito
<a>
sayenera kukhala ndi mawonekedwehref
.
<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 magwiridwe antchito chenjezo
Kuphimba milandu yomwe muyenera kusunga href
chidziwitso pa ulalo wolemala, .disabled
kalasiyo imagwiritsa ntchito pointer-events: none
kuyesa 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.
<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>
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.
<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 md
pagawo losweka, pomwe .d-md-block
m'malo mwa .d-grid
kalasiyo, ndikuchotsa gap-2
zofunikira. 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 mwake, 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.
Sinthani maiko
Onjezani data-bs-toggle="button"
kuti musinthe mawonekedwe a batani active
. Ngati musinthiratu batani, muyenera kuwonjezera pamanja .active
kalasi 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>
<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:
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 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)
) {
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-colors
mapu 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);
}
}