in English

Butonat

Përdorni stilet e butonave të personalizuar të Bootstrap për veprime në forma, dialog dhe më shumë me mbështetje për madhësi, gjendje të shumëfishta dhe më shumë.

Në këtë faqe

Shembuj

Bootstrap përfshin disa stile të paracaktuara të butonave, secila i shërben qëllimit të vet semantik, me disa shtesa të futura për më shumë kontroll.

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

Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .visually-hiddenklasën.

Çaktivizo mbështjelljen e tekstit

Nëse nuk dëshironi që teksti i butonit të mbështillet, mund ta shtoni .text-nowrapklasën në buton. Në Sass, mund të vendosni $btn-white-space: nowraptë çaktivizoni mbështjelljen e tekstit për çdo buton.

Etiketat e butonave

Klasat .btnjanë krijuar për t'u përdorur me <button>elementin. Megjithatë, ju mund t'i përdorni këto klasa në <a>ose <input>elementë (megjithëse disa shfletues mund të aplikojnë një paraqitje paksa të ndryshme).

Kur përdorni klasat e butonave në <a>elementë që përdoren për të aktivizuar funksionalitetin brenda faqes (si p.sh. përmbajtja e kolapsit), në vend që të lidhen me faqet ose seksionet e reja brenda faqes aktuale, këtyre lidhjeve duhet t'u jepet një role="button"mënyrë për të përcjellë në mënyrë të përshtatshme qëllimin e tyre tek teknologjitë ndihmëse si p.sh. lexuesit e ekranit.

Lidhje

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

Butonat skicë

Keni nevojë për një buton, por jo për ngjyrat e mëdha të sfondit që sjellin? Zëvendësoni klasat e modifikuesve të parazgjedhur me .btn-outline-*ato për të hequr të gjitha imazhet dhe ngjyrat e sfondit në çdo buton.

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

Disa nga stilet e butonave përdorin një ngjyrë relativisht të lehtë të planit të parë dhe duhet të përdoren vetëm në një sfond të errët për të pasur kontrast të mjaftueshëm.

Përmasat

Dëshironi butona më të mëdhenj apo më të vegjël? Shtoni .btn-lgose .btn-smpër madhësi shtesë.

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

Gjendja me aftësi të kufizuara

Bëjini butonat të duken joaktivë duke shtuar disabledatributin boolean në çdo <button>element. Butonat e çaktivizuar janë pointer-events: noneaplikuar, duke parandaluar aktivizimin e gjendjeve të pezullimit dhe aktive.

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

Butonat e çaktivizuar që përdorin <a>elementin sillen pak më ndryshe:

<a>s nuk e mbështesin disabledatributin, kështu që duhet të shtoni .disabledklasën për ta bërë atë vizualisht të duket e paaftë.
Përfshihen disa stile të përshtatshme për të ardhmen për të çaktivizuar të gjitha pointer-eventsbutonat e ankorimit.
Butonat e çaktivizuar duhet të përfshijnë aria-disabled="true"atributin për të treguar gjendjen e elementit ndaj teknologjive ndihmëse.

Lidhja kryesore Lidhje

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

Paralajmërim për funksionalitetin e lidhjes

Klasa .disabledpërdor pointer-events: nonepër të provuar të çaktivizojë funksionalitetin e lidhjes së <a>s, por ajo pronë CSS nuk është ende e standardizuar. Për më tepër, edhe në shfletuesit që mbështesin pointer-events: none, navigimi i tastierës mbetet i paprekur, që do të thotë se përdoruesit e tastierës me shikim dhe përdoruesit e teknologjive ndihmëse do të jenë ende në gjendje t'i aktivizojnë këto lidhje. Pra, për të qenë të sigurt, përveç aria-disabled="true", përfshini edhe një tabindex="-1"atribut në këto lidhje për t'i parandaluar ata të marrin fokusin e tastierës dhe përdorni JavaScript të personalizuar për të çaktivizuar plotësisht funksionalitetin e tyre.

Butonat e bllokimit

