Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Vifungo

Tumia mitindo maalum ya vitufe 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 hutupwa kwa udhibiti zaidi.

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

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.

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>
Baadhi ya mitindo ya vitufe hutumia rangi ya mandhari ya mbele yenye mwanga kiasi, 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.

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>

Unaweza hata kugeuza saizi yako mwenyewe na anuwai za CSS:

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>

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.

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>

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 vinavyotumiwa <a>vinapaswa kujumuisha aria-disabled="true"sifa ya kuonyesha hali ya kipengele kwa teknolojia za usaidizi.
  • Vifungo vilivyozimwa kwa kutumia <a> haipaswi kujumuisha hrefsifa.
Kiungo cha msingi Kiungo
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>

Ili kufunika kesi ambapo lazima uweke hrefsifa kwenye kiungo kilichozimwa, .disableddarasa hutumia pointer-events: nonekujaribu kuzima utendakazi wa kiungo cha <a>s. Kumbuka kuwa kipengele hiki cha CSS bado hakijasanifiwa kwa HTML, lakini vivinjari vyote vya kisasa vinaiunga mkono. 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.

Kiungo cha msingi Kiungo
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>

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 vitufe vya madarasa mahususi, tuna udhibiti mkubwa zaidi wa nafasi, upangaji na tabia za kuitikia.

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>

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.

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>

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.

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>

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.

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>

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.

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>
Geuza kiungo Kiungo cha kugeuza kinachotumika Kiungo cha kugeuza kimezimwa
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>

Mbinu

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

const bsButton = new bootstrap.Button('#myButton')
Njia Maelezo
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):.
toggle Hugeuza hali ya kusukuma. Hutoa kitufe mwonekano kwamba kimewashwa.

Kwa mfano, kugeuza vifungo vyote

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

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, vibonye sasa vinatumia viwezo vya ndani vya CSS .btnili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$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);

Kila .btn-*darasa la kirekebishaji husasisha vigeu vinavyofaa vya CSS ili kupunguza sheria za ziada za CSS na yetu button-variant(), button-outline-variant(), na button-size()michanganyiko.

Huu hapa ni mfano wa kuunda .btn-*darasa la kirekebishaji maalum kama tunavyofanya kwa vitufe vya kipekee kwa hati zetu kwa kugawa upya vigeu vya CSS vya Bootstrap na mchanganyiko wa anuwai zetu za CSS na Sass.

.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%)};
}

Vigezo vya 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%;

Mchanganyiko wa Sass

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)
) {
  --#{$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 loops

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