İnfografik
← Ünite 14
İnternet Programcılığı 1

Ünite 14: Bootstrap ile Duyarlı Web Tasarımı

Bootstrap Resmi Kaynak Adresi
Bootstrap ile ilgili tüm dokümantasyon, güncel dosyalar ve örnekler https://getbootstrap.com/ adresinden erişilebilir. Geliştiriciler için temel başvuru kaynağıdır.
Bootstrap Sürüm 5.3 İndirme
Bootstrap'in çekirdek dosyalarına https://getbootstrap.com/docs/5.3/getting-started/download/ adresinden ulaşılabilir. Bu dosyalar CSS ve JS klasörleri olarak ayrılmıştır.
Örnek Tema Galerisi
Bootstrap'in hazır temalarını incelemek ve ilham almak için https://themes.getbootstrap.com/ adresi kullanılabilir. Bu temalar farklı ekran boyutlarında test edilebilir.
Carousel Örnek Sayfası
Atlı karınca (Carousel) yapısını incelemek için https://getbootstrap.com/docs/5.3/examples/carousel/ adresi ziyaret edilebilir. Bu sayfa, slayt yapısının nasıl kurulacağını gösterir.

Anahtar Kavramlar

Duyarlı Web TasarımıWeb sitesinin görüntülendiği cihazın ekran boyutuna göre otomatik olarak yeniden şekillenmesi ve yerleşmesi yaklaşımıdır. Örneğin, masaüstünde yan yana duran sütunlar, cep telefonunda alt alta sıralanır.
Çatı (Framework)Web geliştirme sürecinde ihtiyaç duyulan karmaşık CSS ve JavaScript tanımlamalarının önceden hazırlandığı bir geliştirme ortamıdır. Bootstrap, geliştiricilere hazır bileşenler sunarak süreci hızlandırır.
Izgara (Grid) SistemiSayfa yerleşimini düzenlemek için kullanılan 12 sütunlu hayali bir şablondur. Ögelerin genişliği bu sütunların toplamı olan 12 üzerinden belirlenir.
ViewportWeb sayfasının görüntülenebilir alanını belirleyen bir meta etiketidir. Tarayıcının sayfayı sığdırmak için küçültmesini engeller ve duyarlı tasarımın doğru çalışmasını sağlar.
Min SürümDosya boyutunu düşürmek için gereksiz boşlukların ve karakterlerin temizlendiği sıkıştırılmış dosya formatıdır. Web sitesinin daha hızlı yüklenmesini sağlar.
CDN (İnternet Depoları)Bootstrap dosyalarının kendi sunucunuzda değil, internet üzerindeki uzak depolarda tutulup oradan çağrılması yöntemidir. Her zaman en güncel sürümü kullanmayı sağlar.
JumbotronBootstrap içinde genellikle sayfanın üst kısmında yer alan, dikkat çekici karşılama mesajları veya sloganlar için kullanılan bir bölme sınıfıdır.
NavbarWeb sitesinin navigasyonunu sağlayan menü çubuğudur. Bootstrap'te ekran boyutuna göre daralıp genişleyebilen duyarlı bir yapıya sahiptir.
CarouselWeb sayfalarında görsellerin veya içeriklerin slayt şeklinde geçiş yapmasını sağlayan bir Bootstrap bileşenidir.
Konteynır (Container)Sayfa içeriğinin düzenli bir şekilde hizalanmasını ve belirli bir genişlikte tutulmasını sağlayan ana taşıyıcı sınıftır.
PrototipBir web projesinin temel yapısının, tasarım detaylarına girmeden hızlıca oluşturulan ilk taslağıdır. Bootstrap, bu aşamada geliştiriciye büyük kolaylık sağlar.

Diğer Önemli Bilgiler

Album Şablonu

Fotoğraf albümü gibi dikey mimaride çalışan tek sayfalık siteler için https://getbootstrap.com/docs/5.3/examples/album/ adresi ideal bir başlangıç noktasıdır.

CDN Kullanım Yöntemi

Bootstrap dosyalarını indirmeden kullanmak için cdn.jsdelivr.net üzerinden sağlanan linkler kullanılır. Bu yöntem internet bağlantısı gerektirir ancak kurulumu basitleştirir.

Dosya Kaydetme Kuralı

Bir web sayfasını tarayıcıdan kaydederken 'Web sayfası, tamamı' seçeneği seçilmelidir. Aksi takdirde sadece HTML dosyası iner ve CSS/JS dosyaları eksik kalır.

Bootstrap 12 Sütun Kuralı

Bootstrap ızgara sisteminde sayfa genişliği standart olarak 12 sütuna bölünmüştür. Tasarımın düzgün görünmesi için kullanılan sütun sınıflarının toplamı 12'ye tamamlanmalıdır.

Sınavda Dikkat Et

  • Viewport meta etiketinin duyarlı tasarım için zorunlu olduğunu unutmayın; sınavda bu etiketin işlevi sorulabilir.
  • Bootstrap'in 12 sütunlu ızgara sistemini ezberleyin; sütun toplamlarının 12 etmesi gerektiğini hatırlayın.
  • Dosya kaydetme işleminde 'Web sayfası, tamamı' seçeneğinin neden önemli olduğunu (CSS/JS bağımlılığı) mutlaka kavrayın.
  • CDN (internet depoları) kullanımının hem avantajını (güncellik) hem de dezavantajını (internet bağımlılığı) ayırt edin.
  • Bootstrap'in sadece CSS ve JS dosyalarından oluştuğunu, veritabanı gibi sunucu taraflı bileşenler içermediğini aklınızda tutun.
  • Min dosyalarının performans artışı sağladığını, bu yüzden tercih edildiğini unutmayın.