Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

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

iki yol var Bootstrap 5'i kullan bir Django projesinde. Bunu uygulamanıza yükleyebilir veya kullanarak dosyalara başvurabilirsiniz. Bootstrap'in CDN'si. Bu proje önceki yöntemi kullanacaktır.

Bootstrap'i yüklemeden önce, bir Django projesi oluştur ve galeri adlı bir uygulama. Uygulama bir fotoğraf galerisi olacak ve uygulamanın gezinme çubuğuna stil vermek için Bootstrap'i kullanacaksınız.

instagram viewer

Ardından, Bootstrap'i aşağıdaki komutla kurun:

pipenv düzenlemek django-bootstrap5 # Bootstrap sürüm 5'i yükler

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.

İçinde ayarlar.py dosya, Bootstrap'i aşağıda gösterildiği gibi kaydedin:

INSTALED_APPS = [
'galeri',
'önyükleme5', 
]

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 olarak, adında bir klasör oluşturun. şablonlar uygulama klasörünüzde. Bu klasörün içinde bir base.html dosya ve bir gezinme çubuğu.html dosya. Şablonlar, Bootstrap'in biçimlendireceği HTML dosyalarını içerecektir.

Bootstrap'i şuraya uygulayabilirsiniz: gezinme çubuğu.html şablon, bir temel dosya kullanmak gelenekseldir. A 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.

İçinde base.html dosya, aşağıdakileri ekleyin:

{% yükleme önyükleme5 %}
<!DOCTYPE html>


<html dili="tr">


<KAFA>


<meta karakter kümesi="UTF-8">


<meta http eşdeğeri="X-UA Uyumlu" içerik="IE=kenar">


<meta adı="görüntü alanı" içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0">
<başlık> Galeri </title>


{% blok stilleri %}


{%bootstrap_css %}


{% son blok %}
</head>
<vücut>
 {% katmak 'gezinme çubuğu.html' %}
 {% blok içeriği %} {% endblock %}
 {% blok komut dosyaları %}
<komut dosyası kaynağı="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" bütünlük="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" çapraz köken="anonim">
</script>
 {%bootstrap_javascript %}
</body>
</html>

İ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. Dahil et {%bootstrap_css %} şablon etiketi ve Bootstrap CSS dosyasına bir bağlantı.

Ardından, JavaScript işlevselliğini tanımlayan bir blok komut dosyası oluşturun.

I dahil ederek gezinme çubuğu.html içinde base.html Bootstrap'a bağlar.

Bootstrap stilleri ekleyerek yapılandırmayı test edin. gezinme çubuğu.html şablon:

<gezinme sınıfı="navbar navbar-genişlet-lg">
<div sınıfı="konteyner-sıvı">
<h2 sınıfı="marka" stil="yeşil renk">PIHA GALERİ</h2>
<düğme sınıfı="navbar-toggler" tür="düğme" veri değiştirme="yıkılmak" veri hedefi="#navbarDesteklenen İçerik" aria-kontrolleri="navbarDesteklenen İçerik" aria-genişletilmiş="YANLIŞ" arya etiketi="Gezinmeyi değiştir"><ben sınıf="fas fa-barları"></Ben></button>
<div sınıfı="navbar'ı daralt-daralt" kimlik="navbarDesteklenen İçerik">
<Ul sınıfı="navbar-nav ml-otomatik mb-2 mb-lg-0">
<li sınıfı="gezinme öğesi"><bir sınıf="nav-link nav-link-1 aktif" aria-current="sayfa" href="{% url 'Ev' %}" stil="yeşil renk">Ev</A></li>
<li sınıfı="gezinme öğesi"><bir sınıf="nav-link nav-link-2" href="#galeri" stil="yeşil renk">Galeri</A</li>
</ul>
</div>
</div>
</nav>

Şimdi sunucuyu çalıştırın ve sitenizi bir tarayıcıda kontrol edin. Bootstrap'in gezinti çubuğuna uyguladığı stili görmelisiniz.

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.