Qabduulee

Akkaataawwan qaree amala Bootstrap gochoota unkaalee, qaaqawwanii fi kkf keessatti deeggarsa hammangaa, haalataalee fi kkf hedduu waliin fayyadami.

Fuula kana irratti

Fakkeenyaaf

Bootstrap akkaataa qaree durtii ibsame hedduu of keessaa qaba, tokkoon tokkoon isaanii kaayyoo hiika mataa isaanii tajaajila, dabalataa muraasa to'annoo dabalataaf darbataman waliin.

html

<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-hiddengita waliin dhokatee.

Marfama barruu hanqisi

Yoo barruun qaree akka marfamu hin barbaanne, .text-nowrapgita gara qareetti dabaluu dandeessa. $btn-white-space: nowrapSass keessatti, tokkoon tokkoo qareedhaaf marfata barruu hanqisuuf saaguu dandeessa .

Mallattoolee buttooni

Gitoota elementii .btnwaliin 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.

Hidhata

html

<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.

html

<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>

Akkaataawwan qaree tokko tokko halluu fuulduraa ifa ta'e fayyadamu, fi walfaallaa gahaa qabaachuuf duubbee dukkanaa'aa qofa irratti fayyadamuu qaba.

Saayiziiwwan

Buttons gurguddoo moo xixiqqoo ta'an barbaadduu? Dabalaa .btn-lgykn .btn-smsafara dabalataaf.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Jijjiiramoota CSS waliin safara amala mataa keetii illee roll gochuu dandeessa:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Haala hanqifame

disabledAmala boolii qaama kamiyyuutti dabaluudhaan qareewwan sochii hin qabne akka fakkaatan godhi <button>. Qabduulee hanqifaman pointer-events: noneirratti hojiirra oolaniiru, hover fi haalata socho'aa akka hin kakaasne dhorka.

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" 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 gita disableddabaluu qabda ..disabled
Akkaataawwan gara fuula duraatti mijatoo ta'an tokko tokko hunda pointer-eventsqaree anchor irratti hanqisuuf hammatamaniiru.
Qabduulee hanqifaman fayyadaman haalata elementii gara teeknooloojiiwwan gargaaraatti agarsiisuuf amalli <a>of keessatti qabachuu qabu .aria-disabled="true"
Qabduulee hanqifaman fayyadaman amaloota hammachuu <a> hin qaban .href

Link jalqabaa Hidhata

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Of eeggannoo dalagaa walqabsiisaa

hrefHaalawwan amaloota hidhaa hanqifame irratti qabachuu qabdu uwwisuuf , .disabledgitaan dalagaa hidhaa s pointer-events: nonehanqisuuf yaaluuf fayyadama. <a>Hubadhu qabeentiin CSS kun ammallee HTML'f istaandaardii hin taane, garuu biraawzaroota ammayyaa hundi ni deeggaru. Dabalataanis, browsers that do support keessattillee pointer-events: none, 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 aria-disabled="true", akkasumas tabindex="-1"xiyyeeffannoo kiiboordii akka hin fudhanne gochuuf amaloota hidhannoowwan kana irratti dabali, fi JaavaScript amala fayyadamii dalagaa isaanii guutummaatti hanqisuuf.

Link jalqabaa Hidhata

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

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.

html

<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 mdqabxii ciccituutti, bakka gita .d-md-blockbakka bu'utti .d-grid, kanaanis faayilii nullify goona gap-2. Jijjiirraa isaanii arguuf guddina biraawzari kee jijjiiri.

html

<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.

html

<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.

html

<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.

Mul'ataan, qaree jijjiirraa kun qaree jijjiirraa sanduuqa filannoo wajjin walfakkaata . Haa ta’u malee, isaan teeknooloojiiwwan gargaarsaatiin haala adda ta’een dabarfamu: jijjiiramoonni saanduqa filannoo dubbistoota iskiriiniitiin akka “mallatteeffaman”/“hin mallatteeffamne” ta’anii ni beeksifamu (sababni isaas, mul’atanis, bu’uuraan ammallee saanduqa filannoo waan ta’aniif), qareewwan jijjiirraa kun garuu akka “button”/“button dhiibame”. Filannoon malawwan lamaan kana gidduu jiru gosa jijjiirraa ati uumtu irratti hundaa'a, fi jijjiirraan fayyadamtootaaf hiika qabaachuu fi dhiisuu isaa yeroo akka sanduuqa filannootti ykn akka qaree qabatamaatti beeksifamu.

Toggle mootummoota

data-bs-toggle="button"Haalata qaree tokkoo jijjiiruuf dabali active. Yoo qaree tokko dursitee jijjiiraa jirta ta'e, .activegita harkaan dabaluu fi aria-pressed="true" teeknooloojiiwwan gargaarsaaf haala sirrii ta'een akka darbu mirkaneessuuf.

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

Hidhaa jijjiirraa Hidhaa jijjiirraa socho'aa Hidhaa jijjiirraa hanqifame

html

<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>

Malawwan

Ijaarsa qaree waliin fakkeenya qaree uumuu dandeessa, fakkeenyaaf:

const bsButton = new bootstrap.Button('#myButton')

Mala	Ibsa
`dispose`	Qabduu elementii tokkoo balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
`getInstance`	Mala istaatiksii kan fakkeenya qaree qaama 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 dandeessa: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Haala dhiibaa jijjiira. Qabduu bifa akka inni hojiirra oole kenna.

Fakkeenyaaf, qaree hunda jijjiiruuf

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS jedhamuun beekama

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama itti dhiyaannaa jijjiiramoota CSS Bootstrap guddachaa jiranitti, qaree amma jijjiiramoota CSS naannoo on fayyadama .btndhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Tokkoon tokkoon .btn-*gita fooyyessaa jijjiiramoota CSS barbaachisoo ta'an seera CSS dabalataa button-variant(), button-outline-variant(), fi button-size()mixins keenyaan xiqqeessuuf fooyyessa.

Fakkeenyi .btn-*gita fooyyessaa amala ijaaruu akkuma nuti qareewwan docs keenyaaf adda ta'aniif goonu jijjiiramoota CSS Bootstrap's walmakaa jijjiiramoota CSS fi Sass mataa keenyaatiin irra deebi'anii ramaduudhaan kunooti.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Jijjiiramoota Sass

$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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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%;

Sass 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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass loopoota jedhaman

$theme-colorsGaraagarummaan 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} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}