in English

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.

<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

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

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

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

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.

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

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 am aria-disabled="true"feart a bhith ann am putanan ciorramach gus staid an eileamaid ann an teicneòlasan taice a chomharrachadh.

Ceangal bun-sgoile Ceangal

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

Cunnart gnìomh ceangail

Bidh an .disabledclas a’ cleachdadh pointer-events: nonegus feuchainn ri comas-gnìomh ceangail <a>s a chur à comas, ach chan eil an togalach CSS sin àbhaisteach fhathast. 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.

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.

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

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

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

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

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

Tog ceangal Ceangal gnìomhach tog Ceangal togladh à comas

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

Dòighean-obrach

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

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

Dòigh-obrach	Tuairisgeul
`toggle`	Toggle staid putadh. A’ toirt coltas air a’ phutan gun deach a ghnìomhachadh.
`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 a chruthaicheas fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo:`bootstrap.Button.getOrCreateInstance(element)`

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

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

Sass

Caochlaidhean

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

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

Lùban

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} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}