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.

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>

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

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

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.

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>

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.

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>

U ka tsamaisa boholo ba hau ba tloaelo ka mefuta e fapaneng ea 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>

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.

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>

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 tse sebelisoang li <a>lokela ho kenyelletsa aria-disabled="true"tšobotsi ho bontša boemo ba element ho mahlale a thusang.
Likonopo tse holofetseng tse sebelisoang <a> ha lia lokela ho kenyelletsa hreftšobotsi.

Sehokelo sa mantlha Sehokelo

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>

Khokahano ea ts'ebetso ea caveat

Ho koahela linyeoe moo o tlamehang ho boloka hreftšobotsi ho sehokelo se holofetseng, .disabledsehlopha se sebelisa pointer-events: noneho leka ho tima tšebetso ea lihokelo tsa <a>s. Hlokomela hore thepa ena ea CSS ha e e-so be boemong ba HTML, empa libatli tsohle tsa sejoale-joale lia e tšehetsa. 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.

Sehokelo sa mantlha Sehokelo

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>

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.

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>

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.

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>

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.

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>

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.

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>

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.

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>

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

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>

Mekhoa

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

const bsButton = new bootstrap.Button('#myButton')

Mokhoa	Tlhaloso
`dispose`	E senya konopo ea element. (E tlosa lintlha tse bolokiloeng karolong ea DOM)
`getInstance`	Mokhoa o tsitsitseng o o lumellang ho fumana konopo ea konopo e amanang le karolo ea DOM, o ka e sebelisa tjena: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Mokhoa o tsitsitseng o khutlisang konopo e 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)`:.
`toggle`	E fetola boemo ba push. E fa konopo ponahalo ea hore e kentsoe tšebetsong.

Ka mohlala, ho fetola likonopo tsohle

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

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, likonopo joale li sebelisa mefuta-futa ea CSS ea lehae .btnbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, le oona.

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

Sehlopha se seng le se seng .btn-*sa mofetoleli se ntlafatsa mefuta e nepahetseng ea CSS ho fokotsa melao e meng ea CSS ka rona button-variant(), button-outline-variant(), le button-size()mixins.

Mona ke mohlala oa ho aha sehlopha sa ho .btn-*fetola tloaelo joalo ka ha re etsetsa likonopo tse ikhethang ho litokomane tsa rona ka ho fana ka mefuta e fapaneng ea CSS ea Bootstrap ka motsoako oa mefuta ea rona ea CSS le 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%)};
}

Mefuta e fapaneng ea 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%;

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

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