Ek bilgiler
Base Şablona Navbar ve Footer Bileşenlerinin Dahil Edilmesi
Projeye navigasyon eklemeden önce kritik bir hazırlık adımı olarak Bootstrap kütüphanesini bootstrap.min.js yerine bootstrap.bundle.min.js ile güncelledik. İleride açılır menüler, modallar veya dinamik bileşenler kullandığımızda Popper bağımlılıkları yüzünden sorun yaşamamak adına bu ayrım oldukça önemlidir. Ardından Bootstrap üzerinden sade bir navbar yapısı alıp Todo uygulamamıza göre sadeleştirdik; menü elemanlarını ana sayfa ve ileride ekleyeceğimiz kategoriler için hazır hale getirdik.
Hazırladığımız navbar dosyasını projeye kaydetmek sayfada anında görünmesi için yetmiyor; Django'nun şablon yapısında bu parçayı base.html içerisinde include etmemiz gerekiyor. Sayfa yerleşiminin bozulmaması için navigasyonu ana container yapısının dışına, en üste yerleştirdik. Benzer mantıkla sayfanın altı için koyu temalı, sade bir footer bileşeni oluşturup yine include etiketiyle temel şablonun en altına bağladık.
Arayüzün göze daha dengeli görünmesi için tasarım üzerinde ufak dokunuşlar yaptık. Navbar'daki container-fluid yapısını container ile değiştirerek içeriği merkeze topladık; koyu temayla uyumlu olması için navbar-dark ve bg-dark sınıflarını uyguladık. Ana içerik ve footer alanlarına my-5 ve mt-5 boşlukları vererek sayfaya nefes aldırdık. Böylece temel iskelet tamamlandı; bir sonraki aşamada view içerisindeki verileri şablona taşımak için sorgularımızı yazmaya hazırız.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Bootstrap Bundle Tercihi: Açılır menü ve tooltip gibi dinamik bileşenlerin harici kütüphane aramadan sorunsuz çalışması için
bootstrap.bundle.min.js kullanılmalıdır.
- Django Include Mantığı: Ayrı şablon parçaları (navbar, footer) oluşturulduğunda sayfada görünebilmesi için
base.html içerisinde {% include %} ile çağrılmalıdır.
- Doğru Hiyerarşik Yerleşim: Tam genişlik kaplaması istenen navbar gibi bileşenler ana sayfa
container div'inin dışına konumlandırılmalıdır.
- Tema ve Tipografi Uyumu: Koyu arka plan (
bg-dark) kullanılan navbar yapılarında metinlerin ve butonların okunabilirliği için navbar-dark sınıfı tercih edilmelidir.
- Boşluklandırma ve Düzen: Sayfa elemanlarının birbirine yapışmasını önlemek ve arayüze nefes aldırmak için Bootstrap boşluk (spacing) sınıflarından (
my-5, mt-5) faydalanılmalıdır.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)