Kalo te përmbajtja kryesore Kalo te navigimi i dokumenteve
Check
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.

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>
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. Sidoqoftë, 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 faqe ose seksione të reja brenda faqes aktuale, këtyre lidhjeve duhet t'u jepet një përçim i role="button"duhur për të përcjellë qëllimin e tyre në teknologjitë ndihmëse si p.sh. lexuesit e ekranit.

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

Butonat skicë

Keni nevojë për një buton, por jo 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.

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>
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 në mënyrë që të kenë 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ë.

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>

Ju madje mund të rrotulloni madhësinë tuaj të personalizuar me variabla CSS:

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>

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.

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>

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 që përdorin <a>duhet të përfshijnë aria-disabled="true"atributin për të treguar gjendjen e elementit ndaj teknologjive ndihmëse.
  • Butonat e çaktivizuar duke përdorur <a> nuk duhet të përfshijnë hrefatributin.
Lidhja kryesore Lidhje
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>

Për të mbuluar rastet kur duhet ta mbani hrefatributin në një lidhje të çaktivizuar, .disabledklasa përdor pointer-events: nonepër të provuar të çaktivizojë funksionalitetin e lidhjes së <a>s. Vini re se kjo pronë CSS nuk është ende e standardizuar për HTML, por të gjithë shfletuesit modernë e mbështesin atë. Përveç kësaj, 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 gjithashtu 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.

Lidhja kryesore Lidhje
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>

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.

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>

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ë parë ndryshimin e tyre.

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>

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.

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>

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 flex dhe një mjet të margjinës në butonin për të rreshtuar djathtas butonat kur ata nuk janë më të grumbulluar.

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>

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, ato në thelb janë ende kuti kontrolli), ndërsa këta butona të ndryshimit do të shpallen si “button”/“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.

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>
Ndrysho lidhjen Lidhja e ndërrimit aktiv Lidhja e ndërrimit të çaktivizuar
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>

Metodat

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

const bsButton = new bootstrap.Button('#myButton')
Metoda Përshkrim
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).
toggle Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.

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

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

CSS

Variablat

Shtuar në v5.2.0

Si pjesë e qasjes në zhvillim të variablave CSS të Bootstrap, butonat tani përdorin variabla lokale CSS .btnpër përshtatje të përmirësuar në kohë reale. Vlerat për variablat CSS vendosen nëpërmjet Sass, kështu që personalizimi i Sass mbështetet gjithashtu.

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

Çdo .btn-*klasë modifikuesi përditëson variablat e duhura CSS për të minimizuar rregullat shtesë CSS me button-variant(), button-outline-variant(), dhe button-size()miksat tona.

Këtu është një shembull i ndërtimit të një .btn-*klase modifikuesi të personalizuar siç bëjmë ne për butonat unikë për dokumentet tona duke ricaktuar variablat CSS të Bootstrap me një përzierje të ndryshoreve tona CSS dhe Sass.

.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%)};
}

Variablat Sass

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

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

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

Sythe Sass

Variantet e butonave (për butonat e rregullt dhe kontur) 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} {
    @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);
  }
}