in English

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

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

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.

<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

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.

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

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

Of eeggannoo dalagaa walqabsiisaa

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

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

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 mdqabxii ciccituutti, bakka gita .d-md-blockbakka 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.

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.

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

Hidhaa jijjiirraa Hidhaa jijjiirraa socho'aa Hidhaa jijjiirraa hanqifame

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

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-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} {
    @include button-variant($value, $value);
  }
}

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