in English

Likonopo

Sebelisa mekhoa ea tloaelo ea Bootstrap bakeng sa liketso ka mefuta, lipuisano, le tse ling ka tšehetso ea boholo bo fapaneng, linaha le tse ling.

Leqepheng lena

Mehlala

Bootstrap e kenyelletsa mefuta e 'maloa ea likonopo e boletsoeng esale pele, e' ngoe le e 'ngoe e sebeletsa sepheo sa eona sa semantic, e nang le litlatsetso tse' maloa tse kentsoeng bakeng sa taolo e eketsehileng.

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

Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .visually-hiddensehlopha.

Tlosa ho phuthela mongolo

Haeba u sa batle hore mongolo oa konopo o phutheloe, o ka eketsa .text-nowrapsehlopha ho konopo. Ho Sass, o ka seta $btn-white-space: nowrapho tima ho phuthela mongolo bakeng sa konopo ka 'ngoe.

Li-tag tsa konopo

Lihlopha .btnli etselitsoe ho sebelisoa le <button>element. Leha ho le joalo, u ka sebelisa litlelase tsena ho <a>kapa <input>likarolo (leha libatli tse ling li ka sebelisa phetolelo e fapaneng hanyane).

Ha o sebelisa li-button class ho <a>likarolo tse sebelisetsoang ho qala ts'ebetso ea leqephe (joalo ka litaba tse putlamang), ho fapana le ho hokahana le maqephe a macha kapa likarolo tse ka har'a leqephe la hajoale, likhokahano tsena li lokela ho fuoa monyetla oa role="button"ho fetisa sepheo sa tsona ka nepo ho mahlale a thusang joalo ka. babali ba skrine.

Sehokelo

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

Likonopo tsa moralo

Na u hloka konopo, empa eseng mebala e meholo eo ba e tlisang? Beha sebaka sa litlelase tsa li-default ka .btn-outline-*tse tla tlosa litšoantšo tsohle le mebala ho konopo efe kapa efe.

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

Mefuta e meng ea likonopo e sebelisa bokapele ba mebala e batlang e fokola, 'me e lokela ho sebelisoa feela bokaholimo bo lefifi e le hore ho be le phapang e lekaneng.

Boholo

U batla likonopo tse kholoanyane kapa tse nyane? Eketsa .btn-lgkapa .btn-smbakeng sa boholo bo eketsehileng.

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

Boemo ba bokooa

Etsa hore likonopo li shebahale li sa sebetse ka ho kenya disabledsemelo sa boolean nthong efe kapa efe <button>. Likonopo tse holofetseng li pointer-events: nonekentsoe ho, ho thibela hover le maemo a sebetsang hore a se ke a qala.

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

Likonopo tse holofetseng tse sebelisang <a>element li sebetsa ka tsela e fapaneng:

<a>s ha e tšehetse disabledtšobotsi, kahoo o tlameha ho eketsa .disabledsehlopha ho etsa hore e bonahale e holofetse.
Mefuta e meng ea bokamoso e kenyellelitsoe ho tima tsohle pointer-eventslikonopong tsa ankora.
Likonopo tse holofetseng li lokela ho kenyelletsa aria-disabled="true"tšobotsi ho bontša boemo ba element ho litheknoloji tse thusang.

Sehokelo sa mantlha Sehokelo

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

Khokahano ea ts'ebetso ea caveat

Sehlopha .disabledse sebelisa pointer-events: noneho leka ho tima ts'ebetso ea lihokelo tsa <a>s, empa thepa eo ea CSS ha e e-so be maemong. Ho feta moo, esita le ho li-browser tse tšehetsang pointer-events: none, ho tsamaea ha keyboard ho lula ho sa amehe, ho bolelang hore basebelisi ba li-keyboard ba boneng le basebelisi ba mahlale a thusang ba ntse ba tla khona ho kenya likhokahano tsena. E le hore u bolokehe, ho phaella ho aria-disabled="true", kenyelletsa tabindex="-1"tšobotsi ho lihokelo tsena ho ba thibela ho fumana tsepamiso ea keyboard, le ho sebelisa JavaScript e tloaelehileng ho tima ts'ebetso ea bona ka botlalo.

