Awọn bọtini

Lo awọn ara bọtini aṣa Bootstrap fun awọn iṣe ni awọn fọọmu, awọn ijiroro, ati diẹ sii pẹlu atilẹyin fun awọn titobi pupọ, awọn ipinlẹ, ati diẹ sii.

Lori iwe yi

Awọn apẹẹrẹ

Bootstrap pẹlu ọpọlọpọ awọn aza bọtini asọye, ọkọọkan n ṣiṣẹ idi itumọ tirẹ, pẹlu awọn afikun diẹ ti a sọ sinu fun iṣakoso diẹ sii.

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>

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Mu ọrọ murasilẹ kuro

Ti o ko ba fẹ ki ọrọ bọtini naa di ipari, o le ṣafikun .text-nowrapkilasi naa si bọtini. Ni Sass, o le ṣeto $btn-white-space: nowraplati mu ipari ọrọ ṣiṣẹ fun bọtini kọọkan.

Awọn aami bọtini

Awọn .btnkilasi jẹ apẹrẹ fun lilo pẹlu <button>eroja. Sibẹsibẹ, o tun le lo awọn kilasi wọnyi lori <a>tabi <input>awọn eroja (botilẹjẹpe diẹ ninu awọn aṣawakiri le lo adaṣe ti o yatọ diẹ).

Nigbati o ba nlo awọn kilasi bọtini lori <a>awọn eroja ti a lo lati ma nfa iṣẹ ṣiṣe oju-iwe (bii akoonu ti n ṣubu), dipo sisopọ si awọn oju-iwe tuntun tabi awọn apakan laarin oju-iwe lọwọlọwọ, awọn ọna asopọ wọnyi yẹ ki o fun ni role="button"lati sọ idi wọn ni deede si awọn imọ-ẹrọ iranlọwọ gẹgẹbi iboju onkawe.

Ọna asopọ

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

Awọn bọtini itọka

Ṣe o nilo bọtini kan, ṣugbọn kii ṣe awọn awọ isale hefty ti wọn mu? Rọpo awọn kilasi iyipada aiyipada pẹlu awọn .btn-outline-*eyi lati yọ gbogbo awọn aworan abẹlẹ ati awọn awọ kuro lori bọtini eyikeyi.

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>

Diẹ ninu awọn aza bọtini lo awọ iwaju ina ti o jo, ati pe o yẹ ki o lo lori abẹlẹ dudu nikan lati le ni itansan to.

Awọn iwọn

Fancy tobi tabi kere bọtini? Fikun -un .btn-lgtabi .btn-smfun awọn iwọn afikun.

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>

O le paapaa yipo iwọn aṣa tirẹ pẹlu awọn oniyipada 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>

Ipo alaabo

Jẹ ki awọn bọtini dabi aiṣiṣẹ nipa fifi disabledabuda Boolean kun si eyikeyi <button>eroja. Awọn bọtini alaabo ti pointer-events: nonelo si, idilọwọ gbigbọn ati awọn ipinlẹ ti nṣiṣe lọwọ lati ma nfa.

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>

Awọn bọtini alaabo nipa lilo <a>eroja naa huwa diẹ ti o yatọ:

<a>s ko ṣe atilẹyin abuda naa disabled, nitorinaa o gbọdọ ṣafikun .disabledkilasi naa lati jẹ ki oju han ni alaabo.
Diẹ ninu awọn aza ore-ọjọ iwaju wa pẹlu lati mu gbogbo rẹ kuro pointer-eventslori awọn bọtini oran.
Awọn bọtini alaabo nipa lilo <a>yẹ ki o pẹlu aria-disabled="true"abuda lati tọka ipo ti nkan si awọn imọ-ẹrọ iranlọwọ.
Awọn bọtini alaabo nipa lilo <a> ko yẹ ki o pẹlu hrefabuda naa.

Ọna asopọ akọkọ Ọna asopọ

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>

Asopọ iṣẹ caveat

Lati bo awọn ọran nibiti o ni lati tọju hrefabuda naa lori ọna asopọ alaabo, .disabledkilasi naa lo pointer-events: nonelati gbiyanju lati mu iṣẹ ọna asopọ ti <a>s. Ṣe akiyesi pe ohun-ini CSS yii ko tii ni idiwọn fun HTML, ṣugbọn gbogbo awọn aṣawakiri ode oni ṣe atilẹyin fun. Ni afikun, paapaa ninu awọn aṣawakiri ti o ṣe atilẹyin pointer-events: none, lilọ kiri keyboard ko ni ipa, afipamo pe awọn olumulo keyboard ti o rii ati awọn olumulo ti awọn imọ-ẹrọ iranlọwọ yoo tun ni anfani lati mu awọn ọna asopọ wọnyi ṣiṣẹ. Nitorinaa lati wa ni ailewu, ni afikun si aria-disabled="true", tun pẹlu abuda kan tabindex="-1"lori awọn ọna asopọ wọnyi lati ṣe idiwọ wọn lati gbigba idojukọ keyboard, ati lo JavaScript aṣa lati mu iṣẹ ṣiṣe wọn ṣiṣẹ lapapọ.

Ọna asopọ akọkọ Ọna asopọ

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>

Awọn bọtini idilọwọ

