PHPHocası Yazılım Akademisi
Bootstrap 5 Components 2026 Güncel

Bootstrap Bileşenler Modal 1

4 dk okuma süresi • 560 görüntülenme • 2024-10-06 • 4.9 (14 değerlendirme)

Bootstrap Modal, kullanıcıların etkileşimde bulunabileceği, sayfanın geri kalanını geçici olarak kaplayan bir iletişim kutusudur. Modallar, genellikle kullanıcıdan bilgi almak, bildirimde bulunmak veya önemli içerikleri vurgulamak için kullanılır. Bootstrap ile modal bileşeni, hızlı bir şekilde oluşturulabilir ve özelleştirilebilir.

Bootstrap Modal Özellikleri

  1. Geçici Kaplama: Modal, arka planda kalan içeriği bulanıklaştırarak kullanıcı dikkatini çeker.
  2. Kolay Kapatma: Kullanıcılar, modali kapatmak için "X" butonuna tıklayabilir veya dış alana tıklayarak kapatabilir.
  3. Hızlı İçerik Değişimi: Modal içerikleri, AJAX veya JavaScript ile dinamik olarak güncellenebilir.

Kullanım Örneği

Aşağıda, Bootstrap Modal bileşenini kullanan basit bir örnek verilmiştir. Bu örnekte, bir butona tıklandığında modal iletişim kutusu açılmaktadı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 Modal Örneği</title> </head> <body> <div class="container mt-5"> <h2>Bootstrap Modal Örneği</h2> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Modal Aç </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal Başlığı</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button> </div> <div class="modal-body"> Buraya modal içeriği yazılacak. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button> <button type="button" class="btn btn-primary">Kaydet Değişiklikler</button> </div> </div> </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 type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> : Bu buton, modalı açmak için kullanılır. data-bs-toggle ve data-bs-target özellikleri, butona tıklandığında hangi modalın açılacağını belirtir.
  • Modal Yapısı:
    • <div class="modal fade" id="exampleModal"> : Modal bileşenini tanımlar. fade sınıfı, modalın açıldığında yavaşça görünmesini sağlar.
    • Modal İçeriği:
      • <div class="modal-header"> : Modal başlığı ve kapatma butonu burada yer alır.
      • <div class="modal-body"> : Kullanıcıya gösterilecek ana içerik burada bulunur.
      • <div class="modal-footer"> : Kapatma ve diğer eylem düğmeleri burada yer alır.

Önemli Notlar

  • Modalın açılması ve kapanması için Bootstrap'ın JavaScript bileşenlerinin yüklenmesi gerekir.
  • Modallar, duyarlı (responsive) tasarım için otomatik olarak boyutlandırılır ve ekran boyutuna göre uyum sağlar.

Bootstrap Modal, kullanıcı etkileşimini artırmak ve önemli bilgileri vurgulamak için etkili bir araçtır. Web uygulamalarınızda modallar kullanarak kullanıcı deneyimini geliştirebilir ve içeriklerinizi daha erişilebilir hale getirebilirsiniz.

Bu Dersi Değerlendirin

Bu ders size yardımcı oldu mu? Puan verin!

Geri bildiriminiz içeriğimizi sürekli güncel ve kaliteli tutmamızı sağlar.

4.9 / 5 (Toplam 14 oy kullanıldı)

Sıkça Sorulan Sorular (SSS)

Bu ders ve konuyla ilgili en çok merak edilenler

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

Paylaş:
PHP Hocası Akademi
Önceki Ders Bootstrap Bileşenler List Group 2 Sonraki Ders Bootstrap Bileşenler Modal 2

Topluluk Yorumları (0)

Ders Hakkında Yorum Yap veya Soru Sor

Henüz yorum yapılmamış. İlk yorumu siz yazın!