Bootstrap Bileşenler Dropdown 1
Bootstrap Dropdown, kullanıcıların bir menü açarak seçenekleri görüntülemelerini ve seçim yapmalarını sağlayan bir bileşendir. Genellikle formlar, gezinme menüleri veya kullanıcı arayüzü bileşenlerinde kullanılır. Dropdown menüler, kullanıcı etkileşimini artırmak ve arayüzü daha düzenli hale getirmek için harika bir yoldur.
Bootstrap Dropdown Özellikleri
- Çoklu Seçenekler: Kullanıcılar, birden fazla seçenek arasından seçim yapabilir.
- Hiyerarşik Menüler: Dropdown menüler, alt menüler veya hiyerarşik yapı içerebilir.
- Otomatik Kapatma: Dropdown, kullanıcı menüyü kapattığında otomatik olarak kapanabilir.
Kullanım Örneği
Aşağıda, Bootstrap kullanarak basit bir dropdown menüsü örneği verilmiştir. Bu örnekte, kullanıcıların birkaç seçenek arasından seçim yapabileceği bir dropdown menüsü bulunmaktadır.
HTML Kodu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"> <title>Bootstrap Dropdown Örneği</title> </head> <body> <div class="container mt-5"> <h2>Bootstrap Dropdown Örneği</h2> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Seçenekler </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <li> <a class="dropdown-item" href="#">Seçenek 1</a> </li> <li> <a class="dropdown-item" href="#">Seçenek 2</a> </li> <li> <a class="dropdown-item" href="#">Seçenek 3</a> </li> </ul> </div> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"> </script> </body> </html> Açıklama
-
<div class="dropdown">: Dropdown menüsünü kapsayan div. -
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">: Dropdown menüsünü açmak için kullanılan buton.data-bs-toggle="dropdown"özelliği, butona tıklandığında dropdown menüsünü açar. -
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">: Dropdown menüsünün içeriğini kapsayan liste.aria-labelledbyözelliği, erişilebilirlik için buton ile menü arasında ilişki kurar. -
<li><a class="dropdown-item" href="#">Seçenek 1</a></li>: Her bir seçenek için kullanılan liste öğesi.dropdown-itemsınıfı, seçeneklerin stilini belirler.
Önemli Notlar
- Dropdown menüsü, Bootstrap'ın JavaScript bileşenleri ile çalıştığından, JavaScript dosyalarının yüklü olduğundan emin olun.
- Menü öğelerine tıklandığında belirli bir işlev gerçekleştirmek için JavaScript kullanabilirsiniz.
Bootstrap Dropdown, kullanıcıların seçim yapmasını kolaylaştırır ve web arayüzünüzü daha etkileşimli hale getirir. Menülerin düzenlenmesi ve özelleştirilmesi oldukça basittir, bu da geliştirme sürecini hızlandırır.
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 Bileşenler Dropdown 1 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!