Bootstrap, 2013’te piyasaya sürülmesinden bu yana, geliştiricilerin web sayfalarını biçimlendirme biçiminde devrim yarattı. Bootstrap, duyarlı web uygulamaları tasarlamak için kullanılan popüler bir ön uç çerçevedir.
Django, web sayfalarına stil vermek için Bootstrap’in önceden oluşturulmuş CSS stillerini ve JavaScript eklentilerini kullanır. Stil verme zahmetini azaltsa da Django’da yapılandırmak zor olabilir.
Bir Django uygulamasında Bootstrap’i nasıl kuracağınızı ve yapılandıracağınızı öğrenelim.
Önyükleme Nasıl Kurulur
Bir Django projesinde Bootstrap 5’i kullanmanın iki yolu vardır . Bunu uygulamanıza yükleyebilir veya Bootstrap’in CDN’sini kullanarak dosyalara başvurabilirsiniz . Bu proje önceki yöntemi kullanacaktır.
Bootstrap’i kurmadan önce, bir Django projesi ve galeri adlı bir uygulama oluşturun. Uygulama bir fotoğraf galerisi olacak ve uygulamanın gezinme çubuğuna stil vermek için Bootstrap’i kullanacaksınız.
Ardından, Bootstrap’i aşağıdaki komutla kurun:
pipenv install django-bootstrap5 # installs Bootstrap version 5
Pip dosyasını kontrol edin ve bir Bootstrap 5 bağımlılığı olduğunu onaylayın. Şimdi bir Bootstrap bağımlılığı kullandığınızı Django projesine bildirmeniz gerekiyor.
settings.py dosyasında Bootstrap’i aşağıda gösterildiği gibi kaydedin :
INSTALLED_APPS = [n ‘gallery’,n ‘bootstrap5’, n]
Bootstrap’i proje ayarlarında kaydetmek, django-bootstrap5 bağımlılığını projenize bağlar. Projede tanımlanan diğer herhangi bir uygulama tarafından kullanılabilir olacaktır.
Bir Şablona Önyükleme Uygula
İlk önce, uygulama klasörünüzde şablonlar adlı bir klasör oluşturun. Bu klasörün içinde bir base.html dosyası ve bir navbar.html dosyası oluşturun. Şablonlar, Bootstrap’in biçimlendireceği HTML dosyalarını içerecektir.
Bootstrap’i navbar.html şablonuna uygulayabilseniz de , bir temel dosya kullanmak gelenekseldir. Bir base.html dosyası, herhangi bir sayfaya uygulanacak tüm komut dosyalarını ve bağlantıları içerecektir. Tek tek şablonların karmaşıklığını azaltarak kodunuzu daha temiz ve daha kolay anlaşılır hale getirir.
base.html dosyasına aşağıdakileri ekleyin:
{% load bootstrap5 %}n n n<!DOCTYPE html>n n<html lang=”en”>n n<head>n n <meta charset=”UTF-8″>n n <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>n n <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>n <title> Gallery </title>n n n {% block styles %}n n n {% bootstrap_css %}n n n {% endblock %}n n</head>n<body> n {% include ‘navbar.html’ %}n {% block content %} {% endblock %}n {% block scripts %}n <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js” integrity=”sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM” crossorigin=”anonymous”>n </script>n {% bootstrap_javascript %}n</body>n</html>n
İlk olarak, bootstrap5 bağımlılığını yükleyin. Ardından, şablonlar için tüm stilleri tanımlayacağınız iki blok stili oluşturun. {% bootstrap_css %} şablon etiketini ve Bootstrap CSS dosyasına bir bağlantı ekleyin .
Ardından, JavaScript işlevselliğini tanımlayan bir blok komut dosyası oluşturun.
navbar.html dosyasının base.html dosyasına dahil edilmesi, onu Bootstrap’e bağlar.
Navbar.html şablonuna Bootstrap stilleri ekleyerek yapılandırmayı test edin :
<nav class=”navbar navbar-expand-lg”>n <div class=”container-fluid”>n <h2 class=”brand” style=”color:green”>PICHA GALLERY</h2>n n <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false” aria-label=”Toggle navigation”><i class=”fas fa-bars”></i></button>n n <div class=”collapse navbar-collapse” id=”navbarSupportedContent”>n <ul class=”navbar-nav ml-auto mb-2 mb-lg-0″>n <li class=”nav-item”><a class=”nav-link nav-link-1 active” aria-current=”page” href=”{% url ‘home’ %}” style=”color:green”>Home</a></li>n <li class=”nav-item”><a class=”nav-link nav-link-2″ href=”#gallery” style=”color:green”>Gallery</a</li>n </ul>n </div>n </div>n</nav>
Şimdi sunucuyu çalıştırın ve sitenizi bir tarayıcıda kontrol edin. Bootstrap’in gezinti çubuğuna uyguladığı stili görmelisiniz.
tarayıcıda stil gezinme çubuğu
Django Projelerinde Neden Bootstrap Kullanılır?
Django’yu çoğunlukla arka uç geliştirme için kullanacaksınız, ancak harika ön uç sayfaları da yapabilir. Ön uç sayfaları biçimlendirmek için Bootstrap kullanmak, Django’ya yeni başlayanlar için iyi bir uygulamadır. Tam yığın uygulamalar oluşturduğunuzda, Django’yu derinlemesine anlarsınız.
Herhangi bir ön uç çerçeve gibi, web sayfalarınızın stilini belirlemek için bir Django projesiyle Bootstrap sınıflarını kullanabilirsiniz. Bootstrap 5, daha iyi bileşenlere ve hızlı bir stil sayfasına sahiptir. Ayrıca, modern cihazlar için geliştirilmiş yanıt verebilirliğe sahiptir.
Django projeleriniz için harika kullanıcı arayüzleri tasarlamak ve oluşturmak için neden Bootstrap kullanmıyorsunuz? Django, web geliştirme yetenekleriyle sizi şaşırtacak.