Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
in English

Cnaipí

Bain úsáid as stíleanna cnaipe saincheaptha Bootstrap le haghaidh gníomhartha i bhfoirmeacha, dialóga, agus níos mó le tacaíocht d'ilmhéideanna, stáit agus níos mó.

Ar an leathanach seo

Samplaí

Cuimsíonn Bootstrap roinnt stíleanna cnaipe réamhshainithe, gach ceann ag freastal ar a chuspóir shéimeantach féin, agus roinnt rudaí breise caite isteach le haghaidh níos mó smachta.

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>
Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.

Díchumasaigh timfhilleadh téacs

Mura dteastaíonn uait go gclúdódh an téacs cnaipe, is féidir leat an .text-nowraprang a chur leis an gcnaipe. In Sass, is féidir leat $btn-white-space: nowrapfillteáin téacs a dhíchumasú do gach cnaipe a shocrú.

Clibeanna cnaipe

Tá na .btnranganna deartha le húsáid leis an <button>eilimint. Mar sin féin, is féidir leat na ranganna seo a úsáid ar <a>nó <input>eilimintí (cé go bhféadfadh roinnt brabhsálaithe rindreáil beagán difriúil a chur i bhfeidhm).

Agus aicmí cnaipí á n-úsáid ar <a>ghnéithe a úsáidtear chun feidhmiúlacht in-leathanaigh a spreagadh (cosúil le hinneachar a laghdú), seachas nascadh le leathanaigh nó le hailt nua laistigh den leathanach reatha, ba cheart na naisc seo a thabhairt role="button"chun a gcuspóir a chur in iúl go cuí do theicneolaíochtaí cúnta mar léitheoirí scáileáin.

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

Cnaipí imlíne

Cnaipe de dhíth, ach nach bhfuil na dathanna cúlra mór a thugann siad? Cuir na cinn in ionad na ranganna mionathraithe réamhshocraithe .btn-outline-*chun na híomhánna cúlra agus na dathanna go léir ar aon chnaipe a bhaint.

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>
Úsáideann cuid de na stíleanna cnaipe dath tulra sách éadrom, agus níor cheart iad a úsáid ach ar chúlra dorcha chun codarsnacht leordhóthanach a bheith acu.

Méideanna

An bhfuil fonn ort cnaipí níos mó nó níos lú? Cuir .btn-lgnó .btn-smle haghaidh méideanna breise.

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>

Is féidir leat do mhéid saincheaptha féin a rolladh fiú le hathróga 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>

Stát faoi mhíchumas

Cuir cuma neamhghníomhach ar chnaipí tríd an disabledtréith Boole a chur le haon <button>eilimint. Cuireadh cnaipí faoi mhíchumas pointer-events: nonei bhfeidhm ar, rud a chuireann cosc ​​ar ainlíonn agus stáit ghníomhacha ó threascairt.

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>

Iompraíonn cnaipí díchumasaithe a úsáideann an <a>eilimint beagán difriúil:

  • <a>s ní thacaíonn an disabledaitreabúid, mar sin ní mór duit an .disabledrang a chur leis le go mbeidh cuma dhíchumasaithe air.
  • Tá roinnt stíleanna atá neamhdhíobhálach don todhchaí san áireamh chun gach ceann pointer-eventsar chnaipí ancaire a dhíchumasú.
  • Ba cheart go n-áireofaí ar chnaipí faoi mhíchumas <a>a úsáideann an aria-disabled="true"tréith chun staid na heiliminte i dteicneolaíochtaí cúnta a léiriú.
  • <a> Níor cheart go mbeadh an hreftréith san áireamh i gcnaipí míchumasaithe a úsáideann .
Nasc príomhúil Nasc
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>

Chun cásanna a chlúdach ina gcaithfidh tú an hreftréith a choinneáil ar nasc díchumasaithe, .disabledúsáideann an rang pointer-events: nonechun iarracht a dhéanamh feidhmiúlacht naisc <a>s. Tabhair faoi deara nach bhfuil an mhaoin CSS seo caighdeánaithe fós le haghaidh HTML, ach tacaíonn gach brabhsálaí nua-aimseartha leis. Ina theannta sin, fiú amháin i mbrabhsálaithe a thacaíonn le pointer-events: none, níl aon tionchar fós ar nascleanúint méarchláir, rud a chiallaíonn go mbeidh úsáideoirí méarchláir radharcacha agus úsáideoirí teicneolaíochtaí cúnta fós in ann na naisc seo a ghníomhachtú. Mar sin le bheith sábháilte, chomh maith le aria-disabled="true", tabindex="-1"cuir tréith ar na naisc seo freisin chun iad a chosc ó fhócas méarchláir a fháil, agus úsáid JavaScript saincheaptha chun a bhfeidhmiúlacht a dhíchumasú go hiomlán.

Nasc príomhúil Nasc
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>

Cnaipí blocála

