Bootstrap 4 Jquery Buton Ekleme

Bootstrap 4 ile jQuery Kullanarak Düğme Ekleme

Bootstrap 4, web geliştirme için popüler bir çerçevedir ve jQuery, web sayfalarının etkileşimliliğini artırmak için kullanılan bir JavaScript kütüphanesidir. Bu iki güçlü aracı birleştirerek, web sayfalarınıza kolayca düğmeler ekleyebilir ve bunlara özel işlevler atayabilirsiniz.

jQuery ile Bootstrap 4 Düğmesi Ekleme

Bootstrap 4’te düğmeler, <button> etiketi kullanılarak oluşturulur. jQuery kullanarak bir düğme eklemek için şu adımları izleyin:

  1. jQuery kütüphanesini web sayfanıza ekleyin:

“`html

“`

  1. Bootstrap 4 CSS dosyasını web sayfanıza ekleyin:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  1. jQuery kodunu kullanarak bir düğme oluşturun:

javascript
$(document).ready(function() {
$("body").append("<button type='button' class='btn btn-primary'>Tıkla Beni</button>");
});

Bu kod, web sayfanızın gövdesine “Tıkla Beni” metniyle birincil bir düğme ekleyecektir.

Bootstrap 4 Düğmelerine İşlev Ekleme

jQuery kullanarak Bootstrap 4 düğmelerine işlevler atayabilirsiniz. Bunu yapmak için .on() yöntemini kullanın:

javascript
$(document).ready(function() {
$("button").on("click", function() {
alert("Tıklandı!");
});
});

Bu kod, web sayfanızdaki tüm düğmelere bir tıklama işleyicisi ekler ve bir düğmeye tıklandığında bir uyarı penceresi görüntüler.

Bootstrap 4 Düğme Çeşitleri

Bootstrap 4, çeşitli düğme çeşitleri sunar:

  • Birincil Düğmeler: Varsayılan düğme türüdür ve mavi renktedir.
  • İkincil Düğmeler: Gri renktedir ve birincil düğmelerden daha az belirgindir.
  • Başarı Düğmeleri: Yeşil renktedir ve başarılı işlemleri göstermek için kullanılır.
  • Uyarı Düğmeleri: Sarı renktedir ve kullanıcıları potansiyel sorunlar konusunda uyarır.
  • Tehlike Düğmeleri: Kırmızı renktedir ve tehlikeli veya yıkıcı işlemleri göstermek için kullanılır.

Düğme türünü belirtmek için btn-primary, btn-secondary, btn-success, btn-warning veya btn-danger sınıflarını kullanın.

Bootstrap 4 Düğme Boyutları

Bootstrap 4 düğmeleri çeşitli boyutlarda gelir:

  • Küçük: btn-sm sınıfını kullanın.
  • Orta: Varsayılan boyuttur.
  • Büyük: btn-lg sınıfını kullanın.

Bootstrap 4 Düğme Durumları

Bootstrap 4 düğmeleri, etkin veya devre dışı bırakılmış gibi çeşitli durumlarda olabilir:

  • Etkin: Varsayılan durumdur.
  • Devre Dışı Bırakılmış: disabled özniteliğini kullanın.
  • Yükleniyor: disabled özniteliğini ve btn-loading sınıfını kullanın.

Faydalı Kaynaklar

Sonuç

Bootstrap 4 ve jQuery’yi kullanarak web sayfalarınıza kolayca düğmeler ekleyebilir ve bunlara özel işlevler atayabilirsiniz. Bu, kullanıcı deneyimini iyileştirmenize ve web uygulamalarınızı daha etkileşimli hale getirmenize yardımcı olabilir.

Yayımlandı

kategorisi