Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

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.

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>
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-nowrap sı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 . <button>Ancak, bu sınıfları da kullanabilirsiniz.<a>Ancak, bu sınıfları or<input> (ancak bazı tarayıcılar biraz farklı bir işleme uygulayabilir).

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

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 .

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

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>

Hatta CSS değişkenleriyle kendi özel boyutlandırmanızı da yapabilirsiniz:

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>

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.

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>

Öğ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
  • Tümünü devre dışı bırakmak için bazı geleceğe uygun stiller dahildirpointer-eventsTüm bağlantı düğmelerini
  • 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ı
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>

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

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.

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>

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

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>

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.

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>

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.

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>

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.

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>
Bağlantıyı aç/kapat Etkin geçiş bağlantısı Devre dışı geçiş bağlantısı
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>

yöntemler

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

const bsButton = new bootstrap.Button('#myButton')
Yöntem Tanım
dispose Bir öğenin düğmesini yok eder. (DOM öğesinde depolanan verileri kaldırır)
getInstance Bir DOM öğesiyle ilişkilendirilmiş düğme örneğini almanızı 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).
toggle İtme durumunu değiştirir. Düğmeye etkinleştirilmiş görünümü verir.

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

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

CSS

Değişkenler

v5.2.0'da eklendi

Bootstrap'in gelişen CSS değişkenleri yaklaşımının bir parçası olarak, düğmeler artık .btngelişmiş gerçek zamanlı özelleştirme için yerel CSS değişkenlerini kullanıyor. CSS değişkenlerinin değerleri Sass aracılığıyla ayarlanır, bu nedenle Sass özelleştirmesi de desteklenmeye devam eder.

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

Her değiştirici sınıf , , , ve karışımlarımızla .btn-*ek CSS kurallarını en aza indirmek için uygun CSS değişkenlerini günceller .button-variant()button-outline-variant()button-size()

.btn-*Bootstrap'ın CSS değişkenlerini kendi CSS ve Sass değişkenlerimizin bir karışımıyla yeniden atayarak, dokümanlarımıza özgü düğmeler için yaptığımız gibi özel bir değiştirici sınıfı oluşturmaya bir örnek .

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

Sas değişkenleri

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

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