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.