Bootstrap Arama Butonu Ekleme: Kapsamlı Bir Kılavuz
Bootstrap, web geliştirme için popüler bir çerçevedir ve kullanıcı arayüzü bileşenleri oluşturmayı kolaylaştırır. Arama butonları, web sitelerinde yaygın olarak kullanılan önemli bir bileşendir ve Bootstrap, bunları kolayca eklemenize olanak tanır. Bu makale, Bootstrap’te arama butonu ekleme konusunda adım adım bir kılavuz sağlayacak ve konuyla ilgili faydalı kaynaklara bağlantılar içerecektir.
Adım 1: Bootstrap’i Sayfanıza Ekleyin
Bootstrap’i sayfanıza eklemek için aşağıdaki <link> etiketini <head> bölümüne ekleyin:
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Adım 2: Arama Formu Oluşturun
Arama butonu bir arama formu içinde yer almalıdır. Aşağıdaki HTML kodunu kullanarak bir arama formu oluşturabilirsiniz:
“`html
“`
Adım 3: Bootstrap Sınıfları Ekleyin
Bootstrap, arama butonunu şekillendirmek için çeşitli sınıflar sağlar. Aşağıdaki sınıfları arama butonuna ekleyin:
btn: Butonun bir buton olduğunu belirtir.btn-primary: Butona mavi bir arka plan ve beyaz bir metin rengi verir.ml-2: Butonu arama alanından 2em sola kaydırır.
html
<button type="submit" class="btn btn-primary ml-2">Ara</button>
Adım 4: İsteğe Bağlı Özellikler
Arama butonuna isteğe bağlı olarak aşağıdaki özellikleri ekleyebilirsiniz:
name: Butona bir ad verir.value: Butona bir değer verir.disabled: Butonu devre dışı bırakır.data-toggle: Butona bir açılır menü veya modal gibi bir eylem tetikleyicisi ekler.
Faydalı Kaynaklar
Sonuç
Bootstrap’te arama butonu eklemek, web sitenize kullanıcı dostu bir arama işlevi eklemenin kolay bir yoludur. Bu kılavuzdaki adımları izleyerek, Bootstrap’in güçlü sınıflarını kullanarak hızlı ve kolay bir şekilde arama butonları oluşturabilirsiniz.