Ṣẹda awọn akopọ idahun ti iwọn ni kikun, “awọn bọtini idilọwọ” bii awọn ti o wa ninu Bootstrap 4 pẹlu akojọpọ ifihan wa ati awọn ohun elo aafo. Nipa lilo awọn ohun elo dipo bọtini awọn kilasi kan pato, a ni iṣakoso pupọ julọ lori aye, titete, ati awọn ihuwasi idahun.

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>

Nibi a ṣẹda iyatọ idahun, bẹrẹ pẹlu awọn bọtini tolera ni inaro titi aaye mdfifọ, nibiti o ti .d-md-blockrọpo .d-gridkilasi naa, nitorinaa sọ ohun gap-2elo naa di asan. Ṣe atunto ẹrọ aṣawakiri rẹ lati rii pe wọn yipada.

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 le ṣatunṣe iwọn awọn bọtini bulọọki rẹ pẹlu awọn kilasi iwọn iwe akoj. Fun apẹẹrẹ, fun “bọtini ìdènà” ibú idaji, lo .col-6. Laarin rẹ nâa pẹlu .mx-auto, ju.

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>

Awọn ohun elo afikun le ṣee lo lati ṣatunṣe titete awọn bọtini nigbati petele. Nibi a ti mu apẹẹrẹ idahun iṣaaju wa ati ṣafikun diẹ ninu awọn ohun elo irọrun ati ohun elo ala kan lori bọtini lati ṣe deede awọn bọtini ọtun nigbati wọn ko ba tolera mọ.

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>

Ohun itanna bọtini

Ohun itanna bọtini gba ọ laaye lati ṣẹda awọn bọtini toggle titan/pa ti o rọrun.

Ni wiwo, awọn bọtini yiyi jẹ aami kanna si awọn bọtini toggle apoti . Bibẹẹkọ, wọn gbejade ni oriṣiriṣi nipasẹ awọn imọ-ẹrọ iranlọwọ: awọn apoti apoti apoti yoo kede nipasẹ awọn oluka iboju bi “ti a ṣayẹwo”/“kii ṣe ayẹwo” (niwon, laibikita irisi wọn, wọn jẹ awọn apoti ayẹwo ni ipilẹ), lakoko ti awọn bọtini yiyi yoo kede bi "bọtini"/"bọtini ti a tẹ". Yiyan laarin awọn ọna meji wọnyi yoo dale lori iru toggle ti o ṣẹda, ati boya tabi kii ṣe toggle yoo jẹ oye si awọn olumulo nigbati a kede bi apoti ayẹwo tabi bi bọtini gangan.

Yipada awọn ipinlẹ

Ṣafikun data-bs-toggle="button"lati yi ipo bọtini kan pada active. Ti o ba n yi bọtini kan ṣaju, o gbọdọ fi ọwọ kun .activekilasi naa ati aria-pressed="true" lati rii daju pe o ti gbejade ni deede si awọn imọ-ẹrọ iranlọwọ.

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>

Yi ọna asopọ yipada Asopọ toggle ti nṣiṣe lọwọ Alaabo ọna asopọ yipada

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>

Awọn ọna

O le ṣẹda apẹẹrẹ bọtini kan pẹlu oluṣe bọtini, fun apẹẹrẹ:

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

Ọna	Apejuwe
`dispose`	Pa bọtini eroja run. (Yọ data ti o fipamọ sori nkan DOM kuro)
`getInstance`	Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ bọtini ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi `bootstrap.Button.getInstance(element)`:.
`getOrCreateInstance`	Ọna aimi eyiti o da apẹẹrẹ bọtini pada ti o ni nkan ṣe pẹlu nkan DOM tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ. O le lo bi eleyi `bootstrap.Button.getOrCreateInstance(element)`:.
`toggle`	Toggles titari ipinle. Yoo fun bọtini naa hihan ti o ti muu ṣiṣẹ.

Fun apẹẹrẹ, lati yi gbogbo awọn bọtini pada

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

CSS

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap tí ń hùmọ̀ àwọn oníyipada CSS, àwọn bọ́tìnnì ń lo àwọn oniyipada CSS ti agbegbe .btnfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

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

Kilasi iyipada kọọkan n .btn-*ṣe imudojuiwọn awọn oniyipada CSS ti o yẹ lati dinku afikun awọn ofin CSS pẹlu button-variant(), button-outline-variant(), ati button-size()awọn apopọ wa.

Eyi ni apẹẹrẹ ti kikọ .btn-*kilaasi iyipada aṣa bii ti a ṣe fun awọn bọtini alailẹgbẹ si awọn iwe aṣẹ wa nipa ṣiṣe atunto awọn oniyipada CSS Bootstrap pẹlu adalu CSS tiwa ati awọn oniyipada 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%)};
}

Sass oniyipada

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

Awọn apopọ mẹta wa fun awọn bọtini: bọtini ati bọtini itọka iyatọ iyatọ (mejeeji ti o da lori $theme-colors), pẹlu idapọ iwọn bọtini kan.

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

Awọn iyatọ bọtini (fun deede ati awọn bọtini itọka) lo awọn akojọpọ oniwun wọn pẹlu $theme-colorsmaapu wa lati ṣe agbekalẹ awọn kilasi modifier ni 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);
  }
}