Tüm udemy kurslarım için 15NISAN2024 indirim kodunu kullanabilirsin.Kursları incelemek için tıklayınız.
2455

Python ile Sıfırdan İleri Seviye Python Programlama

Django Bootstrap

Django ile web geliştirme dersleri serimizin bu bölümünde django projesinde bootstrap kütüphanesini nasıl kullanırız, öğrenelim.

 

Bootstrap bir css ve javascript kütüphanesidir. Eğer bootstrap bilginiz yoksa endişe etmenize gerek yok gerekli yerlerde yeterli açıklamayı yapacağım ancak bootstrap kütüphanesini iyi bir şekilde öğrenmek oldukça önemli. Aşağıdaki kaynaklardan yardım alabilirsiniz.

Bootstrap video kaynak için tıklayınız.

Bootstrap yazılı kaynak için tıklayınız.

Django projemizin ana dizinindeki static/css klasörüne bootstrap.min.css ve static/js klasörüne ise bootstrap.min.js isminde dosya ekleyiniz ve dosya içeriğini ise aşağıdaki linklerden kopyalayınız.

Bootstrap css kütüphane linki: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

Bootstrap javascript kütüphane linki: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js

django bootstrapProjeye dahil ettiğimiz kütüphaneyi projedeki tüm html sayfalarında kullanacağımızdan dolayı kütüphaneyi base.html dosyasında tanıtıyorum.

base.html

{% load static %}

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} {%endblock%} | Blogapp</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    {% block css_files %} {% endblock %}
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Posts</a></li>
        </ul>
    </nav>

    {% block content %}{% endblock %}

    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    {% block js_files %} {% endblock %}
</body>
</html>

** Projeyi çalıştırarak ziyaret ettiğiniz her sayfanın kaynağındaki kütüphane linklerine tıklayarak kütüphanenin düzgün bir şekilde eklendiğinden emin olabilirsiniz.

django bootstrap

Artık bootstrap kütüphanesini django projemize ekledik. Şimdi bazı bootstrap component' lerini projemize ekleyelim. 

Navbar Component

Navbar sayfanın üstündeki nav kısmını temsil ediyor ve tüm html sayfalarında ortak olması için base.html sayfasına aşağıdaki içeriği ekleyelim.

{% load static %}

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %} {%endblock%} | Blogapp</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    {% block css_files %} {% endblock %}
</head>
<body>

    <nav class="navbar navbar-dark bg-primary navbar-expand-lg ">
        <div class="container">
            <a class="navbar-brand" href="#">Blogapp</a>
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blogs</a>
                </li>
            </ul>              
            </div>
        </div>
    </nav>

    {% block content %}{% endblock %}

    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    {% block js_files %} {% endblock %}
</body>
</html>

Artık ziyaret ettiğimiz her sayfanın en üstünde bir navbar kısmı mevcut. Şimdi ise her html sayfasına özel olan içeriklerimizi ekleyelim.

Bootstrap Grid Kullanımı

Bootstrap ile responsive bir tasarımı kolaylıkla hazırlayabiliriz. 

index.html sayfasındaki içerikleri .container sınıfına sahip bir div içerisine alalım.

index.html

{% extends "base.html" %}
{% load static %}

{% block css_files %}
    <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}">
{% endblock %}

{% block title %} Anasayfa {% endblock %}

{% block content %}
<div class="container mt-3">
    <div class="row">
        <div class="col-3">
           Kategori Listesi
        </div>
        <div class="col-9">
            Blog Listesi            
        </div>
    </div>
</div>
{% endblock %}

Artık sayfamızı ziyaret eden farklı tarayıcı genişliklerinde .container sınıfı farklı genişlikte açılacağından dolayı responsive bir tasarıma sahip olacağız.

.container sınıfı içerisinde ise .row sınıfı ile bir satır oluşturarak satırı maksimum 12 kolona bölebiliyoruz. Örneğimizde satırı .col-3 ve .col-9 ile ikiye bölüyorum. Ayrıca .mt-3 sınıfı ile içeriği navbardan aşağı doğru kaydırıyoruz. (margin-top)

List Group Component

3' lük kolon kısmına ise kategorileri temsil edecek olan bir list group component' i ekleyelim.

<div class="col-3">

       <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active"> Web Geliştirme </a>
            <a href="#" class="list-group-item list-group-item-action">Mobile Uygulama</a>
            <a href="#" class="list-group-item list-group-item-action">Veri Analizi</a>              
       </div>

</div>

Uygulamayı çalıştırdığımızda ekran görüntüsü aşağıdaki gibidir.

django bootstrap

Artık django projelerimizde bootstrap kütüphanesini kullanarak sıfırdan css yazmadan profesyonel görüntüye sahip web tasarımlarını kolaylıkla geliştirebiliriz. Dersteki projeyi indirebilirsiniz.

Projeyi indir.

Kurs Sayfasına Git  
Paylaş