Abɔtawo ƒe ƒuƒoƒo
Zã Bootstrap ƒe abɔta ƒe atsyã tɔxɛwo na nuwɔna le nuŋlɔɖiwo, dzeɖonyawo, kple bubuwo me kple kpekpeɖeŋu na lolome, nɔnɔme, kple bubuwo geɖe.
Kpɔɖeŋuwo
Bootstrap la lɔ abɔta ƒe atsyã geɖe siwo woɖo do ŋgɔ ɖe eme, wo dometɔ ɖesiaɖe wɔa eya ŋutɔ ƒe gɔmesese ƒe taɖodzinu, kple kpeɖeŋutɔ ʋee aɖewo siwo wotsɔ ƒu gbe ɖe eme hena dziɖuɖu geɖe wu.
<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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu
Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hidden
klass la ene.
Tsɔ nuŋɔŋlɔwo babla nawɔ dɔ
Ne mèdi be abɔta ƒe nuŋɔŋlɔa naxatsa o la, àte ŋu atsɔ .text-nowrap
klass la akpe ɖe abɔta la ŋu. Le Sass me la, àteŋu aɖoe $btn-white-space: nowrap
be yeaxe mɔ ɖe nuŋɔŋlɔ ƒe babla nu na abɔti ɖesiaɖe.
Abɔta ƒe dzesiwo
Wotrɔ .btn
asi le klassawo ŋu be woazã kple <button>
element la. Gake àteŋu azã klass siawo ɖe <a>
alo <input>
elements hã dzi (togbɔ be web-browser aɖewo ate ŋu awɔ gɔmeɖeɖe si to vovo vie ŋudɔ hã).
Ne èle abɔta ƒe hatsotsowo zãm ɖe <a>
nusiwo wozãna tsɔ dzea axaa me dɔwɔwɔ gɔme (abe nyatakakawo ƒe ƒuƒoƒo ene), tsɔ wu be woatsɔ kadodo aɖo axa yeyewo alo akpa siwo le axa si li fifia me la, ele be woana kadodo siawo a role="button"
be woaɖe woƒe taɖodzinu afia mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu abe screen nuxlẽmɔ̃wo.
<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">
Gblɔ nyatakakadzraɖoƒea ƒe dzesiwo
Èhiã abɔta, gake menye megbe amadede kpekpe siwo wotsɔ vɛ oa? .btn-outline-*
Tsɔ esiwo nàtsɔ aɖe megbenɔnɔmetatawo kple amadedewo katã ɖa le abɔta ɖesiaɖe dzi la ɖɔ li tɔtrɔ ƒe hatsotso siwo woɖo ɖi 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>
Agbɔsɔsɔmewo
Ðe nèdi be yeakpɔ abɔta siwo lolo wu alo esiwo le sue wua? Tsɔe kpe ɖe eŋu .btn-lg
alo .btn-sm
na lolome bubuwo.
<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>
Nuwɔametɔ ƒe nɔnɔme
Na abɔtawo nadze abe ɖe womele dɔ wɔm o ene to disabled
boolean nɔnɔme la tsɔtsɔ kpe ɖe <button>
element ɖesiaɖe ŋu me. Nuwɔametɔ ƒe abɔtawo wɔ pointer-events: none
dɔ ɖe, xe mɔ na hover kple dɔwɔwɔ ƒe nɔnɔmewo be woagadze egɔme o.
<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>
Nuwɔametɔ ƒe abɔta siwo zãa <a>
element la wɔa nu to vovo vie:
<a>
s medoa alɔdisabled
nɔnɔmea o, eyata ele be nàtsɔ.disabled
klass la akpe ɖe eŋu be wòadze abe nuwɔametɔ ene le nukpɔkpɔ me.- Wotsɔ atsyã aɖewo siwo asɔ na etsɔme la kpe ɖe eŋu be woawɔ nusiwo katã
pointer-events
le seke ƒe abɔtawo dzi la nuwɔametɔwoe. <a>
Ele be nuwɔametɔ ƒe abɔta siwo zãa nɔnɔmea nanɔ emearia-disabled="true"
be wòafia nɔnɔme si me element la le na kpekpeɖeŋu mɔ̃ɖaŋunuwo.<a>
Mele be nɔnɔmea nanɔ abɔta siwo zãa nuwɔametɔwo la me ohref
.
<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>
Kadodo ƒe dɔwɔwɔ ƒe nuxlɔ̃ame
Be nàƒo nu tso nɔnɔme siwo me wòle be nàdzra href
nɔnɔmea ɖo ɖe kadodo si wowɔ nuwɔametɔ dzi la, .disabled
klass la zãna pointer-events: none
tsɔ dzea agbagba be yeawɔ kadodo ƒe dɔwɔwɔ le <a>
s me nuwɔametɔe. De dzesii be womeɖo CSS ƒe nɔnɔme sia ɖe ɖoɖo nu na HTML haɖe o, gake egbegbe web-browserwo katã doa alɔe. Tsɔ kpe ɖe eŋu la, le browser siwo doa alɔ gɔ̃ hã me la, womekpɔa pointer-events: none
ŋusẽ ɖe keyboard dzi yiyi dzi o, si fia be keyboard zãla siwo kpɔa nu kple mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo ate ŋu awɔ kadodo siawo ŋudɔ kokoko. Eyata be nànɔ dedie la, tsɔ kpe ɖe aria-disabled="true"
, hã de tabindex="-1"
nɔnɔme aɖe kadodo siawo me be woaxe mɔ na wo be woagaxɔ keyboard ƒe susu o, eye nàzã JavaScript si wowɔ ɖe ɖoɖo nu atsɔ awɔ woƒe dɔwɔwɔ ŋudɔ kura.
<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>
Xɔ mɔ ɖe abɔtawo nu
Wɔ ŋuɖoɖo ƒe ƒuƒoƒo siwo keke blibo, “block buttons” abe esiwo le Bootstrap 4 me kple míaƒe ɖeɖefia kple dometsotso dɔwɔnuwo ƒe tsakatsaka. To utilities zazã ɖe button specific classes teƒe la, míekpɔ ŋusẽ geɖe wu ɖe dometsotso, ɖoɖowɔwɔ, kple nuwɔna siwo ɖoa nya ŋu dzi.
<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>
Le afisia la míewɔa tɔtrɔ si ɖoa nya ŋu, míedzea egɔme kple abɔta siwo woɖo ɖe wo nɔewo dzi le tsitrenu vaseɖe esime md
woagbã, afisi .d-md-block
wòxɔna ɖe .d-grid
klass la teƒe, si wɔnɛ be dɔwɔnua nyea nu gap-2
dzodzro. Trɔ wò browser ƒe lolome be nàkpɔ woatrɔ.
<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>
Àteŋu atrɔ asi le wò block buttons ƒe kekeme ŋu kple grid column width classes. Le kpɔɖeŋu me, ne èdi “block button” si keke afã la, zã .col-6
. Tsɔe ɖo titina le tsia dzi kple .mx-auto
, hã.
<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>
Woate ŋu azã dɔwɔnu bubuwo atsɔ atrɔ asi le abɔtawo ƒe ɖoɖo ŋu ne wole tsia dzi. Afisiae míetsɔ míaƒe ŋuɖoɖo ƒe kpɔɖeŋu si va yi eye míetsɔ flex utilities aɖewo kple margin utility kpe ɖe eŋu le button la dzi be wòaɖo abɔtaawo ɖe ɖoɖo nu le ɖusime ne womegaƒo ƒu o.
<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>
Abɔta ƒe kpeɖeŋutɔ
Button plugin la na be nàte ŋu awɔ on/off toggle button bɔbɔewo.
Trɔ asi le dukɔwo ŋu
Tsɔ kpe ɖe eŋu data-bs-toggle="button"
be nàtrɔ asi le abɔta aɖe ƒe active
nɔnɔme ŋu. Ne èle abɔta aɖe trɔm do ŋgɔ la, ele be nàtsɔ asi atsɔ .active
klass la akpe ɖe eŋu eye aria-pressed="true"
nàkpɔ egbɔ be wotsɔe yi na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu nyuie.
<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>
Mɔnuwo
Àteŋu awɔ abɔta ƒe kpɔɖeŋu kple abɔta ƒe xɔtula, le kpɔɖeŋu me:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
toggle |
Toggles push nɔnɔme. Enaa abɔta la dzena abe ɖe wowɔe ene. |
dispose |
Tsrɔ̃a element aɖe ƒe abɔta. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa) |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ button instance si do ƒome kple DOM element aɖe, àteŋu azãe ale:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Static mɔnu si trɔa button ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:bootstrap.Button.getOrCreateInstance(element) |
Le kpɔɖeŋu me, be nàtrɔ asi le abɔtawo katã ŋu
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass ƒe nyawo
Nusiwo trɔna
$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%;
Nusiwo wotsɔ tsakae
Mixin etɔ̃ li na buttons: button kple button outline variant mixins (wo ame evea siaa nɔ te ɖe $theme-colors
), kpakple button ƒe lolome 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 ƒe ƒuƒoƒo
Button variants (na edziedzi kple outline buttons) zãa woƒe mixins kple míaƒe $theme-colors
map tsɔ wɔa modifier classes le 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);
}
}