Krijoni grupe të përgjegjshme të "butonave të bllokimit" me gjerësi të plotë, si ato në Bootstrap 4 me një përzierje të shërbimeve tona të ekranit dhe boshllëqeve. Duke përdorur shërbime në vend të klasave specifike të butonave, ne kemi një kontroll shumë më të madh mbi ndarjen, shtrirjen dhe sjelljet reaguese.

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

Këtu ne krijojmë një variacion të përgjegjshëm, duke filluar me butonat e vendosur vertikalisht deri në pikën e mdndërprerjes, ku .d-md-blockzëvendëson .d-gridklasën, duke anuluar kështu programin gap-2. Ndryshoni madhësinë e shfletuesit tuaj për t'i parë ato të ndryshojnë.

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

Ju mund të rregulloni gjerësinë e butonave të bllokut tuaj me klasat e gjerësisë së kolonës së rrjetit. Për shembull, për një "buton bllokimi" me gjysmë gjerësi, përdorni .col-6. Përqendroni atë horizontalisht me .mx-auto, gjithashtu.

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

Shërbimet shtesë mund të përdoren për të rregulluar shtrirjen e butonave kur janë horizontale. Këtu kemi marrë shembullin tonë të mëparshëm të përgjegjshëm dhe kemi shtuar disa shërbime fleksibile dhe një mjet të margjinës në butonin për të rreshtuar djathtas butonat kur ata nuk janë më të grumbulluar.

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

Shtojca e butonave

Shtojca e butonit ju lejon të krijoni butona të thjeshtë të ndezjes/fikjes.

Vizualisht, këta butona të ndërrimit janë identikë me butonat e ndërrimit të kutisë së kontrollit . Megjithatë, ato përcillen ndryshe nga teknologjitë ndihmëse: ndërrimet e kutisë së kontrollit do të shpallen nga lexuesit e ekranit si "të kontrolluara"/"jo të kontrolluara" (pasi, pavarësisht pamjes së tyre, në thelb janë ende kuti kontrolli), ndërsa këta butona të ndryshimit do të shpallen si “buton”/“buton i shtypur”. Zgjedhja midis këtyre dy qasjeve do të varet nga lloji i ndërrimit që po krijoni dhe nëse ndërrimi do të ketë kuptim për përdoruesit kur shpallet si një kuti kontrolli ose si një buton aktual.

Ndrysho gjendjet

Shto data-bs-toggle="button"për të ndryshuar gjendjen e një butoni active. Nëse po ndërroni paraprakisht një buton, duhet të shtoni manualisht .activeklasën dhe aria-pressed="true" të siguroheni që ai të përcillet siç duhet te teknologjitë ndihmëse.

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

Ndrysho lidhjen Lidhja e ndërrimit aktiv Lidhja e ndërrimit të çaktivizuar

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

Metodat

Ju mund të krijoni një shembull butoni me konstruktorin e butonit, për shembull:

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

Metoda	Përshkrim
`toggle`	Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.
`dispose`	Shkatërron butonin e një elementi. (Heq të dhënat e ruajtura në elementin DOM)
`getInstance`	Metoda statike e cila ju lejon të merrni shembullin e butonit të lidhur me një element DOM, mund ta përdorni si kjo:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Metoda statike e cila kthen një shembull butoni të lidhur me një element DOM ose krijon një të ri në rast se nuk është inicializuar. Mund ta përdorni si kjo:`bootstrap.Button.getOrCreateInstance(element)`

Për shembull, për të ndërruar të gjithë butonat

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

Sass

Variablat

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

Përzierjet

Ekzistojnë tre përzierje për butonat: kombinime të varianteve të butonave dhe skicave të butonave (të dyja të bazuara në $theme-colors), plus një përzierje me madhësi butoni.

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

Sythe

Variantet e butonave (për butonat e rregullt dhe skicë) përdorin përzierjet e tyre përkatëse me $theme-colorshartën tonë për të gjeneruar klasat e modifikuesve në 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);
  }
}