Bɔtin dɛn
Yuz Bootstrap in kɔstɔm bɔtin stayl dɛn fɔ akshɔn dɛn na fɔm dɛn, dayalɔg dɛn, ɛn mɔ wit sɔpɔt fɔ bɔku saiz dɛn, stet dɛn, ɛn ɔda tin dɛn.
Ɛgzampul dɛn
Bootstrap inklud sɔm prɛdifayn bɔtin stayl dɛn, ɛni wan de sav in yon sɛmantik pɔpɔshɔn, wit sɔm ɛkstra dɛn we dɛn trowe insay fɔ mɔ kɔntrol.
<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>Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp
Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.
Disable fɔ rap tɛks
If yu nɔ want di bɔtin tɛks fɔ rap, yu kin ad di .text-nowrapklas to di bɔtin. Insay Sass, yu kin sɛt $btn-white-space: nowrapfɔ disable tɛks wrap fɔ ɛni bɔtin.
Di tag dɛn we de na di bɔtin
Dɛn .btnmek di klas dɛn fɔ yuz wit di <button>ɛlimɛnt. Bɔt yu kin yuz dɛn klas dɛn ya bak pan <a>ɔ <input>ɛlimɛnt dɛn (pan ɔl we sɔm brɔuza dɛn kin yuz wan smɔl difrɛn rɛndreshɔn).
We yu de yuz bɔtin klas dɛn pan <a>ɛlimɛnt dɛn we dɛn kin yuz fɔ trig in-pej wok (lɛk kɔntinyu fɔ kɔlaps), pas fɔ link to nyu pej ɔ sɛkshɔn dɛn insay di pej we de naw, dɛn fɔ gi dɛn link dɛn ya a role="button"fɔ mek dɛn ebul fɔ gi dɛn rizin di rayt we to ɛtɛknɔlɔji dɛn we de ɛp dɛn lɛk skrin rida dɛn.
<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">Di bɔtin dɛn fɔ autlayn
Yu nid bɔtin, bɔt nɔto di hefty bakgrɔn kɔlɔ dɛn we dɛn kin briŋ? Riples di difɔlt modifya klas dɛn wit di .btn-outline-*wan dɛn fɔ pul ɔl di bakgrɔn pikchɔ ɛn kɔlɔ dɛn na ɛni bɔtin.
<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>Sayz dɛn
Fans big ɔ smɔl bɔtin dɛn? Ad .btn-lgɔ .btn-smfɔ ɔda saiz dɛn.
<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 stet
Mek bɔtin dɛn luk inaktiv bay we yu ad di disabledbuli atribyut to ɛni <button>ɛlimɛnt. Disabled bɔtin dɛn dɔn pointer-events: noneaplay to, we de mek di hover ɛn aktiv stet dɛn nɔ trig.
<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>Di bɔtin dɛn we nɔ ebul fɔ yuz di <a>ɛlimɛnt kin biev difrɛn smɔl:
<a>s nɔ de sɔpɔt didisabledatribyut, so yu fɔ ad di.disabledklas fɔ mek i tan lɛk se i nɔ ebul fɔ si.- Sɔm stayl dɛn we go fayn fɔ tumara bambay de fɔ disable ɔl
pointer-eventsdi ankɔ bɔtin dɛn. - Disabled bɔtin dɛn we de yuz
<a>fɔ inklud diaria-disabled="true"atribyut fɔ sho di stet fɔ di ɛlimɛnt to ɛp teknɔlɔji dɛn. - Disabled bɔtin dɛn we de yuz
<a>nɔ fɔ gɛt dihrefatribyut.
<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 funkshɔnaliti caveat
Fɔ kɔba kes dɛn usay yu fɔ kip di hrefatribyut pan wan disabul link, di .disabledklas de yuz pointer-events: nonefɔ tray fɔ disable di link funkshɔnaliti fɔ <a>s. Notis se dis CSS prɔpati nɔ standad yet fɔ HTML, bɔt ɔl di mɔdan brawza dɛn de sɔpɔt am. Apat frɔm dat, ivin insay brawza dɛn we de sɔpɔt pointer-events: none, di kibɔd nevigishɔn nɔ de afɛkt, we min se di wan dɛn we de si di kibɔd ɛn di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp dɛn go stil ebul fɔ aktiv dɛn link dɛn ya. So fɔ mek yu sef, apat frɔm aria-disabled="true", put wan tabindex="-1"atribyut bak na dɛn link dɛn ya fɔ mek dɛn nɔ gɛt kibɔd fɔs, ɛn yuz kɔstɔm JavaSkript fɔ disable dɛn wok ɔltogɛda.
<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>Blɔk di bɔtin dɛn
Krio rispɔnsiv stak dɛn we gɛt ful-wid, “blɔk bɔtin dɛn” lɛk di wan dɛn we de na Bootstrap 4 wit wan miks pan wi displei ɛn gap yutiliti dɛn. Bay we wi de yuz yutiliti dɛn instead ɔf bɔtin spɛshal klas dɛn, wi gɛt bɔku mɔ kɔntrol pan spɛshal, alaynɛshɔn, ɛn rispɔnsiv bihayvya.
<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>Na ya wi de mek wan rispɔnsiv vɛryushɔn, stat wit vertikal stak bɔtin dɛn te di mdbrekpɔynt, usay i de .d-md-blockriples di .d-gridklas, so dat de nulify di gap-2yutiliti. Risayz yu brɔwza fɔ si dɛn chenj.
<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>Yu kin ajɔst di wit fɔ yu blɔk bɔtin dɛn wit grid kɔlɔm wit klas dɛn. Fɔ ɛgzampul, fɔ wan af-af “blɔk bɔtin”, yuz .col-6. Senta am ɔrizɔntal wan wit .mx-auto, tu.
<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>Yu kin yuz ɔda yutiliti dɛn fɔ ajɔst di alaynɛshɔn fɔ di bɔtin dɛn we dɛn de ɔrizɔntal. Na ya wi dɔn tek wi fɔs rispɔnsiv ɛgzampul ɛn ad sɔm fleks yutiliti ɛn wan margin yutiliti na di bɔtin fɔ rayt alaynɛt di bɔtin dɛn we dɛn nɔ de stak igen.
<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>Bɔtin plɔgin
Di bɔtin plɔgin de mek yu ebul fɔ mek simpul on/ɔf tɔgl bɔtin dɛn.
Toggle stet dɛn
Add data-bs-toggle="button"to toggle wan bɔtin in activestet. If yu de pri-toggling wan bɔtin, yu fɔ ad di .activeklas wit yu an ɛn aria-pressed="true" fɔ mek shɔ se dɛn gi am di rayt we to ɛtɛknɔlɔji dɛn we de ɛp yu.
<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>Di we aw dɛn de du am
Yu kin mek wan bɔtin instans wit di bɔtin kɔnstrɔkta, fɔ ɛgzampul:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
| We | Tɔk bɔt |
|---|---|
toggle |
Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am. |
dispose |
I de pwɛl wan ɛlimɛnt in bɔtin. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt) |
getInstance |
Statik we de alaw yu fɔ gɛt di bɔtin instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Statik mɛtɔd we de ritɔn wan bɔtin instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we dɛn nɔ bin initialize am. Yu kin yuz am lɛk dis:bootstrap.Button.getOrCreateInstance(element) |
Fɔ ɛgzampul, fɔ chenj ɔl di bɔtin dɛn
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass we bin de
Di tin dɛn we kin chenj
$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%;
Mixin dɛn
Tri miksin dɛn de fɔ bɔtin dɛn: bɔtin ɛn bɔtin ɔtlayn vayriɔnt miksin dɛn (ɔl tu bays pan $theme-colors), plus wan bɔtin saiz miksin.
@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);
}
Lɔp dɛn
Bɔtin vayriɔnt dɛn (fɔ rɛgyula ɛn ɔtlayn bɔtin dɛn) de yuz dɛn rispektiv miksin dɛn wit wi $theme-colorsmap fɔ jenarayz di modifya klas dɛn 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);
}
}