Thibela likonopo

Theha mekotla e arabelang ea bophara bo felletseng, "likonopo tse thibelang" joalo ka tse ho Bootstrap 4 ka motsoako oa lisebelisoa tsa rona tsa ponts'o le likheo. Ka ho sebelisa lisebelisoa ho e-na le lihlopha tse khethehileng tsa likonopo, re na le taolo e kholoanyane holim'a sebaka, ho tsamaisana le mekhoa ea ho arabela.

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

Mona re theha phapang e arabelang, ho qala ka li-buttons tse behiloeng ka holimo ho fihlela sebaka sa mdphomolo, moo .d-md-blockse nkelang .d-gridsehlopha sebaka, kahoo se senya gap-2ts'ebeliso. Fetola boholo ba sebatli sa hau ho bona hore se fetoha.

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

O ka fetola bophara ba li-buttons tsa block ka litlelase tsa bophara ba kholomo ea grid. Ka mohlala, bakeng sa "konopo" ea "block" ea bophara ba halofo, sebelisa .col-6. E behe ka har'a e tšekaletseng le .mx-auto, hape.

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

Lisebelisoa tse ling li ka sebelisoa ho lokisa tatellano ea likonopo ha li tšekaletse. Mona re nkile mohlala oa rona oa pele oa karabelo 'me re kentse lisebelisoa tse ling tse feto-fetohang le "margin utility" konopo ho hokahanya likonopo ha li se li sa hlophisoa.

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

Konopo plugin

Konopo ea plugin e u lumella ho theha likonopo tse bonolo tsa ho tima / ho tima.

Ka pono, likonopo tsena tsa toggle li ts'oana le li-button tsa ho toggle lebokose . Leha ho le joalo, li fetisoa ka tsela e fapaneng ke mahlale a thusang: li-toggles tsa lebokose la li-checkbox li tla phatlalatsoa ke babali ba skrineng e le "chekiloe" / "ha e hlahlojoe" (kaha, leha e le ponahalo ea bona, e ntse e le mabokose a hlahlobang), athe likonopo tsena tsa toggle li tla phatlalatsoa e le. “konopo”/“tlanya konopo”. Khetho pakeng tsa mekhoa ena e 'meli e tla itšetleha ka mofuta oa toggle eo u e etsang, le hore na toggle e tla utloahala ho basebelisi ha e phatlalatsoa e le lebokose la ho hlahloba kapa e le konopo ea sebele.

Fetolela linaha

Eketsa data-bs-toggle="button"ho fetola boemo ba konopo active. Haeba u topa konopo pele, u tlameha ho kenya klase ka bowena .activele ho aria-pressed="true" etsa bonnete ba hore e fetisetsoa ka nepo ho mahlale a thusang.

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

Fetolela sehokelo Sehokelo se sebetsang sa toggle Sehokelo sa toggle se koetsoe

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

Mekhoa

U ka etsa mohlala oa konopo ka moetsi oa likonopo, mohlala:

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

Mokhoa	Tlhaloso
`toggle`	E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.
`dispose`	E senya konopo ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
`getInstance`	Mokhoa o tsitsitseng o u lumellang ho fumana konopo ea konopo e amanang le ntho ea DOM, u ka e sebelisa ka tsela ena:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Mokhoa o tsitsitseng o khutlisetsang mohlala oa konopo o amanang le karolo ea DOM kapa ho theha e ncha haeba e sa qalisoa. U ka e sebelisa ka tsela ena:`bootstrap.Button.getOrCreateInstance(element)`

Ka mohlala, ho fetola likonopo tsohle

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

Sass

Lintho tse fapaneng

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

Metsoako

Ho na le metsoako e meraro bakeng sa likonopo: likonopo le likonopo tse hlahisang mefuta e fapaneng (ka bobeli li thehiloe ho $theme-colors), hammoho le motsoako oa boholo ba konopo.

@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

Likonopo tse fapaneng (bakeng sa likonopo tse tloaelehileng le tsa kemiso) li sebelisa metsoako ea tsona e fapaneng le $theme-colors'mapa oa rona ho hlahisa litlelase tsa ho fetola 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);
  }
}