Bootstrap 4’te jQuery ile Düğme Ekleme
Bootstrap 4, web geliştirmeyi kolaylaştıran güçlü bir CSS çerçevesidir. jQuery, web sayfalarına etkileşim ve animasyon eklemek için kullanılan popüler bir JavaScript kütüphanesidir. Bu iki güçlü aracı birleştirerek, web sayfalarınıza kolayca düğmeler ekleyebilir ve bunlara etkileşimli özellikler kazandırabilirsiniz.
jQuery ile Bootstrap 4 Düğmesi Ekleme
jQuery kullanarak Bootstrap 4 düğmesi eklemek için şu adımları izleyin:
- jQuery’yi Sayfanıza Ekleyin: jQuery kütüphanesini web sayfanıza ekleyin. Bunu, aşağıdaki
<script>etiketini sayfanızın<head>bölümüne ekleyerek yapabilirsiniz:
“`html
“`
- Bootstrap CSS’sini Ekleyin: Bootstrap CSS dosyasını web sayfanıza ekleyin. Bunu, aşağıdaki
<link>etiketini sayfanızın<head>bölümüne ekleyerek yapabilirsiniz:
html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
- jQuery Kodunu Ekleyin: jQuery kodunu web sayfanıza ekleyin. Bu kod, düğmeyi oluşturacak ve ona etkileşimli özellikler kazandıracaktır.
“`javascript
$(function() {
// Düğme metnini ve türünü ayarlayın
var buttonText = “Tıkla Beni”;
var buttonType = “primary”;
// Düğmeyi oluşturun
var button = $(‘
// Düğmeye tıklama işleyicisi ekleyin
button.click(function() {
alert(“Tıkladın!”);
});
// Düğmeyi web sayfasına ekleyin
$(“body”).append(button);
});
“`
Bootstrap 4 Düğme Türleri
Bootstrap 4, çeşitli stiller ve işlevler sunan bir dizi düğme türü sağlar:
- Varsayılan: Gri arka planlı ve siyah metinli varsayılan düğme.
- Birincil: Mavi arka planlı ve beyaz metinli birincil düğme.
- İkincil: Beyaz arka planlı ve gri metinli ikincil düğme.
- Başarı: Yeşil arka planlı ve beyaz metinli başarı düğmesi.
- Uyarı: Sarı arka planlı ve siyah metinli uyarı düğmesi.
- Tehlike: Kırmızı arka planlı ve beyaz metinli tehlike düğmesi.
- Bilgi: Mavi arka planlı ve beyaz metinli bilgi düğmesi.
- Işık: Beyaz arka planlı ve gri metinli ışık düğmesi.
- Koyu: Gri arka planlı ve beyaz metinli koyu düğme.
- Bağlantı: Bağlantı gibi görünen bir düğme.
Bootstrap 4 Düğme Boyutları
Bootstrap 4, düğmeler için üç farklı boyut seçeneği sunar:
- Küçük: Küçük ekranlar için tasarlanmış küçük düğmeler.
- Orta: Çoğu kullanım durumu için uygun orta boy düğmeler.
- Büyük: Büyük ekranlar için tasarlanmış büyük düğmeler.
Bootstrap 4 Düğme Durumları
Bootstrap 4, düğmeler için çeşitli durumlar sağlar:
- Etkin: Varsayılan düğme durumu.
- Devre Dışı: Kullanıcı etkileşimine izin verilmeyen devre dışı bırakılmış düğme.
- Yükleniyor: Yükleniyor durumunu gösteren düğme.
- Aktif: Aktif durumunu gösteren düğme.