Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Botymau

Defnyddiwch arddulliau botwm arfer Bootstrap ar gyfer gweithredoedd mewn ffurfiau, deialogau, a mwy gyda chefnogaeth ar gyfer meintiau lluosog, taleithiau, a mwy.

Enghreifftiau

Mae Bootstrap yn cynnwys sawl arddull botwm wedi'i ddiffinio ymlaen llaw, pob un yn gwasanaethu ei bwrpas semantig ei hun, gydag ychydig o bethau ychwanegol yn cael eu taflu i mewn i gael mwy o reolaeth.

<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>
Cyfleu ystyr i dechnolegau cynorthwyol

Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .visually-hiddendosbarth.

Analluogi lapio testun

Os nad ydych chi am i destun y botwm lapio, gallwch chi ychwanegu'r .text-nowrapdosbarth at y botwm. Yn Sass, gallwch chi osod $btn-white-space: nowrapi analluogi lapio testun ar gyfer pob botwm.

Tagiau botwm

Mae'r .btndosbarthiadau wedi'u cynllunio i'w defnyddio gyda'r <button>elfen. Fodd bynnag, gallwch hefyd ddefnyddio'r dosbarthiadau hyn ar <a>neu <input>elfennau (er y gall rhai porwyr ddefnyddio rendrad ychydig yn wahanol).

Wrth ddefnyddio dosbarthiadau botwm ar <a>elfennau a ddefnyddir i sbarduno ymarferoldeb mewn tudalen (fel cynnwys yn cwympo), yn hytrach na chysylltu â thudalennau neu adrannau newydd o fewn y dudalen gyfredol, dylid rhoi'r dolenni hyn role="button"i gyfleu eu pwrpas yn briodol i dechnolegau cynorthwyol megis darllenwyr sgrin.

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

Botymau amlinellol

Angen botwm, ond nid y lliwiau cefndir mawr sydd ganddyn nhw? Disodli'r dosbarthiadau addasydd rhagosodedig gyda'r .btn-outline-*rhai i gael gwared ar yr holl ddelweddau cefndir a lliwiau ar unrhyw fotwm.

<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>
Mae rhai o'r arddulliau botwm yn defnyddio lliw blaendir cymharol ysgafn, a dim ond ar gefndir tywyll y dylid eu defnyddio er mwyn cael cyferbyniad digonol.

Meintiau

Awydd botymau mwy neu lai? Ychwanegu .btn-lgneu .btn-smar gyfer meintiau ychwanegol.

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

Cyflwr anabl

Gwnewch i fotymau edrych yn anactif trwy ychwanegu'r disabledbriodwedd boolaidd i unrhyw <button>elfen. Mae botymau anabl wedi pointer-events: nonegwneud cais i, atal hofran a chyflyrau gweithredol rhag sbarduno.

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

Mae botymau anabl sy'n defnyddio'r <a>elfen yn ymddwyn ychydig yn wahanol:

  • <a>s ddim yn cefnogi'r disabledpriodoledd, felly mae'n rhaid i chi ychwanegu'r .disableddosbarth i wneud iddo ymddangos yn anabl yn weledol.
  • Mae rhai arddulliau cyfeillgar i'r dyfodol wedi'u cynnwys i analluogi popeth pointer-eventsar fotymau angori.
  • Dylai botymau anabl gynnwys y aria-disabled="true"priodoledd i ddangos cyflwr yr elfen i dechnolegau cynorthwyol.
<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>

Mae'r .disableddosbarth yn defnyddio pointer-events: nonei geisio analluogi swyddogaeth cyswllt <a>s, ond nid yw'r eiddo CSS hwnnw wedi'i safoni eto. Yn ogystal, hyd yn oed mewn porwyr sy'n cefnogi pointer-events: none, nid yw llywio bysellfwrdd yn cael ei effeithio o hyd, sy'n golygu y bydd defnyddwyr bysellfwrdd sy'n gweld a defnyddwyr technolegau cynorthwyol yn dal i allu actifadu'r dolenni hyn. Felly i fod yn ddiogel, yn ogystal â aria-disabled="true", dylech hefyd gynnwys tabindex="-1"priodoledd ar y dolenni hyn i'w hatal rhag derbyn ffocws bysellfwrdd, a defnyddio JavaScript wedi'i deilwra i analluogi eu swyddogaeth yn gyfan gwbl.

