Qabduulee
Akkaataawwan qaree amala Bootstrap gochoota unkaalee, qaaqawwanii fi kkf keessatti deeggarsa hammangaa, haalataalee fi kkf hedduu waliin fayyadami.
Fakkeenyaaf
Bootstrap akkaataa qaree durtii ibsame hedduu of keessatti qabata, tokkoon tokkoon isaanii kaayyoo hiika mataa isaanii tajaajilu, dabalataa muraasa to'annoo dabalataaf darbataman waliin.
<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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hidden
gita waliin dhokatee.
Marfama barruu hanqisi
Yoo barruun qaree akka marfamu hin barbaanne, .text-nowrap
gita gara qareetti dabaluu dandeessa. $btn-white-space: nowrap
Sass keessatti, tokkoon tokkoo qareedhaaf marfata barruu hanqisuuf saaguu dandeessa .
Mallattoolee buttooni
Gitoota elementii .btn
waliin akka fayyadamaniif qophaa'aniiru . Haa ta'u malee, gitaalee kana irratti ykn elementoota <button>
irrattis fayyadamuu dandeessa (biraazaroonni tokko tokko agarsiisa xiqqoo adda ta'e hojiirra oolchuu danda'us).<a>
<input>
Yeroo kutaalee buttooni <a>
elementoota hojii fuula keessaa kakaasuuf fayyadaman irratti fayyadamnu (akka qabiyyee kuffisuu), fuula haaraa ykn kutaalee fuula ammaa keessa jiran waliin walqabsiisuu irra, hidhamtoonni kun role="button"
kaayyoo isaanii haala sirrii ta'een teknooloojiiwwan gargaaraa kanneen akka dubbistoota iskiriinii.
<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">
Qabduulee sarara
Button barbaachisa, garuu halluu duubbee hefty isaan fidan miti? Gitoota fooyyessaa durtii .btn-outline-*
kanneen fakkiiwwanii fi halluuwwan duubbee hunda qaree kamiyyuu irratti haquuf bakka buusi.
<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>
Saayiziiwwan
Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? Dabalaa .btn-lg
ykn .btn-sm
safara dabalataaf.
<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>
Haala hanqifame
disabled
Amala boolii qaama kamiyyuutti dabaluudhaan qareewwan sochii hin qabne akka fakkaatan godhi <button>
. Qabduulee hanqifaman pointer-events: none
irratti hojii irra oolaniiru, hover fi haalata socho'aa akka hin kakaasne dhorka.
<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>
Qabduulee hanqifaman <a>
elementii fayyadamuun xiqqoo adda ta'ee amala qabu:
<a>
s amallicha hin deeggaran , kanaafuu mul'ataan akka hanqifame mul'atu gochuuf gitadisabled
dabaluu qabda ..disabled
- Akkaataawwan gara fuula duraatti mijatoo ta'an tokko tokko hunda
pointer-events
qaree anchor irratti hanqisuuf hammatamaniiru. - Qabduulee hanqifaman
aria-disabled="true"
haala elementii gara teeknooloojiiwwan gargaarsaatti agarsiisuuf amallicha hammachuu qabu.
<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>
Of eeggannoo dalagaa walqabsiisaa
Gitni dalagaa walqabsiisaa s hanqisuuf yaaluuf .disabled
fayyadama , garuu qabeentiin CSS sun ammallee istaandaardii hin taane. Dabalataanis, browsers that do support keessattillee , keyboard navigation hin tuqamne, jechuunis fayyadamtoonni keyboard ijaan qabaniifi fayyadamtoonni teknooloojii gargaarsaa ammallee hidhannoowwan kana hojiirra oolchuu ni danda'u jechuudha. Kanaafuu nageenya qabaachuuf, dabalataan , akkasumas xiyyeeffannoo kiiboordii akka hin fudhanne gochuuf amaloota hidhannoowwan kana irratti dabali, fi JaavaScript amala fayyadamii dalagaa isaanii guutummaatti hanqisuuf.pointer-events: none
<a>
pointer-events: none
aria-disabled="true"
tabindex="-1"
Qabduulee ugguruu
Tuullaa deebii kennuu danda’u kan bal’ina guutuu, “block buttons” akka kanneen Bootstrap 4 keessatti argaman agarsiisa keenyaa fi faayidaa qaawwaa walitti makuun uumi. Gitoota addaa button osoo hin taane faayidaa fayyadamuun, addaan fageenya, qindaa'ina, fi amala deebii kennuu irratti to'annoo baay'ee guddaa qabna.
<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>
Asitti jijjiirama deebii kennuu uumna, qareewwan vertikaaliin tuulaman irraa eegalee hanga md
qabxii ciccituutti, bakka gita .d-md-block
bakka bu'utti .d-grid
, kanaanis faayilii nullify goona gap-2
. Jijjiirraa isaanii arguuf guddina biraawzari kee jijjiiri.
<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>
Bal'ina qaree uggura kee gita bal'ina tarjaa tarjaa waliin sirreessuu dandeessa. Fakkeenyaaf, “qaree ugguraa” walakkaa bal’inaaf, fayyadami .col-6
. Giddugaleessa godhaa horizontally .mx-auto
, too.
<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>
Faayidaaleen dabalataa qindaa'ina qaree yeroo qajeelaa sirreessuuf fayyadamuun ni danda'ama. Asitti fakkeenya deebii kennuu keenya duraanii fudhannee faayidaa flex tokko tokkoo fi faayidaa margina button irratti daballee yeroo isaan kana booda hin tuulamne buttons mirga qindeessuuf.
<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>
Ijaarsa buttooni
Ijaarsi qaree qaree jijjiirraa salphaa ibsuu/cufuu uumuuf si dandeessisa.
Toggle mootummoota
data-bs-toggle="button"
Haalata qaree tokkoo jijjiiruuf dabali active
. Yoo qaree tokko dursitee jijjiiraa jirta ta'e, .active
gita harkaan dabaluu fi aria-pressed="true"
teeknooloojiiwwan gargaarsaaf haala sirrii ta'een akka darbu mirkaneessuuf.
<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>
Malawwan
Ijaarsa qaree waliin fakkeenya qaree uumuu dandeessa, fakkeenyaaf:
var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Mala | Ibsa |
---|---|
toggle |
Haala dhiibaa jijjiira. Qabduu bifa akka inni hojiirra oole kenna. |
dispose |
Qabduu elementii tokkoo balleessa. (Deetaa qaama DOM irratti kuufame ni haqa) |
getInstance |
Mala static kan fakkeenya button elementii DOM waliin walqabate argachuuf si dandeessisu, akkasitti fayyadamuu dandeessa:bootstrap.Button.getInstance(element) |
getOrCreateInstance |
Mala istaatiksii kan fakkeenya qaree qaama DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumuu. Akkasitti fayyadamuu dandeessu:bootstrap.Button.getOrCreateInstance(element) |
Fakkeenyaaf, qaree hunda jijjiiruuf
var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
var button = new bootstrap.Button(button)
button.toggle()
})
Sass jedhama
Jijjiiramoota
$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 jedhaman
Qabduudhaaf mixins sadii jiru: mixins garaagarummaa button fi button outline (lamaanuu irratti hundaa'u $theme-colors
), dabalataan mixin guddina button.
@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);
}
Looppiiwwan
$theme-colors
Garaagarummaan qaree (qaree idilee fi sararaaf) gita fooyyessaa keessatti uumuuf kaartaa keenya waliin makaa isaanii fayyadamu 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);
}
}