Putanan

Cleachd stoidhlichean putan àbhaisteach Bootstrap airson gnìomhan ann an foirmean, còmhraidhean, agus barrachd le taic airson grunn mheudan, stàitean, agus barrachd.

Air an duilleig seo

Eisimpleirean

Tha Bootstrap a’ toirt a-steach grunn stoidhlichean putan ro-mhìnichte, gach fear a’ frithealadh an adhbhar semantach fhèin, le beagan rudan a bharrachd air an tilgeil a-steach airson barrachd smachd.

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>

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .visually-hiddenchlas.

Cuir à comas pasgadh teacsa

Mura h-eil thu airson gum bi teacsa a’ phutan paisgte, faodaidh tu an .text-nowrapclas a chuir ris a’ phutan. Ann an Sass, faodaidh tu suidheachadh $btn-white-space: nowrapgus pasgadh teacsa a dhì-cheadachadh airson gach putan.

Tagaichean putan

Tha na .btnclasaichean air an dealbhadh airson an cleachdadh leis an <button>eileamaid. Ach, faodaidh tu cuideachd na clasaichean <a>no na h- <input>eileamaidean sin a chleachdadh (ged a dh’ fhaodadh cuid de bhrobhsairean cuibhreann beagan eadar-dhealaichte a chuir an sàs).

Nuair a bhios tu a’ cleachdadh chlasaichean putan air <a>eileamaidean a thathas a’ cleachdadh gus gnìomhachd taobh a-staigh na duilleige a bhrosnachadh (leithid susbaint a’ tuiteam às a chèile), seach a bhith a’ ceangal ri duilleagan no earrannan ùra air an duilleag làithreach, bu chòir na ceanglaichean sin a bhith air an toirt role="button"seachad gus an adhbhar aca a chuir an cèill gu h-iomchaidh gu teicneòlasan cuideachail leithid luchd-leughaidh sgrion.

Ceangal

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

Putanan geàrr-chunntas

A bheil feum agad air putan, ach chan e na dathan cùl-raoin a bheir iad leotha? Cuir an àite na clasaichean mion-atharrachaidh bunaiteach leis an .btn-outline-*fheadhainn gus na h-ìomhaighean cùl-fhiosrachaidh agus na dathan air putan sam bith a thoirt air falbh.

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>

Bidh cuid de stoidhlichean putan a’ cleachdadh dath aghaidh an ìre mhath aotrom, agus cha bu chòir a chleachdadh ach air cùl-raon dorcha gus am bi iomsgaradh gu leòr ann.

Meudan

A bheil thu ag iarraidh putanan nas motha no nas lugha? Cuir ris .btn-lgno .btn-smairson meudan a bharrachd.

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>

Faodaidh tu eadhon am meud àbhaisteach agad fhèin a roiligeadh le caochladairean 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àite ciorramach

Dèan putanan a’ coimhead neo-ghnìomhach le bhith a’ cur disabledfeart boolean ri <button>eileamaid sam bith. Tha putanan ciorramach air pointer-events: nonetagradh a dhèanamh, a’ cur casg air hover agus stàitean gnìomhach bho bhith a’ piobrachadh.

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>

Bidh putanan ciorramach a’ cleachdadh an <a>eileamaid gan giùlan fhèin beagan eadar-dhealaichte:

<a>s nach cuir thu taic ris a’ disabledfheart, mar sin feumaidh tu an .disabledclas a chur ris gus am bi e ciorramach.
Tha cuid de stoidhlichean càirdeil san àm ri teachd air an toirt a-steach gus a h-uile càil a chuir dheth pointer-eventsair putanan acair.
Bu chòir do phutanan ciorramach a bhith <a>a’ toirt a-steach am aria-disabled="true"feart gus suidheachadh an eileamaid ann an teicneòlasan taice a nochdadh.
<a> Cha bu chòir am feart a bhith a’ toirt a-steach putanan ciorramach a tha a’ cleachdadh href.

Ceangal bun-sgoile Ceangal

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>

Cunnart gnìomh ceangail

Gus dèiligeadh ri cùisean far am feum thu am hreffeart a chumail air ceangal ciorramach, bidh an .disabledclas a’ cleachdadh pointer-events: nonegus feuchainn ri comas-gnìomh ceangail <a>s. Thoir an aire nach eil an togalach CSS seo àbhaisteach airson HTML, ach tha a h-uile brobhsair ùr-nodha a’ toirt taic dha. A bharrachd air an sin, eadhon ann am brobhsairean a tha a’ toirt taic pointer-events: none, chan eil buaidh sam bith air seòladh meur-chlàr, a’ ciallachadh gum bi e comasach dha luchd-cleachdaidh meur-chlàr lèirsinneach agus luchd-cleachdaidh teicneòlasan taice na ceanglaichean sin a chuir an gnìomh. Mar sin airson a bhith sàbhailte, a bharrachd air aria-disabled="true", cuir a-steach tabindex="-1"feart air na ceanglaichean sin gus casg a chuir orra bho bhith a’ faighinn fòcas meur-chlàr, agus cleachd JavaScript àbhaisteach gus an comas-gnìomh a chuir dheth gu tur.

