Bootstrap Bileşenler Collapse
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.
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 Collapse 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!