Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

Butonoj

Uzu la kutimajn butonstilojn de Bootstrap por agoj en formoj, dialogoj kaj pli kun subteno por pluraj grandecoj, ŝtatoj kaj pli.

Sur ĉi tiu paĝo

Ekzemploj

Bootstrap inkluzivas plurajn antaŭdifinitajn butonstilojn, ĉiu servante sian propran semantikan celon, kun kelkaj kromaĵoj enmetitaj por pli da kontrolo.

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>
Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .visually-hiddenklaso.

Malebligu tekstan envolvadon

Se vi ne volas, ke la butonteksto envolviĝu, vi povas aldoni la .text-nowrapklason al la butono. En Sass, vi povas agordi $btn-white-space: nowrapmalŝalti tekston envolvadon por ĉiu butono.

Butonetikedoj

La .btnklasoj estas dezajnitaj por esti uzataj kun la <button>elemento. Tamen, vi ankaŭ povas uzi ĉi tiujn klasojn sur <a>aŭ <input>elementoj (kvankam iuj retumiloj povas apliki iomete malsaman bildigon).

Kiam oni uzas butonklasojn pri <a>elementoj, kiuj estas uzataj por ekigi en-paĝan funkcion (kiel kolapsa enhavo), anstataŭ ligi al novaj paĝoj aŭ sekcioj ene de la nuna paĝo, ĉi tiuj ligiloj devus ricevi role="button"por taŭge transdoni sian celon al helpaj teknologioj kiel ekzemple. ekranlegiloj.

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

Skizo butonoj

Ĉu vi bezonas butonon, sed ne la fortajn fonkolorojn, kiujn ili alportas? Anstataŭigu la defaŭltajn modifklasojn per .btn-outline-*tiuj por forigi ĉiujn fonbildojn kaj kolorojn sur iu ajn butono.

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>
Kelkaj el la butonstiloj uzas relative helan malfonkoloron, kaj devus esti uzataj nur sur malhela fono por havi sufiĉan kontraston.

Grandecoj

Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Aldonu .btn-lgaŭ .btn-smpor pliaj grandecoj.

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>

Vi eĉ povas ruli vian propran laŭmendan grandecon per CSS-variabloj:

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>

Malfunkciigita ŝtato

Faru butonojn aspekti neaktivaj aldonante la disabledbulean atributon al iu ajn <button>elemento. Malŝaltitaj butonoj pointer-events: noneaplikiĝis al, malhelpante ŝvebadon kaj aktivajn statojn ekfunkciigi.

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>

Malŝaltitaj butonoj uzantaj la <a>elementon kondutas iom malsame:

  • <a>s ne subtenas la disabledatributon, do vi devas aldoni la .disabledklason por ke ĝi videble aspektu malŝaltita.
  • Iuj estontecaj stiloj estas inkluzivitaj por malŝalti ĉiujn pointer-eventsankrajn butonojn.
  • Malfunkciigitaj butonoj uzado <a>devus inkluzivi la aria-disabled="true"atributon por indiki la staton de la elemento al helpaj teknologioj.
  • Malŝaltitaj butonoj uzantaj <a> ne devus inkluzivi la hrefatributon.
Primara ligilo Ligo
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>

Por kovri kazojn, kie vi devas konservi la hrefatributon sur malfunkciigita ligilo, la .disabledklaso uzas pointer-events: nonepor provi malŝalti la ligan funkcion de <a>s. Notu, ke ĉi tiu CSS-posedaĵo ankoraŭ ne estas normigita por HTML, sed ĉiuj modernaj retumiloj subtenas ĝin. Krome, eĉ en retumiloj kiuj subtenas pointer-events: none, klavarnavigado restas netuŝita, kio signifas, ke videblaj klavaruzantoj kaj uzantoj de helpaj teknologioj ankoraŭ povos aktivigi ĉi tiujn ligilojn. Do por esti sekura, krom aria-disabled="true", ankaŭ inkluzivu tabindex="-1"atributon sur ĉi tiuj ligiloj por malhelpi ilin ricevi klavaran fokuson, kaj uzu kutiman JavaScript por tute malŝalti ilian funkcion.

Primara ligilo Ligo
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>

Blokaj butonoj

