Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Knoppies

Gebruik Bootstrap se pasgemaakte knoppiestyle vir aksies in vorms, dialoogvensters en meer met ondersteuning vir verskeie groottes, toestande en meer.

Op hierdie bladsy

Voorbeelde

Bootstrap bevat verskeie voorafbepaalde knoppiestyle, wat elkeen sy eie semantiese doel dien, met 'n paar ekstras ingegooi vir meer beheer.

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>
Betekenis oordra aan ondersteunende tegnologieë

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Deaktiveer teksomvou

As jy nie wil hê dat die knoppieteks moet omvou nie, kan jy die .text-nowrapklas by die knoppie voeg. In Sass kan jy instel $btn-white-space: nowrapom teksomvou vir elke knoppie te deaktiveer.

Knoppie-etikette

Die .btnklasse is ontwerp om saam met die <button>element gebruik te word. U kan egter ook hierdie klasse op <a>of <input>elemente gebruik (hoewel sommige blaaiers 'n effens ander weergawe kan toepas).

Wanneer knoppieklasse gebruik word op <a>elemente wat gebruik word om in-bladsy-funksionaliteit te aktiveer (soos ineenstortende inhoud), eerder as om na nuwe bladsye of afdelings binne die huidige bladsy te skakel, moet hierdie skakels 'n gegee role="button"word om hul doel toepaslik oor te dra aan ondersteunende tegnologieë soos bv. skermlesers.

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

Omlyn knoppies

Het jy 'n knoppie nodig, maar nie die stewige agtergrondkleure wat hulle bring nie? Vervang die verstek wysiger klasse met .btn-outline-*dié om alle agtergrondprente en -kleure op enige knoppie te verwyder.

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>
Sommige van die knoppiestyle gebruik 'n relatief ligte voorgrondkleur en moet slegs op 'n donker agtergrond gebruik word om voldoende kontras te hê.

Groottes

Lus vir groter of kleiner knoppies? Voeg by .btn-lgof .btn-smvir addisionele groottes.

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>

Jy kan selfs jou eie pasgemaakte grootte met CSS veranderlikes rol:

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>

Gestremde toestand

Laat knoppies onaktief lyk deur die disabledBoolese kenmerk by enige <button>element te voeg. Gedeaktiveerde knoppies het pointer-events: nonetoegepas op, wat verhoed dat sweef en aktiewe toestande aktiveer.

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>

Gedeaktiveerde knoppies wat die <a>element gebruik, tree 'n bietjie anders op:

  • <a>s ondersteun nie die disabledkenmerk nie, so jy moet die .disabledklas byvoeg om dit visueel gestremd te laat lyk.
  • Sommige toekomsvriendelike style is ingesluit om alles pointer-eventsop ankerknoppies te deaktiveer.
  • Gedeaktiveerde knoppies wat gebruik <a>word, moet die aria-disabled="true"kenmerk insluit om die toestand van die element aan ondersteunende tegnologieë aan te dui.
  • Gedeaktiveerde knoppies wat gebruik <a> word, moet nie die hrefkenmerk insluit nie.
Primêre skakel Skakel
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>

Om gevalle te dek waar jy die hrefkenmerk op 'n gedeaktiveerde skakel moet hou, .disabledgebruik die klas pointer-events: noneom die skakelfunksionaliteit van <a>s te probeer deaktiveer. Let daarop dat hierdie CSS-eienskap nog nie vir HTML gestandaardiseer is nie, maar alle moderne blaaiers ondersteun dit. Boonop, selfs in blaaiers wat wel ondersteun pointer-events: none, bly sleutelbordnavigasie onaangeraak, wat beteken dat siende sleutelbordgebruikers en gebruikers van ondersteunende tegnologie steeds hierdie skakels sal kan aktiveer. Om veilig te wees, sluit, benewens aria-disabled="true", ook 'n tabindex="-1"kenmerk op hierdie skakels in om te verhoed dat hulle sleutelbordfokus ontvang, en gebruik pasgemaakte JavaScript om hul funksionaliteit heeltemal uit te skakel.

Primêre skakel Skakel
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>

Blok knoppies

Skep responsiewe stapels volwydte, "blokknoppies" soos dié in Bootstrap 4 met 'n mengsel van ons vertoon- en gapingshulpmiddels. Deur nutsprogramme in plaas van knoppie-spesifieke klasse te gebruik, het ons baie groter beheer oor spasiëring, belyning en responsiewe gedrag.

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>

Hier skep ons 'n responsiewe variasie, wat begin met vertikaal gestapelde knoppies totdat die mdbreekpunt, waar .d-md-blockdie .d-gridklas vervang, en sodoende die gap-2nut tot niet maak. Verander die grootte van jou blaaier om te sien hoe hulle verander.

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>

Jy kan die breedte van jou blokknoppies aanpas met roosterkolomwydteklasse. Byvoorbeeld, vir 'n halfwydte "blokknoppie", gebruik .col-6. Sentreer dit ook horisontaal met .mx-auto.

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>

Bykomende nutsprogramme kan gebruik word om die belyning van knoppies wanneer dit horisontaal is, aan te pas. Hier het ons ons vorige responsiewe voorbeeld geneem en 'n paar buighulpmiddels en 'n marge-hulpmiddel op die knoppie bygevoeg om die knoppies regs te belyn wanneer hulle nie meer gestapel is nie.

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>

Knoppie-inprop

Die knoppie-inprop laat jou toe om eenvoudige aan/af-skakelknoppies te skep.

Visueel is hierdie wisselknoppies identies aan die boks-wisselknoppies . Hulle word egter anders oorgedra deur ondersteunende tegnologieë: die merkblokkiewissels sal deur skermlesers aangekondig word as "gemerk"/"nie gemerk" (aangesien hulle, ten spyte van hul voorkoms, fundamenteel steeds merkblokkies is), terwyl hierdie wisselknoppies aangekondig sal word as “knoppie”/“knoppie gedruk”. Die keuse tussen hierdie twee benaderings sal afhang van die tipe skakelaar wat u skep, en of die skakelaar vir gebruikers sin sal maak of nie wanneer dit as 'n merkblokkie of as 'n werklike knoppie aangekondig word.

Wissel state

Voeg by om 'n knoppie se toestand data-bs-toggle="button"te wissel . activeAs jy 'n knoppie vooraf wissel, moet jy die .activeklas met die hand byvoeg en aria-pressed="true" verseker dat dit gepas na ondersteunende tegnologieë oorgedra word.

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>
Wissel skakel Aktiewe wisselskakel Gedeaktiveerde skakelskakel
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>

Metodes

Jy kan 'n knoppie-instansie met die knoppie-konstruktor skep, byvoorbeeld:

const bsButton = new bootstrap.Button('#myButton')
Metode Beskrywing
dispose Vernietig 'n element se knoppie. (Verwyder gestoorde data op die DOM-element)
getInstance Statiese metode waarmee u die knoppie-instansie kan kry wat met 'n DOM-element geassosieer word, u kan dit so gebruik: bootstrap.Button.getInstance(element).
getOrCreateInstance Statiese metode wat 'n knoppie-instansie wat aan 'n DOM-element geassosieer word terugstuur of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik: bootstrap.Button.getOrCreateInstance(element).
toggle Wissel stootstatus. Gee die knoppie die voorkoms dat dit geaktiveer is.

Byvoorbeeld, om alle knoppies te wissel

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

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik knoppies nou plaaslike CSS-veranderlikes .btnvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

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

Elke .btn-*wysigerklas werk die toepaslike CSS-veranderlikes op om bykomende CSS-reëls met ons button-variant(), button-outline-variant(), en button-size()mixins te minimaliseer.

Hier is 'n voorbeeld van die bou van 'n pasgemaakte .btn-*wysigerklas soos ons doen vir die knoppies wat uniek is aan ons dokumente deur Bootstrap se CSS veranderlikes met 'n mengsel van ons eie CSS en Sass veranderlikes toe te wys.

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

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

Snaakse mengsels

Daar is drie mengsels vir knoppies: knoppie- en knoppie-omtrekvariante-mengsels (beide gebaseer op $theme-colors), plus 'n knoppiegrootte-mengsel.

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

Knoppie-variante (vir gereelde en buitelyn-knoppies) gebruik hul onderskeie mengsels met ons $theme-colorskaart om die wysigerklasse in te genereer 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);
  }
}