Cruthaigh stoic sofhreagracha de “chnaipí bloc” lánleithead cosúil leis na cinn i Bootstrap 4 le meascán dár bhfóntais taispeána agus bearna. Trí úsáid a bhaint as fóntais in ionad aicmí cnaipe ar leith, tá smacht i bhfad níos mó againn ar spásáil, ailíniú agus iompraíochtaí sofhreagracha.

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>

Anseo cruthaímid athrú sofhreagrach, ag tosú le cnaipí atá Cruachta go hingearach go dtí an mdbrisphointe, áit a gcuirtear .d-md-blockan .d-gridrang in ionad, rud a fhágann nach gcuirtear an gap-2fóntais ar ceal. Athraigh do bhrabhsálaí chun iad a athrú.

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>

Is féidir leat leithead do bhlocchnaipí a choigeartú le haicmí leithead na gcolún greille. Mar shampla, le haghaidh “cnaipe blocála” leathleithead, bain úsáid as .col-6. Lár é go cothrománach le .mx-auto, freisin.

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>

Is féidir fóntais bhreise a úsáid chun ailíniú na gcnaipí a choigeartú nuair a bhíonn siad cothrománach. Anseo ghlacamar ár sampla sofhreagrach roimhe seo agus chuir muid roinnt fóntais flex agus áirgiúlacht corrlaigh ar an gcnaipe chun na cnaipí a ailíniú ar dheis nuair nach bhfuil siad cruachta a thuilleadh.

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>

Breiseán cnaipe

Ligeann an breiseán cnaipe duit cnaipí scoránaigh simplí ar/as a chruthú.

Ó thaobh amhairc de, is ionann na cnaipí scoránaigh seo agus na cnaipí scoránaigh ticbhosca . Mar sin féin, cuireann teicneolaíochtaí cúnta in iúl go difriúil iad: fógróidh léitheoirí scáileáin na scoránaigh ticbhosca mar “sheiceáil”/“gan seiceáil” (ós rud é, in ainneoin a gcuma, gur ticbhoscaí fós iad go bunúsach), ach fógrófar na cnaipí scoránaigh seo mar “cnaipe”/“cnaipe brúite”. Beidh an rogha idir an dá chur chuige seo ag brath ar an gcineál scoránaigh atá á chruthú agat, agus cé acu an ndéanfaidh nó nach ndéanfaidh an scoránaigh ciall d'úsáideoirí nuair a fhógraítear é mar bhosca seiceála nó mar chnaipe iarbhír.

Scoránaigh stáit

Cuir data-bs-toggle="button"le staid an chnaipe a scoránaigh active. Má tá tú ag scoránú cnaipe roimh ré, ní mór duit an .activerang a shuimiú de láimh agus aria-pressed="true" a chinntiú go gcuirtear in iúl go cuí é do theicneolaíochtaí cúnta.

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>
Scoránaigh an nasc Nasc scoránaigh gníomhach Nasc scoránaigh díchumasaithe
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>

Modhanna

Is féidir leat sampla cnaipe a chruthú leis an cruthaitheoir cnaipe, mar shampla:

const bsButton = new bootstrap.Button('#myButton')
Modh Cur síos
dispose Scriosann cnaipe eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
getInstance Modh statach a ligeann duit an t-ús cnaipe a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo: bootstrap.Button.getInstance(element).
getOrCreateInstance Modh statach a sheolann ar ais cnaipe a bhaineann le heilimint DOM nó a chruthaíonn ceann nua ar eagla nach dtosófaí é. Is féidir leat é a úsáid mar seo: bootstrap.Button.getOrCreateInstance(element).
toggle Scoránaigh an staid bhrú. Tugann sé an chuma ar an gcnaipe go bhfuil sé curtha i ngníomh.

Mar shampla, a scoránaigh go léir cnaipí

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

CSS

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann cnaipí anois athróga áitiúla CSS ar aghaidh .btnle haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Déanann gach .btn-*rang mionathraithe na hathróga CSS cuí a nuashonrú chun rialacha CSS breise a íoslaghdú lenár button-variant(), button-outline-variant(), , agus button-size()meascáin.

Seo sampla de .btn-*rang mionathraithe saincheaptha a thógáil mar a dhéanaimid do na cnaipí atá uathúil dár ndoiciméid trí athróga CSS Bootstrap a athshannadh le meascán dár n-athróga CSS agus Sass féin.

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

Athróga 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%;

meascáin Sass

Tá trí mheascán ann do chnaipí: meascáin athraitheacha imlíne cnaipe agus cnaipe (an dá cheann bunaithe ar $theme-colors), chomh maith le mixin méid cnaipe.

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

Lúba sass

Úsáideann malairtí cnaipí (le haghaidh cnaipí rialta agus imlíne) a meascáin faoi seach lenár $theme-colorsléarscáil chun na haicmí mionathraithe a ghiniúint i 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);
  }
}