Khawm
Siv Bootstrap cov kev cai khawm style rau kev ua hauv cov ntawv, sib tham, thiab ntau ntxiv nrog kev txhawb nqa rau ntau qhov ntau thiab tsawg, xeev, thiab ntau dua.
Piv txwv
Bootstrap suav nrog ntau lub pob khawm ua ntej, txhua tus ua haujlwm rau nws tus kheej lub hom phiaj, nrog ob peb yam ntxiv pov rau hauv kev tswj hwm ntau dua.
<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>
Qhia lub ntsiab lus rau kev pab technologies
Siv cov xim los ntxiv cov ntsiab lus tsuas yog muab qhov pom kev pom, uas yuav tsis raug xa mus rau cov neeg siv cov thev naus laus zis pab - xws li cov ntawv nyeem. Xyuas kom meej tias cov ntaub ntawv qhia los ntawm cov xim yog pom tseeb los ntawm cov ntsiab lus nws tus kheej (xws li cov ntawv pom), lossis suav nrog lwm txoj kev, xws li cov ntawv ntxiv zais nrog cov .visually-hidden
chav kawm.
Disable text wrapping
Yog tias koj tsis xav kom lub pob ntawv qhwv, koj tuaj yeem ntxiv cov .text-nowrap
chav kawm rau lub pob. Hauv Sass, koj tuaj yeem teeb tsa $btn-white-space: nowrap
kom kaw cov ntawv sau rau txhua lub pob.
Khawm tag
Cov .btn
chav kawm yog tsim los siv nrog lub <button>
ntsiab. Txawm li cas los xij, koj tuaj yeem siv cov chav kawm no <a>
los yog <input>
cov ntsiab lus (txawm tias qee qhov browsers yuav siv qhov sib txawv me ntsis).
Thaum siv cov chav kawm khawm ntawm <a>
cov ntsiab lus uas tau siv los ua kom muaj kev ua haujlwm hauv nplooj ntawv (xws li kev sib tsoo cov ntsiab lus), tsis yog txuas mus rau nplooj ntawv tshiab lossis ntu hauv nplooj ntawv tam sim no, cov kev sib txuas no yuav tsum tau muab role="button"
rau kom tsim nyog qhia lawv lub hom phiaj rau kev pabcuam thev naus laus zis xws li screen nyeem ntawv.
<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">
Taw qhia cov nyees khawm
Xav tau ib lub pob, tab sis tsis yog cov xim tom qab hnyav lawv nqa? Hloov cov chav kawm hloov pauv hloov pauv nrog cov .btn-outline-*
uas yuav tshem tawm tag nrho cov duab tom qab thiab xim ntawm ib lub pob.
<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>
Qhov ntau thiab tsawg
Xav tau cov nyees khawm loj lossis me dua? Ntxiv .btn-lg
lossis .btn-sm
rau qhov ntau thiab tsawg.
<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>
Lub xeev tsis taus
Ua kom cov nyees khawm zoo li tsis ua haujlwm los ntawm kev ntxiv tus disabled
cwj pwm boolean rau txhua <button>
lub caij. Cov nyees khawm xiam oob khab tau pointer-events: none
siv rau, tiv thaiv hover thiab lub xeev nquag los ntawm kev tshwm sim.
<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>
Cov khawm xiam oob qhab siv lub <a>
caij coj txawv me ntsis:
<a>
s tsis txhawb tusdisabled
cwj pwm, yog li koj yuav tsum ntxiv cov.disabled
chav kawm kom nws pom qhov tsis taus.- Qee qhov kev nyiam yav tom ntej yog suav nrog rau lov tes taw tag nrho
pointer-events
ntawm cov nyees khawm thauj tog rau nkoj. - Cov nyees khawm xiam oob qhab yuav tsum suav nrog tus
aria-disabled="true"
cwj pwm los qhia txog lub xeev ntawm cov khoom siv rau kev pabcuam.
<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
Cov .disabled
chav kawm siv pointer-events: none
los sim lov tes taw qhov txuas ua haujlwm ntawm <a>
s, tab sis cov cuab yeej CSS tseem tsis tau ua qauv. Tsis tas li ntawd, txawm nyob rau hauv browsers uas txhawb nqa pointer-events: none
, keyboard navigation tseem tsis cuam tshuam, txhais tau hais tias cov neeg siv cov keyboard pom thiab cov neeg siv thev naus laus zis tseem tuaj yeem qhib cov kev txuas no. Yog li kom muaj kev nyab xeeb, ntxiv rau aria-disabled="true"
, kuj suav nrog tus tabindex="-1"
cwj pwm ntawm cov kev sib txuas no los tiv thaiv lawv los ntawm kev txais cov keyboard tsom, thiab siv cov kev cai JavaScript los lov tes taw lawv cov haujlwm tag nrho.
Thaiv cov nyees khawm
Tsim cov kab lus teb ntawm qhov dav-dav, "block khawm" zoo li cov hauv Bootstrap 4 nrog kev sib xyaw ntawm peb cov zaub thiab cov khoom siv sib txawv. Los ntawm kev siv cov khoom siv es tsis txhob khawm cov chav kawm tshwj xeeb, peb muaj kev tswj hwm ntau dua ntawm qhov sib nrug, kev sib dhos, thiab kev coj cwj pwm.
<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>
Ntawm no peb tsim ib qho kev hloov pauv, pib nrog vertically stacked nyees khawm kom txog rau thaum lub md
breakpoint, qhov twg .d-md-block
hloov cov .d-grid
chav kawm, yog li nullifying cov gap-2
nqi hluav taws xob. Resize koj tus browser kom pom lawv hloov.
<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>
Koj tuaj yeem kho qhov dav ntawm koj cov nyees khawm thaiv nrog daim phiaj kab dav chav kawm. Piv txwv li, rau ib nrab-dav "block khawm", siv .col-6
. Center nws horizontally nrog .mx-auto
, ib yam nkaus.
<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>
Kev siv hluav taws xob ntxiv tuaj yeem siv los kho qhov kev sib tw ntawm cov nyees khawm thaum kab rov tav. Ntawm no peb tau coj peb cov piv txwv yav dhau los teb thiab ntxiv qee qhov kev siv hluav taws xob flex thiab cov khoom siv hluav taws xob ntawm lub pob kom txoj cai sib dhos cov nyees khawm thaum lawv tsis raug teeb tsa lawm.
<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>
Khawm plugin
Lub khawm plugin tso cai rau koj los tsim cov nyees khawm yooj yim rau / tawm toggle.
Toggle xeev
Ntxiv data-bs-toggle="button"
rau toggle khawm lub active
xeev. Yog tias koj tab tom qhib lub pob ua ntej, koj yuav tsum manually ntxiv cov .active
chav kawm thiab aria-pressed="true"
xyuas kom meej tias nws raug xa mus rau cov cuab yeej pabcuam.
<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>
Cov txheej txheem
Koj tuaj yeem tsim ib qho piv txwv nrog lub pob tsim, piv txwv li:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Txoj kev | Kev piav qhia |
---|---|
toggle |
Toggles thawb lub xeev. Muab lub pob kom pom tias nws tau qhib. |
dispose |
Ua kom lub ntsiab lub khawm. (Tshem cov ntaub ntawv khaws cia ntawm DOM lub caij) |
getInstance |
Txoj kev zoo li qub uas tso cai rau koj kom tau txais khawm piv txwv cuam tshuam rau DOM lub caij, koj tuaj yeem siv nws zoo li no:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Txoj kev zoo li qub uas rov qab ib qho piv txwv cuam tshuam rau DOM lub caij lossis tsim ib qho tshiab yog tias nws tsis tau pib. Koj tuaj yeem siv nws li no:bootstrap.Button.getOrCreateInstance(element) |
Piv txwv li, toggle tag nrho cov nyees khawm
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Hloov pauv
$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
Muaj peb lub mixins rau cov nyees khawm: khawm thiab khawm cov qauv sib txawv mixins (ob qho tib si raws li $theme-colors
), ntxiv rau lub pob loj mixin.
@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);
}
Loops
Khawm variants (rau cov nyees khawm tsis tu ncua thiab cov duab kos) siv lawv cov kev sib xyaw nrog peb $theme-colors
daim ntawv qhia los tsim cov chav kawm hloov kho hauv 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);
}
}