Bootstrap 5 Düğme

Düğme stilleri

Bootstrap 5 farklı stillerde düğmeler sağlar:

Örnek

<button type="button" class="btn">Temel</button>
<button type="button" class="btn btn-primary">Ana</button>
<button type="button" class="btn btn-secondary">Tükenmiş</button>
<button type="button" class="btn btn-success">Başarı</button>
<button type="button" class="btn btn-info">Bilgi</button>
<button type="button" class="btn btn-warning">Uyarı</button>
<button type="button" class="btn btn-danger">Tehlikeli</button>
<button type="button" class="btn btn-dark">Koyu Renkli</button>
<button type="button" class="btn btn-light">Açık Renkli</button>
<button type="button" class="btn btn-link">Bağlantı</button>

Kendi Kendine Deneyin

Düğme sınıfları aşağıdakiler için kullanılabilir: <a>ve<button> veya <input> Element:

Örnek

<a href="#" class="btn btn-success">Bağlantı Düğmesi</a>
<button type="button" class="btn btn-success">Düğme</button>
<input type="button" class="btn btn-success" value="Giriş Düğmesi">
<input type="submit" class="btn btn-success" value="Gönder Düğmesi">
<input type="reset" class="btn btn-success" value="Yenileme Düğmesi">

Kendi Kendine Deneyin

Neden bağlantının href özelliğinde bir # yazıyoruz?

Herhangi bir bağlantıya yönlendirilebilecek sayfa olmaması nedeniyle ve "404" mesajı almak istemediğimiz için, # olarak bağlantıyı kullanıyoruz. Gerçek hayatta, bu, "Ara" sayfasının gerçek URL'si olmalıdır.

düğme konturu

Bootstrap 5, sekiz tane kontur/kaynak düğmesi sağlar.

Üzerlerine fareyi götürdüğünüzde ek 'sürükleyiş' etkisi görülebilir:

Örnek

<button type="button" class="btn btn-outline-primary">Ana</button>
<button type="button" class="btn btn-outline-secondary">İkincil</button>
<button type="button" class="btn btn-outline-success">Başarılı</button>
<button type="button" class="btn btn-outline-info">Bilgi</button>
<button type="button" class="btn btn-outline-warning">Uyarı</button>
<button type="button" class="btn btn-outline-danger"> Tehlikeli</button>
<button type="button" class="btn btn-outline-dark">Koyu renkli</button>
<button type="button" class="btn btn-outline-light text-dark">Açık renkli</button>

Kendi Kendine Deneyin

düğme boyutları

büyük düğmelere kullanın .btn-lg sınıfı, küçük düğmelere kullanın .btn-sm sınıf:

Örnek

<button type="button" class="btn btn-primary btn-lg">Büyük</button>
<button type="button" class="btn btn-primary">Varsayılan</button>
<button type="button" class="btn btn-primary btn-sm">Küçük</button>

Kendi Kendine Deneyin

blok düğmesi

Eğer ebeveyn elemanın tamamı genişliğinde blok düğmesi oluşturmak istiyorsanız, ebeveyn elemanın üzerinde .d-grid "helper" sınıfı:

Örnek

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Tam Genişlik Düğmesi</button>
</div>

Kendi Kendine Deneyin

Bir çok blok düğmeniz varsa .gap-* Sınıf, aralarındaki boşlukları kontrol eder:

Örnek

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Tam Genişlik Düğmesi</button>
  <button type="button" class="btn btn-primary btn-block">Tam Genişlik Düğmesi</button>
  <button type="button" class="btn btn-primary btn-block">Tam Genişlik Düğmesi</button>
</div>

Kendi Kendine Deneyin

Etkin/Devre Dışı Düğme

Düğme, etkin (basılı gibi gösterilir) veya devre dışı (tıklanamaz) durumda ayarlanabilir:

sınıfı .active düğmeyi basılı gibi gösterirken disabled Öznitelik, düğmeyi tıklanamaz hale getirir. Lütfen dikkat edin, <a> elementi disabled özniteliğini desteklemez, bu yüzden .disabled Sınıf, görsel olarak devre dışı gösterilmesini sağlar.

Örnek

<button type="button" class="btn btn-primary active">Aktif Ana Düğme</button>
<button type="button" class="btn btn-primary" disabled>Engelli Ana Düğme</button>
<a href="#" class="btn btn-primary disabled">Engelli Bağlantı</a>

Kendi Kendine Deneyin

Yükleyici Düğmesi

Düğmelere "spinner" ekleyebilirsiniz, daha fazla içerik öğreneceksiniz: BS5 Spinner Eğitimimiz

Örnek

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Yükleniyor..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Yükleniyor..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Yükleniyor..
</button>

Kendi Kendine Deneyin