Bloc botymau

Creu pentyrrau ymatebol o “fotymau bloc” lled llawn fel y rhai yn Bootstrap 4 gyda chymysgedd o'n cyfleustodau arddangos a bwlch. Trwy ddefnyddio cyfleustodau yn lle dosbarthiadau botwm penodol, mae gennym lawer mwy o reolaeth dros fylchau, aliniad ac ymddygiadau ymatebol.

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

Yma rydym yn creu amrywiad ymatebol, gan ddechrau gyda botymau wedi'u pentyrru'n fertigol tan y mdtorbwynt, lle .d-md-blockmae'n disodli'r .d-griddosbarth, gan ddileu'r gap-2cyfleustodau. Newidiwch faint eich porwr i'w weld yn newid.

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

Gallwch chi addasu lled eich botymau bloc gyda dosbarthiadau lled colofn grid. Er enghraifft, ar gyfer “botwm bloc” hanner lled, defnyddiwch .col-6. Canolbwyntiwch yn llorweddol gyda .mx-auto, hefyd.

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

Gellir defnyddio cyfleustodau ychwanegol i addasu aliniad botymau pan fyddant yn llorweddol. Yma rydyn ni wedi cymryd ein hesiampl ymatebol flaenorol ac wedi ychwanegu rhai cyfleustodau hyblyg a chyfleustodau ymyl ar y botwm i alinio'r botymau i'r dde pan nad ydyn nhw bellach wedi'u pentyrru.

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

Ategyn botwm

Mae'r ategyn botwm yn caniatáu ichi greu botymau toglo syml ymlaen / i ffwrdd.

Yn weledol, mae'r botymau togl hyn yn union yr un fath â botymau togl y blwch ticio . Fodd bynnag, maent yn cael eu cyfleu'n wahanol gan dechnolegau cynorthwyol: bydd darllenwyr sgrin yn cyhoeddi'r toglau blwch ticio fel rhai "wedi'u gwirio" / "heb eu gwirio" (gan eu bod, er gwaethaf eu hymddangosiad, yn flychau ticio yn eu hanfod), tra bydd y botymau toglo hyn yn cael eu cyhoeddi fel “botwm”/“botwm wedi'i wasgu”. Bydd y dewis rhwng y ddau ddull hyn yn dibynnu ar y math o dogl rydych chi'n ei greu, ac a fydd y togl yn gwneud synnwyr i ddefnyddwyr ai peidio pan gaiff ei gyhoeddi fel blwch ticio neu fel botwm gwirioneddol.

Toglo gwladwriaethau

Ychwanegu data-bs-toggle="button"i toglo cyflwr botwm active. Os ydych chi'n toglo botwm ymlaen llaw, rhaid i chi ychwanegu'r .activedosbarth â llaw a aria-pressed="true" sicrhau ei fod yn cael ei gyfleu'n briodol i dechnolegau cynorthwyol.

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

Dulliau

Gallwch greu enghraifft botwm gyda'r lluniwr botwm, er enghraifft:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Dull Disgrifiad
toggle Toglo cyflwr gwthio. Yn rhoi'r ymddangosiad i'r botwm ei fod wedi'i actifadu.
dispose Yn dinistrio botwm elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM)
getInstance Dull statig sy'n eich galluogi i gael yr enghraifft botwm yn gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn:bootstrap.Button.getInstance(element)
getOrCreateInstance Dull statig sy'n dychwelyd enghraifft botwm sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn:bootstrap.Button.getOrCreateInstance(element)

Er enghraifft, i doglo'r holl fotymau

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

Sass

Newidynnau

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

cymysgeddau

Mae yna dri chymysgedd ar gyfer botymau: cymysgeddau amrywiad amlinelliad botwm a botwm (y ddau yn seiliedig ar $theme-colors), ynghyd â chymysgedd maint botwm.

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

Dolenni

Mae amrywiadau botwm (ar gyfer botymau rheolaidd ac amlinellol) yn defnyddio eu cymysgeddau priodol gyda'n $theme-colorsmap i gynhyrchu'r dosbarthiadau addasu yn 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);
  }
}