Butɔnw
Baara kɛ ni Bootstrap ka butɔni cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye, walasa ka walew kɛ sɛbɛnw kɔnɔ, kumasenw kɔnɔ, ani fɛn wɛrɛw la ni dɛmɛ ye hakɛ caman, cogoyaw ani fɛn wɛrɛw la.
Misaliw
Bootstrap kɔnɔ, butɔni cogoya damadɔ minnu ɲɛfɔlen don ka kɔn, olu kelen-kelen bɛɛ bɛ baara kɛ n’u yɛrɛ ka kɔrɔko ye, ni farankan damadɔ ye minnu bɛ fili a kɔnɔ walasa ka kunnafoni caman sɔrɔ.
<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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma
Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hidden
kalan ye.
Sɛbɛnniw sirili bali
N’i t’a fɛ butɔni sɛbɛnni ka siri, i bɛ se ka .text-nowrap
kalan fara butɔni kan. Sass kɔnɔ, i bɛ se $btn-white-space: nowrap
ka sɛbɛnniw sirili bali butɔni kelen-kelen bɛɛ kama.
Butɔnw ka taamasiyɛnw
Kalansow .btn
dabɔra ka baara kɛ ni <button>
element ye. Nka, i bɛ Se fana ka baara Kɛ ni o kàlanw ye <a>
walima <input>
fɛn dɔw kan (hali n’a y’a Sɔrɔ navigatɔrɔ dɔw bɛ Se ka baarakɛcogo dɔ Kɛ min tɛ kelen ye dɔɔnin).
Ni baara bɛ kɛ ni butɔni kalasi ye <a>
fɛnw kan minnu bɛ kɛ ka ɲɛ kɔnɔ baarakɛcogo daminɛ (i n’a fɔ kɔnɔkow bɛrɛbɛrɛ), sanni ka ɲɔgɔn cɛsiri ni ɲɛ kuraw walima yɔrɔ kuraw ye ɲɛ sisan kɔnɔ, o jɛgɛnsiraw ka kan ka di a role="button"
ma walasa k’u kuntilenna lase cogo bɛnnen na dɛmɛ fɛɛrɛw ma i n’a fɔ ekran kalanbagaw.
<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">
Butɔnw labɛncogo
I mago bɛ butɔni na, nka u tɛ na ni kɔkanna kulɛri gɛlɛnw ye wa? Aw bɛ fɛn minnu bɛ fɛn caman sɛmɛntiya, olu bila u nɔ na ni .btn-outline-*
minnu ye walasa ka kɔkanna jaw ni kulɛriw bɛɛ bɔ butɔni o butɔni kan.
<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>
Bonyaw
Fancy butɔni belebelebaw walima fitininw? Aw bɛ a fara a kan .btn-lg
walima .btn-sm
walasa ka hakɛ wɛrɛw fara a kan.
<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>
Hakilila-jɔ-cogo
Aw bɛ butɔni kɛ i n’a fɔ baarakɛbaliw ni disabled
boolean fɛnsɛbɛnni farali ye fɛn o <button>
fɛn kan. Butɔnw ye pointer-events: none
baara kɛ ni, ka hover ni active states bali ka daminɛ.
<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>
Butɔn minnu bɛ baara kɛ ni <a>
fɛn ye, olu bɛ baara kɛ ni fɛn ye min tɛ kelen ye dɔɔnin:
<a>
s tɛ fɛn in dɛmɛdisabled
, o la i ka kan ka.disabled
kalasi fara a kan walasa a ka kɛ i n’a fɔ a tɛ se ka baara kɛ.- Siti dɔw bɛ yen minnu bɛ se ka kɛ siniɲɛsigi ye walasa ka bɛɛ bali
pointer-events
ankɔri butɔni kan. - Butɔn minnu bɛ baara kɛ ni bololabaarakɛlaw
<a>
ye, olu ka kan ka kɛaria-disabled="true"
ni fɛn ye min bɛ fɛn in cogoya jira dɛmɛni fɛɛrɛw la. - Butɔn minnu bɛ baara kɛ ni bali ye , olu
<a>
man kan kahref
kɛ ni o fɛn ye.
<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 baarakɛcogo lasɔmini
Walasa ka ko minnu Dabɔ i ka kan ka fɛn in To ' href
jyɛn-yɔrɔ-ko-yɔrɔ-ko la, .disabled
kàlanso bɛ baara Kɛ pointer-events: none
k'a ɲini ka 'jyɛn-yɔrɔ-ko baarakɛcogo bali <a>
s. A kɔlɔsi ko nin CSS nafolo in ma labɛn fɔlɔ HTML kama, nka bi navigatɔrɔw bɛɛ b’a dɛmɛ. Ka fara o kan, hali navigatɛriw kɔnɔ minnu bɛ dɛmɛ don pointer-events: none
, klaviyeti taamacogo tɛ tiɲɛ, o kɔrɔ ye ko klaviyeti ɲɛnatɔw ni dɛmɛn fɛɛrɛw baarakɛlaw bɛna se ka o jɛgɛnsiraw baara hali bi. O la walasa ka lakana, ka fara aria-disabled="true"
, fana ka fɛn dɔ tabindex="-1"
Dòn o jɛgɛnsiraw kan walasa k’u bali ka klaviyeti sinsinnan Sɔrɔ, ani ka JavaScript ladamulen Kɛ k’u ka baarakɛcogo Dabila pewu.
<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>
Butɔnw bloki
Aw bɛ jaabiw dilan ni u bonya dafalen ye, “block buttons” i n’a fɔ Bootstrap 4 kɔnɔ taw ni an ka jiralan ni gap nafalanw ɲagaminen ye. Ni an bɛ baara kɛ ni nafamafɛnw ye butɔni kɛrɛnkɛrɛnnenw ka kalasiw nɔ na, an bɛ se ka fanga sɔrɔ kosɛbɛ yɔrɔjan, ɲɔgɔndan ani jaabi kɛcogo kan.
<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>
Yan an bɛ jaabi-yɔrɔ-ko dɔ Dabɔ, k’a Daminɛ ni butɔni jɔlenw ye fo ka Se md
kariyɔrɔ ma, yɔrɔ min bɛ kalasi .d-md-block
nɔnabila , o cogo la ka nafalan in Kɛ fu ye. I ka navigatɛri bonya caman sɛmɛntiya walisa k’a ye k’u bɛ fɛn caman Changer..d-grid
gap-2
<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>
Aw bɛ se ka aw ka bloki butɔni bonya ladilan ni grid column width classes ye. Misali la, “blɔki butɔni” tilancɛ bonya kama, baara kɛ ni .col-6
. A cɛmancɛ la ni .mx-auto
, fana ye.
<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>
Nafa wɛrɛw bɛ se ka kɛ ka butɔniw labɛncogo ladilan ni u bɛ jɛgɛn. Yan an y'an ka jaabi misali tɛmɛnen Tà k'a Fàra flex utilité dɔw kan ani margin utilité dɔ kan butɔni kan ka butɔniw Labɛn kinin fɛ n'u ma Sìgi ɲɔgɔn kan tugun.
<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>
Butɔnw ka plugin
Butɔn plugin bɛ a to i ka se ka on/off toggle button nɔgɔmanw dilan.
Toggle jamanaw
A fara a kan data-bs-toggle="button"
ka butɔni dɔ active
cogoya wuli. N’i bɛ butɔni dɔ wuli ka kɔn, i ka kan ka .active
kalansen fara a kan i bolo fɛ ani aria-pressed="true"
k’a lajɛ k’a lase cogo bɛnnen na dɛmɛni fɛɛrɛw ma.
<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>
Fɛɛrɛw
Aw bɛ se ka butɔni misali dɔ dabɔ ni butɔni dilanbaga ye, misali la:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Kɛcogo | Cogojirali |
---|---|
toggle |
Toggles push jamana. A bɛ butɔni di i n’a fɔ a bɛ baara la. |
dispose |
A bɛ element dɔ ka butɔni tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan) |
getInstance |
Static method min b’a To i bɛ se ka butɔni instance Sɔrɔ min bɛ tali Kɛ DOM element dɔ la, i bɛ Se ka baara Kɛ n’a ye nin cogo in na:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Fɛɛrɛ jɔlen min bɛ butɔni misali dɔ Lasegin min bɛ tali Kɛ DOM fɛn dɔ la walima ka kura Dabɔ n'a ma Daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la:bootstrap.Button.getOrCreateInstance(element) |
Misali la, ka butɔni bɛɛ wuli
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass ye
Yɛlɛma-yɛlɛmaw
$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%;
Mixinw (Mixins).
Mixin saba bɛ butɔni kama: butɔni ani butɔni outline variant mixin (u fila bɛɛ sinsinnen bɛ $theme-colors
), ka fara butɔni hakɛ mixin kan.
@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);
}
Loopuw
Butɔn suguya caman (butɔni basigilenw ni jatebɔlanw kama) bɛ baara Kɛ n’u ka mixins kelen-kelenw ye n’an ka $theme-colors
karti ye walasa ka fɛn caman sɛgɛsɛgɛli Kɛ 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);
}
}