Ceangal bun-sgoile Ceangal

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>

Cuir casg air putanan

Cruthaich cruachan freagairteach de “putanan bloca” làn-leud mar an fheadhainn ann am Bootstrap 4 le measgachadh de na goireasan taisbeanaidh is beàrn againn. Le bhith a’ cleachdadh ghoireasan an àite clasaichean putan sònraichte, tha smachd fada nas motha againn air farsaingeachd, co-thaobhadh agus giùlan ciallach.

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>

An seo bidh sinn a’ cruthachadh atharrachadh freagairteach, a’ tòiseachadh le putanan air an càrnadh gu dìreach gus am bi an ìre mdbrisidh, far am bi sinn .d-md-blocka’ dol an àite a’ .d-gridchlas, agus mar sin a’ cur às don gap-2ghoireas. Ath-mheudaich do bhrobhsair gus am faic iad ag atharrachadh.

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>

Faodaidh tu leud nam putanan bloca agad atharrachadh le clasaichean leud colbh clèithe. Mar eisimpleir, airson “putan bloca leth-leud”, cleachd .col-6. Meadhan e gu còmhnard le .mx-auto, cuideachd.

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>

Faodar goireasan a bharrachd a chleachdadh gus co-thaobhadh nam putanan atharrachadh nuair a tha iad còmhnard. An seo tha sinn air an eisimpleir freagairteach a bh ’againn roimhe a ghabhail agus air cuid de ghoireasan sùbailte agus goireas iomaill a chuir ris a’ phutan gus na putanan a cho-thaobhadh gu ceart nuair nach eil iad air an càrnadh tuilleadh.

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>

Plugin putan

Leigidh am plugan putan leat putanan toggle sìmplidh air / dheth a chruthachadh.

Gu fradharcach, tha na putanan toggle seo co-ionann ri putanan tog a’ bhogsa sgrùdaidh . Ach, tha iad air an giùlan ann an dòigh eadar-dhealaichte le teicneòlasan taice: thèid na toggles bogsa-seic ainmeachadh le leughadairean sgrion mar “sgrùdadh”/“gun sgrùdadh” (leis, a dh’ aindeoin an coltas, tha iad gu bunaiteach fhathast nam bogsaichean-seic), ach thèid na putanan toggle seo ainmeachadh mar “putan”/“putan air a bhrùthadh”. Bidh an roghainn eadar an dà dhòigh-obrach seo an urra ris an t-seòrsa toggle a tha thu a’ cruthachadh, agus am bi no nach dèan an toggle ciall do luchd-cleachdaidh nuair a thèid ainmeachadh mar bhogsa sgrùdaidh no mar phutan fìor.

Tog stàitean

Cuir ris data-bs-toggle="button"gus staid putan a thogail active. Ma tha thu a’ togail putan ro-làimh, feumaidh tu an .activeclas a chur ris le làimh agus aria-pressed="true" dèanamh cinnteach gu bheil e air a ghluasad gu h-iomchaidh gu teicneòlasan taice.

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>

Tog ceangal Ceangal gnìomhach tog Ceangal togladh à comas

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>

Dòighean-obrach

Faodaidh tu eisimpleir putan a chruthachadh leis an neach-togail putan, mar eisimpleir:

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

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios putan eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
`getInstance`	Modh statach a leigeas leat eisimpleir a’ phutan fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thilleas eisimpleir putan co-cheangailte ri eileamaid DOM no cruthaich fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	Toggle staid putadh. A’ toirt coltas air a’ phutan gun deach a ghnìomhachadh.

Mar eisimpleir, gus na putanan gu lèir a thogail

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

CSS

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha putanan a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .btnairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

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

Bidh gach .btn-*clas mion-atharrachaidh ag ùrachadh nan caochladairean CSS iomchaidh gus riaghailtean CSS a bharrachd a lughdachadh leis na button-variant(), button-outline-variant(), , agus button-size()measgachadh againn.

Seo eisimpleir de bhith a’ togail .btn-*clas mion-atharrachaidh àbhaisteach mar a nì sinn airson na putanan a tha gun samhail dha na docaichean againn le bhith ag ath-shònrachadh caochladairean CSS Bootstrap le measgachadh de na caochladairean CSS agus Sass againn fhè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%)};
}

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

Tha trì measgachadh ann airson putanan: measgachadh de phutan agus putan a’ mìneachadh measgachadh (an dà chuid stèidhichte air $theme-colors), a bharrachd air measgachadh meud putan.

@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ùban sass

Bidh caochlaidhean putan (airson putanan cunbhalach agus geàrr-chunntas) a’ cleachdadh am measgachadh fa leth leis a’ $theme-colorsmhapa againn gus na clasaichean mion-atharrachaidh a ghineadh ann an 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);
  }
}