Mabhatani
Shandisa Bootstrap's tsika bhatani masitaera ezviito mumafomu, dialog, uye nezvimwe nerutsigiro rwehukuru hwakawanda, nyika, nezvimwe.
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-hidden
nekirasi.
Dzima kupeta zvinyorwa
Kana iwe usingade kuti bhatani riputirwe, unogona kuwedzera .text-nowrap
kirasi kubhatani. MuSass, unogona $btn-white-space: nowrap
kuseta kudzima kupeta mameseji kwebhatani rega rega.
Button tags
Iwo .btn
makirasi akagadzirirwa 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 (senge kudonha zvemukati), pane kubatanidza kune mapeji matsva kana zvikamu mukati meiyo peji peji, izvi zvinongedzo zvinofanirwa kupihwa role="button"
kuti vaendese chinangwa chavo nenzira kwayo kune tekinoroji inobatsira senge. vanoverenga skrini.
<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>
Saizi
Unoda mabhatani makuru kana madiki? Wedzera .btn-lg
kana .btn-sm
kuwedzera 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 disabled
boolean hunhu kune chero <button>
chinhu. Mabhatani akaremara aiswa pointer-events: none
pa, 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 haitsigiredisabled
hunhu, saka unofanirwa kuwedzera.disabled
kirasi kuti iite seyakaremara.- Mamwe masitaera ane hushamwari anosanganisirwa kudzima zvese
pointer-events
pamabhatani eanchor. - Mabhatani akaremara anofanirwa kusanganisira
aria-disabled="true"
hunhu kuratidza mamiriro echinhu kune zvinobatsira tekinoroji.
<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 functionality caveat
Kirasi .disabled
inoshandisa pointer-events: none
kuyedza kudzima iyo link inoshanda ye <a>
s, asi iyo CSS pfuma haisati yamira. 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.
Vimba mabhatani
Gadzira masaga anopindura ehupamhi hwakazara, "mabhatani evhavha" seaya ari muBootstrap 4 nemusanganiswa wekuratidzira kwedu uye gap utilities. Nekushandisa zvishandiso panzvimbo yemabhatani chaiwo makirasi, isu tine hukuru hukuru hwekutonga pamusoro penzvimbo, kurongeka, uye maitiro ekuteerera.
<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 md
pakavhurika, .d-md-block
painotsiva .d-grid
kirasi, nekudaro kuita kuti chishandiso gap-2
chisashande. 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 asisarongedzerwe.
<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.
Toggle states
Wedzera data-bs-toggle="button"
kusandura mamiriro ebhatani active
. Kana uri kufanobatidza bhatani, unofanira kuwedzera .active
kirasi 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>
<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>
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-colors
nemepu 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);
}
}