in English

Vifungo

Tumia mitindo ya vitufe maalum vya Bootstrap kwa vitendo katika fomu, mazungumzo, na zaidi kwa usaidizi wa saizi nyingi, majimbo, na zaidi.

Katika ukurasa huu

Mifano

Bootstrap inajumuisha mitindo kadhaa ya vitufe iliyofafanuliwa awali, kila moja ikitumikia madhumuni yake ya kisemantiki, na nyongeza chache zilizotupwa kwa udhibiti zaidi.

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

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Zima ufungaji wa maandishi

Ikiwa hutaki maandishi ya kitufe kufungwa, unaweza kuongeza .text-nowrapdarasa kwenye kitufe. Katika Sass, unaweza kuweka $btn-white-space: nowrapkuzima ufungaji maandishi kwa kila kitufe.

Lebo za kitufe

Madarasa .btnyameundwa kutumiwa na <button>kipengee. Hata hivyo, unaweza pia kutumia madarasa haya kwenye <a>au <input>vipengele (ingawa baadhi ya vivinjari vinaweza kutumia utoaji tofauti kidogo).

Unapotumia madarasa ya vitufe kwenye <a>vipengee vinavyotumika kuanzisha utendakazi wa ndani ya ukurasa (kama vile maudhui yanayoporomoka), badala ya kuunganisha kwa kurasa mpya au sehemu ndani ya ukurasa wa sasa, viungo hivi vinapaswa kutolewa role="button"ili kuwasilisha madhumuni yao ipasavyo kwa teknolojia saidizi kama vile. visoma skrini.

Kiungo

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

Vifungo vya muhtasari

Je, unahitaji kitufe, lakini si rangi nyingi za mandharinyuma wanazoleta? Badilisha darasa za kirekebishaji chaguo-msingi na .btn-outline-*zile ili kuondoa picha na rangi zote za mandharinyuma kwenye kitufe chochote.

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

Baadhi ya mitindo ya vitufe hutumia rangi ya mbele kidogo isiyo na mwanga, na inapaswa kutumika tu kwenye mandharinyuma meusi ili kuwa na utofautishaji wa kutosha.

Ukubwa

Ungependa vitufe vikubwa au vidogo? Ongeza .btn-lgau .btn-smkwa saizi za ziada.

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

Jimbo la walemavu

Fanya vitufe vionekane visivyotumika kwa kuongeza disabledsifa ya boolean kwa <button>kipengele chochote. Vifungo vilivyozimwa vimetumika pointer-events: nonekwa, kuzuia hali ya kuelea na amilifu kuwasha.

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

Vifungo vilivyozimwa kwa kutumia <a>kipengele hufanya tofauti kidogo:

<a>s haiungi mkono disabledsifa, kwa hivyo lazima uongeze .disableddarasa ili kuifanya ionekane kuwa imelemazwa.
Baadhi ya mitindo ifaayo siku zijazo imejumuishwa ili kuzima zote pointer-eventskwenye vitufe vya kushikilia.
Vifungo vilivyozimwa lazima vijumuishe aria-disabled="true"sifa ya kuonyesha hali ya kipengele kwa teknolojia za usaidizi.

Kiungo cha msingi Kiungo

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

Tahadhari ya utendaji wa kiungo

Darasa .disabledhutumia pointer-events: nonekujaribu kuzima utendakazi wa kiunganishi cha <a>s, lakini sifa hiyo ya CSS bado haijasawazishwa. Kwa kuongeza, hata katika vivinjari vinavyotumia pointer-events: none, urambazaji wa kibodi bado haujaathiriwa, kumaanisha kuwa watumiaji wa kibodi wanaoonekana na watumiaji wa teknolojia saidizi bado wataweza kuwezesha viungo hivi. Kwa hivyo kuwa salama, pamoja na aria-disabled="true", pia ni pamoja na tabindex="-1"sifa kwenye viungo hivi ili kuvizuia kupokea umakini wa kibodi, na tumia JavaScript maalum kuzima utendakazi wao kabisa.

Vifungo vya kuzuia

