Bọtịnụ
Jiri ụdị bọtịnụ omenala Bootstrap maka omume n'ụdị, mkparịta ụka na ndị ọzọ na nkwado maka ọtụtụ nha, steeti na ndị ọzọ.
Ihe atụ
Bootstrap gụnyere ọtụtụ ụdị bọtịnụ eburu ụzọ kọwaa, nke ọ bụla na-eje ozi ebumnuche nke ya, yana mgbakwunye ole na ole tụbara maka njikwa ọzọ.
<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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hidden
klaasị.
Gbanyụọ mkpuchi ederede
Ọ bụrụ na ịchọghị ka ederede bọtịnụ ahụ kechie, ị nwere ike itinye .text-nowrap
klas ahụ na bọtịnụ ahụ. Na Sass, ị nwere ike ịtọ $btn-white-space: nowrap
ka gbanyụọ mpịachi ederede maka bọtịnụ ọ bụla.
Mkpado bọtịnụ
Emebere .btn
klaasị ndị ahụ ka ejiri <button>
mmewere mee ihe. Agbanyeghị, ị nwekwara ike iji klaasị ndị a na <a>
ma ọ bụ <input>
ihe (n'agbanyeghị na ụfọdụ ihe nchọgharị nwere ike itinye ntụgharị dịtụ iche).
Mgbe ị na-eji klaasị bọtịnụ na <a>
ihe ndị a na-eji kpalite ọrụ n'ime ibe (dị ka ọdịnaya dara ada), kama ijikọ na ibe ọhụrụ ma ọ bụ ngalaba dị n'ime ibe dị ugbu a, ekwesịrị inye njikọ ndị a role="button"
iji kwupụta ebumnuche ha nke ọma maka teknụzụ enyemaka dị ka. ndị na-agụ ihuenyo.
<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">
bọtịnụ ndetu
Ịchọrọ bọtịnụ, mana ọ bụghị agba ndabere dị egwu ha na-eweta? Dochie klaasị mgbanwe ndabara na nke .btn-outline-*
iji wepu onyonyo na agba niile na bọtịnụ ọ bụla.
<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>
Nha
Ị na-achọ bọtịnụ buru ibu ma ọ bụ obere? Tinye .btn-lg
ma ọ bụ .btn-sm
maka nha ndị ọzọ.
<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>
Ọnọdụ nkwarụ
Mee ka bọtịnụ yie ihe adịghị arụ ọrụ site na ịgbakwunye njirimara disabled
boolean na ihe ọ <button>
bụla. Bọtịnụ ndị nwere nkwarụ pointer-events: none
etinyerela, na-egbochi ntugharị na steeti ndị na-arụ ọrụ ka ọ ghara ịkpalite.
<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>
Bọtịnụ ndị nwere nkwarụ na-eji <a>
mmewere na-akpa àgwà dịtụ iche:
<a>
s anaghị akwadodisabled
njirimara ahụ, yabụ ị ga-agbakwunyerịrị.disabled
klas ahụ iji mee ka ọ dị ka ọ nweghị nkwarụ.- Agụnyere ụfọdụ ụdị enyi na enyi n'ọdịnihu iji gbanyụọ ihe niile
pointer-events
na bọtịnụ arịlịka. - Bọtịnụ ndị nwere nkwarụ na-eji
<a>
kwesịrị ịgụnyearia-disabled="true"
njirimara iji gosi ọnọdụ nke mmewere na teknụzụ enyemaka. - Bọtịnụ ndị nwere nkwarụ na-eji
<a>
ekwesịghị ịgụnyehref
njirimara.
<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>
Akaụntụ arụmọrụ njikọ
Iji kpuchie ikpe ebe ị ga- href
edobe njirimara na njikọ nwere nkwarụ, .disabled
klaasị na-eji pointer-events: none
nwaa gbanyụọ ọrụ njikọ nke <a>
s. Rịba ama na ahazibeghị akụrụngwa CSS a maka HTML, mana ihe nchọgharị ọgbara ọhụrụ niile na-akwado ya. Na mgbakwunye, ọbụlagodi na ihe nchọgharị na-akwado pointer-events: none
, igodo igodo ahụ ka na-emetụtaghị ya, nke pụtara na ndị ọrụ ahụigodo ahụ na ndị ọrụ teknụzụ enyemaka ka ga-enwe ike ịgbalite njikọ ndị a. Ya mere, ka ọ bụrụ nchekwa, na mgbakwunye na aria-disabled="true"
, tinyekwara tabindex="-1"
àgwà na njikọ ndị a iji gbochie ha ịnweta mgbado ahụigodo, ma jiri Javascript omenala iji gbanyụọ ọrụ ha kpamkpam.
<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>
Mgbochi bọtịnụ
Mepụta nchịkọta nzaghachi nke obosara zuru oke, "bọtịnụ ngọngọ" dị ka ndị ahụ dị na Bootstrap 4 yana ngwakọta nke ihe ngosi anyị na oghere oghere. Site n'iji ngwa kama iji klaasị bọtịnụ akọwapụtara, anyị nwere njikwa dị ukwuu karịa ohere, nhazi na omume anabatara.
<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>
N'ebe a, anyị na-emepụta mgbanwe na-anabata, na-amalite site na bọtịnụ kwụkọtara na kwụ ọtọ ruo ebe md
nkwụsịtụ, ebe .d-md-block
dochie .d-grid
klas ahụ, si otú ahụ mebie gap-2
uru ahụ. Hagharịa nha ihe nchọgharị gị ka ịhụ ka ha na-agbanwe.
<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>
Ị nwere ike ịhazigharị obosara nke bọtịnụ ngọngọ gị site na iji klaasị obosara kọlụm grid. Dịka ọmụmaatụ, maka “bọtịnụ ngọngọ” ọkara obosara, jiri .col-6
. Tinye ya n'ahịrị n'ahịrị .mx-auto
, kwa.
<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>
Enwere ike iji ihe ndị ọzọ agbakwunyere iji dozie nhazi nke bọtịnụ mgbe ọ bụla kwụ n'ahịrị. N'ebe a, anyị ewerela ihe atụ nzaghachi anyị gara aga wee gbakwunye ụfọdụ ngwa mgbanwe yana ihe dị n'akụkụ na bọtịnụ iji kwado bọtịnụ ndị ahụ n'aka nri mgbe anaghị ekpokọta ha.
<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>
Ngwa mgbakwunye bọtịnụ
Ngwa mgbakwunye bọtịnụ na-enye gị ohere ịmepụta bọtịnụ mgbanyụ ma ọ bụ gbanyụọ dị mfe.
Tụgharịa steeti
Tinye data-bs-toggle="button"
ka ịgbanwee ọnọdụ bọtịnụ active
. Ọ bụrụ na ị na-ebu ụzọ na-atụgharị bọtịnụ, ị ga-eji aka tinye .active
klaasị ma aria-pressed="true"
hụ na ebufere ya nke ọma na teknụzụ enyemaka.
<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>
Ụzọ
Ị nwere ike ịmepụta ihe atụ bọtịnụ na onye nrụpụta bọtịnụ, dịka ọmụmaatụ:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Usoro | Nkọwa |
---|---|
toggle |
Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya. |
dispose |
Na-emebi bọtịnụ mmewere. (Na-ewepụ data echekwara na mmewere DOM) |
getInstance |
Usoro static nke na-enye gị ohere ịnweta ihe atụ bọtịnụ jikọtara na ihe DOM, ị nwere ike iji ya dị ka nke a:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Usoro kwụ ọtọ nke na-eweghachi ihe atụ bọtịnụ jikọtara na mmewere DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidobeghị ya. Ị nwere ike iji ya dị ka nke a:bootstrap.Button.getOrCreateInstance(element) |
Dịka ọmụmaatụ, ka ịgbanwee bọtịnụ niile
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass
Mgbanwe
$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%;
Ngwakọta
Enwere ngwakọta atọ maka bọtịnụ: bọtịnụ na bọtịnụ ndepụta variant mixins (ha abụọ dabere na $theme-colors
), gbakwunyere mixin nha bọtịnụ.
@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
Bọtịnụ dị iche iche (maka bọtịnụ oge niile na ndepụta) na-eji ngwakọta nke otu ha na $theme-colors
maapụ anyị iji mepụta klaasị mgbanwe na 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);
}
}