Kreu respondemajn stakojn de plenlarĝaj, "blokaj butonoj" kiel tiuj en Bootstrap 4 kun miksaĵo de niaj ekranaj kaj brecaj iloj. Uzante ilojn anstataŭ butonajn specifajn klasojn, ni havas multe pli grandan kontrolon pri interspacigo, vicigo kaj respondemaj kondutoj.

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>

Ĉi tie ni kreas respondeman variadon, komencante per vertikale stakitaj butonoj ĝis la mdrompopunkto, kie .d-md-blockanstataŭigas la .d-gridklason, tiel nuligante la gap-2utilecon. Regrandigu vian retumilon por vidi ilin ŝanĝiĝi.

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>

Vi povas ĝustigi la larĝon de viaj blokbutonoj kun kradaj kolumnaj larĝaj klasoj. Ekzemple, por duonlarĝa "bloka butono", uzu .col-6. Centri ĝin horizontale .mx-autoankaŭ per .

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>

Pliaj iloj povas esti uzataj por ĝustigi la vicigon de butonoj kiam horizontale. Ĉi tie ni prenis nian antaŭan respondeman ekzemplon kaj aldonis kelkajn flekseblajn ilojn kaj marĝenan ilon sur la butono por dekstre vicigi la butonojn kiam ili ne plu estas stakigitaj.

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>

Butonaldonaĵo

La butonaldonaĵo permesas krei simplajn ŝalti/malŝalti butonojn.

Vide, ĉi tiuj baskulimaj butonoj estas identaj al la markobutonoj . Tamen, ili estas transdonitaj alimaniere de helpaj teknologioj: la markobutonoj ŝaltiloj estos anoncitaj de ekranlegantoj kiel "markitaj"/"ne kontrolitaj" (ĉar, malgraŭ sia aspekto, ili esence ankoraŭ estas markobutonoj), dum ĉi tiuj basulbutonoj estos anoncitaj kiel "butono"/"butono premita". La elekto inter ĉi tiuj du aliroj dependos de la speco de baskulo, kiun vi kreas, kaj ĉu aŭ ne la baskulo havos sencon por uzantoj kiam anoncite kiel markobutono aŭ kiel fakta butono.

Ŝaltigu ŝtatojn

Aldoni data-bs-toggle="button"por ŝanĝi la staton de butono active. Se vi antaŭŝanĝas butonon, vi devas permane aldoni la .activeklason kaj aria-pressed="true" certigi, ke ĝi estas taŭge transdonita al helpaj teknologioj.

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>
Baskuligi ligilon Aktiva baskuligo Maleblita baskuligo
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>

Metodoj

Vi povas krei butonon per la butonkonstruilo, ekzemple:

const bsButton = new bootstrap.Button('#myButton')
Metodo Priskribo
dispose Detruas la butonon de elemento. (Forigas konservitajn datumojn sur la DOM-elemento)
getInstance Senmova metodo, kiu ebligas al vi akiri la butonan ekzemplon asociitan al DOM-elemento, vi povas uzi ĝin jene: bootstrap.Button.getInstance(element).
getOrCreateInstance Senmova metodo, kiu resendas butonan ekzemplon asociitan al DOM-elemento aŭ kreas novan se ĝi ne estis pravigita. Vi povas uzi ĝin tiel: bootstrap.Button.getOrCreateInstance(element).
toggle Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.

Ekzemple, por ŝanĝi ĉiujn butonojn

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

CSS

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, butonoj nun uzas lokajn CSS .btn-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

Ĉiu .btn-*modifklaso ĝisdatigas la taŭgajn CSS-variablojn por minimumigi pliajn CSS-regulojn per niaj button-variant(), button-outline-variant(), kaj button-size()miksaĵoj.

Jen ekzemplo de konstruado de kutima .btn-*modifklaso kiel ni faras por la butonoj unikaj al niaj dokumentoj reasignante la CSS-variablojn de Bootstrap kun miksaĵo de niaj propraj CSS kaj Sass-variabloj.

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

$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 miksaĵoj

Estas tri miksaĵoj por butonoj: variaĵo de butonoj kaj butonstreko (ambaŭ bazitaj sur $theme-colors), plus butongranda miksaĵo.

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

Butonvariaĵoj (por regulaj kaj skizaj butonoj) uzas siajn respektivajn miksaĵojn kun nia $theme-colorsmapo por generi la modifklasojn en 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);
  }
}