Unda rafu zinazojibu za upana kamili, "vitufe vya kuzuia" kama vile vilivyo kwenye Bootstrap 4 na mchanganyiko wa huduma zetu za kuonyesha na pengo. Kwa kutumia huduma badala ya madarasa maalum ya vitufe, tuna udhibiti mkubwa zaidi wa nafasi, upangaji na tabia za kuitikia.

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

Hapa tunaunda tofauti inayoitikia, kuanzia na vitufe vilivyopangwa kiwima hadi sehemu ya mdkukatika, ambapo .d-md-blockinachukua nafasi ya .d-griddarasa, na hivyo kubatilisha gap-2matumizi. Badilisha ukubwa wa kivinjari chako ili kuona kikibadilika.

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

Unaweza kurekebisha upana wa vitufe vyako vya kuzuia kwa madarasa ya upana wa safu wima ya gridi. Kwa mfano, kwa "kifungo cha kuzuia" cha upana wa nusu, tumia .col-6. Weka mlalo na .mx-auto, pia.

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

Huduma za ziada zinaweza kutumika kurekebisha upangaji wa vitufe wakati wa mlalo. Hapa tumechukua mfano wetu wa awali wa mwitikio na kuongeza baadhi ya huduma zinazonyumbulika na matumizi ya ukingo kwenye kitufe ili kupanga vitufe kulia vikiwa havijapangwa tena.

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

Kitufe programu-jalizi

Programu-jalizi ya vitufe hukuruhusu kuunda vitufe rahisi vya kuwasha/kuzima.

Kwa mwonekano, vitufe hivi vya kugeuza vinafanana na vitufe vya kugeuza vya kisanduku cha kuteua . Hata hivyo, huwasilishwa kwa njia tofauti na teknolojia saidizi: vigeuza kisanduku cha kuteua vitatangazwa na visoma skrini kuwa "vimechaguliwa"/"havijatiwa alama" (kwa kuwa, licha ya mwonekano wao, kimsingi bado ni visanduku vya kuteua), ilhali vitufe hivi vya kugeuza vitatangazwa kama "kifungo"/"kitufe kimebonyezwa". Chaguo kati ya mbinu hizi mbili itategemea aina ya kigeuza unachounda, na kama kigeuza kitakuwa na maana kwa watumiaji kinapotangazwa kama kisanduku cha kuteua au kama kitufe halisi.

Geuza majimbo

Ongeza data-bs-toggle="button"ili kugeuza hali ya kitufe active. Ikiwa unageuza kitufe mapema, lazima uongeze .activedarasa wewe mwenyewe na aria-pressed="true" kuhakikisha kuwa linawasilishwa ipasavyo kwa teknolojia saidizi.

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

Geuza kiungo Kiungo cha kugeuza kinachotumika Kiungo cha kugeuza kimezimwa

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

Mbinu

Unaweza kuunda mfano wa kifungo na mjenzi wa kifungo, kwa mfano:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Njia	Maelezo
`toggle`	Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.
`dispose`	Huharibu kitufe cha kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM)
`getInstance`	Njia tuli ambayo hukuruhusu kupata mfano wa kitufe kinachohusishwa na kipengee cha DOM, unaweza kuitumia kama hii:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Mbinu tuli ambayo inarejesha mfano wa kitufe kinachohusishwa na kipengee cha DOM au kuunda kipya ikiwa hakijaanzishwa. Unaweza kuitumia kama hii:`bootstrap.Button.getOrCreateInstance(element)`

Kwa mfano, kugeuza vifungo vyote

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Vigezo

$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%;

Mchanganyiko

Kuna michanganyiko mitatu ya vitufe: michanganyiko ya vitufe na muhtasari wa lahaja (zote mbili zikizingatia $theme-colors), pamoja na mchanganyiko wa ukubwa wa kitufe.

@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);
}

Vitanzi

Vibadala vya vitufe (kwa vitufe vya kawaida na vya muhtasari) hutumia michanganyiko yao husika na $theme-colorsramani yetu ili kutoa madarasa ya kurekebisha katika 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);
  }
}