Bootstrap Collapse bileşeni, kullanıcıların içeriği açıp kapatmalarına olanak tanıyan etkileşimli bir bileşendir. Genellikle menüler, yan paneller, form alanları veya bilgi kutuları gibi içerikleri gizlemek veya göstermek için kullanılır. Bu bileşen, kullanıcı arayüzünü daha düzenli ve kullanışlı hale getirmeye yardımcı olur.
Bootstrap Collapse Özellikleri
- Hafif ve Etkili: İçerik gizleme ve gösterme işlemleri basit ve hızlıdır.
- JavaScript ile Etkileşim: Kullanıcı etkileşimleriyle birlikte çalışarak içerik açma ve kapama işlevselliği sunar.
- Görsel Geçişler: İçerik açıldığında veya kapandığında görsel geçiş efektleri ile kullanıcı deneyimini iyileştirir.
Kullanım Örneği
Aşağıda, Bootstrap Collapse bileşenini kullanan bir örnek verilmiştir. Bu örnekte, bir düğmeye tıklanıldığında açılan ve kapanan bir içerik alanı 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 Collapse Example</title>
</head>
<body>
<div class="container mt-5">
<h2>Bootstrap Collapse Örneği</h2>
<p>
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
İçeriği Göster/Gizle
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Bu içerik, tıklanarak açılıp kapanabilir. Bootstrap Collapse bileşeni sayesinde kullanıcılar, içerikleri daha düzenli bir şekilde görüntüleyebilir.
</div>
</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
-
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample">: Bu, içeriği açıp kapatmak için kullanılan düğmedir.data-bs-toggle="collapse"özelliği, bu düğmenin bir collapse bileşenini kontrol ettiğini belirtir.data-bs-target="#collapseExample"ise hangi içeriğin açılıp kapanacağını gösterir. -
<div class="collapse" id="collapseExample">: Açılıp kapanacak olan içeriği kapsayan div'dir.collapsesınıfı, bu içeriğin başlangıçta gizli olacağını belirtir. -
<div class="card card-body">: Açılan içeriğin stilini ve düzenini belirlemek için kullanılan Bootstrap kart bileşeni.
Önemli Notlar
- Bootstrap Collapse bileşeni, JavaScript dosyalarının düzgün bir şekilde yüklendiğinden emin olmayı gerektirir.
- İçeriğin görünümünü daha da özelleştirmek için CSS kullanabilirsiniz.
Bootstrap Collapse, kullanıcıların gereksiz bilgileri gizleyerek daha temiz ve düzenli bir arayüz sunmalarını sağlar. Kullanıcı etkileşimleri ile dinamik bir deneyim oluşturur.