Düğmeler

Birden çok boyut, durum ve daha fazlasını destekleyen formlardaki, iletişim kutularındaki ve daha fazlasındaki eylemler için Bootstrap'in özel düğme stillerini kullanın.

Bu sayfada

Örnekler

Bootstrap, her biri kendi anlamsal amacına hizmet eden önceden tanımlanmış birkaç düğme stili içerir ve daha fazla kontrol için birkaç ekstra eklenir.

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

Yardımcı teknolojilere anlam taşıma

Renkleri anlam eklemek için kullanmak yalnızca görsel bir gösterge sağlar ve ekran okuyucular gibi yardımcı teknolojilerin kullanıcılarına iletilmez. Renkle gösterilen bilgilerin ya içeriğin kendisinden (örn. görünen metin) açık olduğundan ya da .visually-hiddensınıfla gizlenmiş ek metin gibi alternatif yollarla dahil edildiğinden emin olun.

Metin kaydırmayı devre dışı bırak

Düğme metninin sarılmasını istemiyorsanız, .text-nowrapsınıfı düğmeye ekleyebilirsiniz. Sass'ta, her düğme için metin kaydırmayı devre dışı bırakacak şekilde ayarlayabilirsiniz $btn-white-space: nowrap.

Düğme etiketleri

Sınıflar, eleman .btnile kullanılmak üzere tasarlanmıştır . Ancak, bu sınıfları or öğelerinde <button>de kullanabilirsiniz (ancak bazı tarayıcılar biraz farklı bir işleme uygulayabilir).<a><input>

Mevcut sayfadaki yeni sayfalara veya bölümlere bağlantı vermek yerine, sayfa içi işlevselliği tetiklemek için kullanılan öğelerde (içeriği daraltmak gibi) düğme sınıfları kullanırken , bu bağlantılara amaçlarını aşağıdaki gibi yardımcı teknolojilere uygun şekilde iletmek için <a>verilmelidir . role="button"ekran okuyucular

Bağlantı

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

Anahat düğmeleri

Bir düğmeye mi ihtiyacınız var, ancak getirdikleri iri arka plan renklerine değil mi? .btn-outline-*Herhangi bir düğmedeki tüm arka plan resimlerini ve renklerini kaldırmak için varsayılan değiştirici sınıfları değiştirin .

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

Bazı düğme stilleri nispeten açık bir ön plan rengi kullanır ve yeterli kontrast elde etmek için yalnızca koyu bir arka planda kullanılmalıdır.

Boyutlar

Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ekle .btn-lgveya .btn-smek boyutlar için.

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

Engelli durumu

Herhangi bir öğeye disabledboolean niteliğini ekleyerek düğmelerin devre dışı görünmesini sağlayın . <button>Devre dışı bırakılmış düğmeler pointer-events: noneuygulanarak fareyle üzerine gelme ve etkin durumların tetiklenmesi engellendi.

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

Öğeyi kullanan devre dışı bırakılan düğmeler <a>biraz farklı davranır:

<a>s özelliği desteklemiyor , bu nedenle görsel olarak devre dışı görünmesi disablediçin sınıfı eklemelisiniz ..disabled
pointer-eventsTüm bağlantı düğmelerini devre dışı bırakmak için geleceğe yönelik bazı stiller dahil edilmiştir .
Devre dışı bırakılan düğmeler , öğenin durumunu yardımcı teknolojilere belirtmek için özniteliği <a>içermelidir .aria-disabled="true"
Devre dışı bırakılan düğmeler , özniteliği <a> içermemelidir .href

Birincil bağlantı Bağlantı

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Bağlantı işlevi uyarısı

hrefÖzniteliği devre dışı bırakılmış bir bağlantıda tutmanız gereken durumları kapsamak için .disabledsınıf , s'nin pointer-events: nonebağlantı işlevini devre dışı bırakmayı denemek için kullanır. <a>Bu CSS özelliğinin henüz HTML için standartlaştırılmadığını, ancak tüm modern tarayıcıların bunu desteklediğini unutmayın. Ek olarak, destekleyen tarayıcılarda bile pointer-events: noneklavye gezintisi etkilenmeden kalır, bu da gören klavye kullanıcıları ve yardımcı teknolojilerin kullanıcılarının bu bağlantıları etkinleştirebilecekleri anlamına gelir. Güvende olmak için, ek olarak , klavye odağını almalarını önlemek için bu bağlantılara aria-disabled="true"bir öznitelik de ekleyin ve işlevlerini tamamen devre dışı bırakmak için özel JavaScript kullanın.tabindex="-1"

