Bootstrap Formlar Range
Bootstrap, kullanıcıların bir değer aralığı seçmesine olanak tanıyan range (kaydırıcı) bileşenini destekler. Range bileşeni, kullanıcıların değerleri görsel bir kaydırıcı ile ayarlamasını sağlar. Bu bileşen genellikle fiyat aralığı gibi ayarlamalar yapmak için kullanılır. İşte Bootstrap ile range bileşeninin nasıl kullanılacağına dair bir rehber:
1. Range Bileşeni
Range bileşeni, HTML'deki <input> etiketinin type="range" özelliği ile oluşturulur. Aşağıda basit bir örnek yer almaktadır:
<div class="form-group"> <label for="rangeInput">Değer Aralığı</label> <input type="range" class="form-range" id="rangeInput" min="0" max="100" value="50"> <small>Seçilen Değer: <span id="rangeValue">50</span> </small> </div> 2. Range Bileşeninin Özellikleri
-
min: Kaydırıcının alabileceği en küçük değeri belirtir. -
max: Kaydırıcının alabileceği en büyük değeri belirtir. -
value: Kaydırıcının başlangıç değerini belirtir. -
class="form-range": Bootstrap tarafından sağlanan stil sınıfıdır.
3. Değeri Gösterme
Kullanıcı kaydırıcıyı hareket ettirdiğinde seçilen değeri güncellemek için JavaScript kullanabilirsiniz. Aşağıda, kaydırıcı ile seçilen değeri dinamik olarak gösteren bir örnek verilmiştir:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Range Örneği</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script> function updateValue(value) { document.getElementById('rangeValue').innerText = value; } </script> </head> <body> <div class="container mt-5"> <h2>Range Kaydırıcı Örneği</h2> <form> <div class="form-group"> <label for="rangeInput">Değer Aralığı</label> <input type="range" class="form-range" id="rangeInput" min="0" max="100" value="50" oninput="updateValue(this.value)"> <small>Seçilen Değer: <span id="rangeValue">50</span> </small> </div> <button type="submit" class="btn btn-primary">Gönder</button> </form> </div> </body> </html> 4. Örnek Açıklaması
- HTML Yapısı:
<input type="range">elementi kaydırıcıyı oluşturur. Kullanıcı kaydırıcıyı hareket ettirdikçe,oninputolayını kullanarakupdateValuefonksiyonu çağrılır. - JavaScript Fonksiyonu:
updateValuefonksiyonu, kaydırıcının mevcut değerini alır ve sayfadaki ilgili<span>elementinin içeriğini günceller.
5. Özelleştirme
Bootstrap ile birlikte range bileşenini özelleştirmek için CSS kullanabilirsiniz. Örneğin, kaydırıcının rengini ve boyutunu değiştirmek mümkündür:
.form-range { background-color: #f0f0f0; /* Arka plan rengi */ border-radius: 5px; /* Kenar yuvarlama */ } Özet
Bootstrap ile range kaydırıcı bileşenini kullanarak kullanıcıların bir değer aralığını görsel olarak seçmelerini sağlayabilirsiniz. Bu bileşen, etkileşimli formlar oluşturmak için etkili bir yöntemdir. Kaydırıcının değerini dinamik olarak göstermek için JavaScript kullanarak kullanıcı deneyimini artırabilirsiniz. Daha fazla bilgi ve detaylar için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.
Bu ders size yardımcı oldu mu? Puan verin!
Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.
Sıkça Sorulan Sorular (SSS)
Bu ders ve konuyla ilgili en çok merak edilenler
Bootstrap Formlar Range dersini öğrenmek için ön koşul var mı?
Bu eğitim temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.
Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?
Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.
Takıldığım bir yerde nereden soru sorabilirim?
Dersin altındaki topluluk yorumları bölümünden sorunuzu sorabilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.
Topluluk Yorumları (0)
Ders Hakkında Yorum Yap veya Soru Sor
Henüz yorum yapılmamış. İlk yorumu siz yazın!