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.
Ö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-hidden
sı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 .btn
ile 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
<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>
Boyutlar
Daha büyük veya daha küçük düğmeler mi istiyorsunuz? Ekle .btn-lg
veya .btn-sm
ek 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 disabled
boolean niteliğini ekleyerek düğmelerin devre dışı görünmesini sağlayın . <button>
Devre dışı bırakılmış düğmeler pointer-events: none
uygulanarak 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ünmesidisabled
için sınıfı eklemelisiniz ..disabled
pointer-events
Tü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
<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 .disabled
sınıf , s'nin pointer-events: none
bağ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: none
klavye 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"
<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ığı md
kesme 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-grid
gap-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-auto
ortalayı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.
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, .active
sı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>
<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-colors
Düğ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);
}
}