Birincil bağlantı Bağlantı

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

Düğmeleri engelle

Görüntüleme ve boşluk yardımcı programlarımızın bir karışımıyla Bootstrap 4'teki gibi tam genişlikte, "blok düğmeleri"nden oluşan duyarlı yığınlar oluşturun. Düğmeye özel sınıflar yerine yardımcı programları kullanarak, boşluk, hizalama ve duyarlı davranışlar üzerinde çok daha fazla kontrole sahibiz.

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

Burada, sınıfın yerini aldığı mdkesme noktasına kadar dikey olarak yığılmış düğmelerle başlayan ve böylece yardımcı programı geçersiz kılan duyarlı bir varyasyon oluşturuyoruz. Değiştiklerini görmek için tarayıcınızı yeniden boyutlandırın..d-md-block.d-gridgap-2

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

Grid sütun genişlik sınıfları ile blok butonlarınızın genişliğini ayarlayabilirsiniz. Örneğin, yarım genişlikte bir "blok düğmesi" için kullanın .col-6. ile yatay olarak .mx-autoortalayın.

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

Yatay olduğunda düğmelerin hizalamasını ayarlamak için ek yardımcı programlar kullanılabilir. Burada önceki duyarlı örneğimizi aldık ve artık istiflenmediklerinde düğmeleri sağa hizalamak için bazı esnek yardımcı programlar ve bir kenar boşluğu yardımcı programı ekledik.

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

Düğme eklentisi

Düğme eklentisi, basit açma/kapama geçiş düğmeleri oluşturmanıza olanak tanır.

Görsel olarak, bu geçiş düğmeleri, onay kutusu geçiş düğmeleriyle aynıdır . Bununla birlikte, yardımcı teknolojiler tarafından farklı şekilde iletilirler: onay kutusu geçişleri ekran okuyucular tarafından "işaretli"/"işaretli değil" olarak duyurulur (çünkü görünümlerine rağmen temelde hala onay kutularıdırlar), oysa bu geçiş düğmeleri olarak duyurulacaktır. “düğme”/ “düğmeye basıldı”. Bu iki yaklaşım arasındaki seçim, oluşturduğunuz geçiş türüne ve geçişin bir onay kutusu veya gerçek bir düğme olarak duyurulduğunda kullanıcılar için anlamlı olup olmayacağına bağlı olacaktır.

Durumları değiştir

data-bs-toggle="button"Bir düğmenin durumunu değiştirmek için Ekle active. Bir düğmeyi önceden değiştiriyorsanız, .activesınıfı manuel olarak eklemeniz ve aria-pressed="true" yardımcı teknolojilere uygun şekilde iletildiğinden emin olmanız gerekir.

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

Bağlantıyı aç/kapat Etkin geçiş bağlantısı Devre dışı geçiş bağlantısı

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

yöntemler

Düğme oluşturucuyla bir düğme örneği oluşturabilirsiniz, örneğin:

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

Yöntem	Tanım
`toggle`	İtme durumunu değiştirir. Düğmeye etkinleştirilmiş görünümü verir.
`dispose`	Bir öğenin düğmesini yok eder. (DOM öğesinde depolanan verileri kaldırır)
`getInstance`	Bir DOM öğesiyle ilişkilendirilmiş düğme örneğini elde etmenizi sağlayan statik yöntem, bunu şu şekilde kullanabilirsiniz:`bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Bir DOM öğesiyle ilişkilendirilmiş bir düğme örneği döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz:`bootstrap.Button.getOrCreateInstance(element)`

Örneğin, tüm düğmeleri değiştirmek için

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

küstah

Değişkenler

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

karışımlar

Düğmeler için üç miksaj vardır: düğme ve düğme anahat varyant miksleri (her ikisi de 'ye dayalıdır $theme-colors), artı bir düğme boyutu miksajı.

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

döngüler

$theme-colorsDüğme çeşitleri (normal ve anahat düğmeleri için) , içinde değiştirici sınıfları oluşturmak için haritamızla ilgili karışımlarını kullanır 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);
  }
}