Giriş

Bu bölümde uygulamanın görünümü Bootstrap CSS framework kullanılarak köklü biçimde yenileniyor. Tek bir satır Python kodu değiştirilmeden, yalnızca HTML şablonları düzenlenerek profesyonel görünümlü bir arayüz elde ediliyor.

Not: Bu bölüm diğerlerinden farklıdır; Python kodu değiştirilmez. Odak nokta HTML şablonları ve Bootstrap entegrasyonudur. Tam şablon kodları için GitHub reposunu incelemeniz önerilir.

CSS Framework Nedir?

CSS framework'leri, hazır CSS sınıfları ve JavaScript eklentileri ile tüm büyük tarayıcılarda tutarlı görünen, duyarlı (responsive) web sayfaları oluşturmayı kolaylaştırır. Ham HTML/CSS yazmaya kıyasla çok daha az eforla profesyonel sonuçlar elde edilir.

Bootstrap'e Giriş

Bootstrap en popüler CSS framework'lerinden biridir. Sağladığı avantajlar şunlardır: tüm büyük tarayıcılarda tutarlı görünüm, masaüstü/tablet/telefon ekranlarını destekleyen responsive tasarım, özelleştirilebilir düzenler, hazır stilli navigasyon çubukları, formlar, butonlar, uyarı kutuları ve popup'lar.

Bu bölümde Bootstrap 5.3 sürümü kullanılmaktadır.

Bootstrap'i Uygulamaya Eklemek

Bootstrap'in CDN üzerinden eklenmesi için <head> içine CSS, </body> öncesine JavaScript eklenir.

app/templates/base.html — Temel Yapı (Basitleştirilmiş)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% if title %}
    <title>{{ title }} - Microblog</title>
    {% else %}
    <title>Welcome to Microblog</title>
    {% endif %}
    <link
        href="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>"
        rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
        crossorigin="anonymous">
  </head>
  <body>
    <nav>
      <!-- Bootstrap navbar (tam kod GitHub'da) -->
    </nav>
    <div class="container mt-3">
      {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
        <div class="alert alert-info" role="alert">{{ message }}</div>
        {% endfor %}
      {% endif %}
      {% endwith %}
      {% block content %}{% endblock %}
    </div>
    <script
        src="<https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js>"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous">
    </script>
  </body>
</html>

Önemli değişiklikler: