in English

Buttons te a awm

Form, dialog leh thil dang danga action hrang hrang atan Bootstrap-a custom button styles hmang la, size hrang hrang, state leh thil dang tam tak support rawh.

He page ah hian

Entirna te

Bootstrap hian button style hrang hrang predefined a keng tel a, pakhat zel hian semantic purpose an nei vek a, control tam zawk neih nan extra tlemte an paih lut bawk.

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

Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .visually-hiddenclass nena thup belh thuziak ang chi a ni.

Text wrapping kha tihtawp theih a ni

Button text wrap duh loh chuan .text-nowrapclass chu button ah hian add theih a ni. $btn-white-space: nowrapSass ah chuan button tin tan text wrapping disable turin i set thei ang .

Button tags a awm bawk

Class te hi element .btnnena hman tur atana siam a ni . <button>Mahse, heng class te hi on <a>or <input>elements ah pawh i hmang thei bawk (browser thenkhat chuan rendering danglam deuh deuh an hmang thei nachungin).

<a>In -page functionality (collapsing content ang chi) trigger nana hman elements -a button class hman hunah , tuna page chhunga page thar emaw section thar emaw link ai chuan, heng link te hi a pek tur a ni a role="button", an thiltum chu assistive technology ang chi te hnena a dik taka thlen theih nan screen reader te a awm bawk.

Zawm

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

Outline button te chu a rawn lang a

Button mamawh, mahse hefty background colors an rawn ken te kha a ni lo em ni? Default modifier class te chu .btn-outline-*button eng pawha background image leh color zawng zawng paih vek theihna tur te nen thlak leh rawh.

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

Button style thenkhatah chuan foreground color light deuh deuh an hmang a, contrast tling tak neih theih nan background dum takah chauh hman tur a ni.

Size hrang hrang

Button lian zawk emaw te zawk emaw i duh em? Add .btn-lgemaw .btn-smsize dang atan emaw.

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

Disabled state a ni

Element disabledeng pawhah boolean attribute dahin button te chu inactive angin siam rawh . <button>Disabled buttons te pointer-events: nonechu a apply tawh a, hover leh active state te trigger theih lohna tur a ni.

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

Element hmanga disabled button te chu <a>an awm dan a danglam deuh hlek a:

<a>s hian attribute an support lo a , chuvangin visually disabled anga lang turin class chu disabledi add a ngai a ni..disabled
Nakin lawka hman theih tur style thenkhat chu pointer-eventsanchor button-a awm zawng zawng tihtawp theihna tur a awm bawk.
Disabled button-ah aria-disabled="true"chuan assistive technology-te hnena element dinhmun tarlanna attribute a awm tur a ni.

Primary link a ni Zawm

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

Link hnathawh dan tur caveat

.disabledClass hian s-a link functionality tihtawp tumna atan a hmang a pointer-events: none, <a>mahse chu CSS property chu standardized a la ni lo. Chu bakah, browser that do support pointer-events: none-ah pawh keyboard navigation chu a nghawng lo reng a, chu chu keyboard hmu thei leh assistive technology hmangtute chuan heng link te hi an la activate thei dawn tihna a ni. So to be safe, in addition to , heng links-ah hian keyboard focus an dawn loh nan attribute aria-disabled="true"dah tel bawk la, custom JavaScript hmangin an functionality chu tihtawp vek rawh.tabindex="-1"

Block button a awm bawk

Kan display leh gap utilities mix hmangin Bootstrap 4-a awm ang chi full-width, “block button” responsive stack siam rawh. Button bik class ai chuan utilities hmang hian spacing, alignment, leh responsive behavior-ah te thuneihna nasa zawk kan nei a ni.

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

Hetah hian responsive variation kan siam a, vertically stacked buttons atanga tanin mdbreakpoint thlengin, chutah chuan class .d-md-blocka thlak a , chutiang chuan utility .d-gridchu a nullify a ni. gap-2An inthlak danglam theih nan i browser size thlak rawh.

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

I block buttons zau zawng chu grid column width class hmangin i siamrem thei bawk. Entirnan, a chanve zau “block button” atan chuan .col-6. Centre chu horizontal-in .mx-auto, pawh a ni.

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

Utilities dang hmangin buttons alignment chu horizontal a nih chuan siamrem theih a ni. Hetah hian kan responsive example hmasa kha kan la a, flex utility thenkhat leh button-ah margin utility kan dah belh a, button-te chu an stack tawh loh hunah right align turin kan dah bawk.

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

Button plugin a awm bawk

Button plugin hmang hian on/off toggle button awlsam tak tak siam theih a ni.

Hmuh theih chuan heng toggle button te hi checkbox toggle button te nen an inang vek a ni . Mahse, assistive technology hmangin an hrilhfiah dan a danglam a: checkbox toggles te chu screen reader-te chuan “checked”/“not checked” tiin an puang ang (since, an hmel lan danah pawh, fundamentally still checkbox an nih tho avangin), chutih laiin heng toggle buttons te hi chutiang chuan an puang dawn a ni “button”/“button hmet” tih a ni. Heng approach pahnih inkara duhthlan tur hi i toggle siam chi hrang hrangah a innghat ang a, checkbox anga puan a nih hunah emaw, button tak tak anga puan a nih hunah emaw toggle hian users te tan awmzia a nei dawn em tih a innghat bawk ang.

Toggle state te chu

data-bs-toggle="button"Button pakhat dinhmun toggle turin add rawh active. Button i pre-toggling a nih chuan, .activeclass chu manual-in i add tur a ni a, assistive technology- te aria-pressed="true" hnena a dik taka a thlen theih nan.

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

Toggle link a awm bawk Active toggle link a awm bawk Toggle link kha tihtawp a ni

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

Thiltih dan tur

Button constructor hmangin button instance i siam thei a, entirnan:

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

Tihdan	Hrilhfiahna
`toggle`	Push state a tidanglam. Button chu a activate tawh angin a lang.
`dispose`	Element pakhat button a tichhia. (DOM element-a data dahkhawmte a paih chhuak)
`getInstance`	Static method hmanga DOM element nena inzawm button instance hmuh theihna tur, hetiang hian i hmang thei ang:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Static method chu DOM element nena inzawm button instance rawn pe chhuak emaw, initialised a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang:`bootstrap.Button.getOrCreateInstance(element)`

Entirnan, button zawng zawng toggle tur

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

Sass a ni

Variables te pawh a awm

$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 te a awm

Button tan mixin pathum a awm a, chungte chu button leh button outline variant mixin (an pahnih hian based on $theme-colors), chubakah button size mixin a awm bawk.

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

Loops te a awm

Button variant (regular leh outline button tan) chuan kan map nen an mixin hrang hrang hmangin $theme-colorsmodifier class te chu 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);
  }
}