Cara Menggunakan Bootstrap di Proyek Django

Cara Menggunakan Bootstrap di Proyek Django
Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca lebih banyak.

Sejak dirilis pada tahun 2013, Bootstrap telah merevolusi cara pengembang mendesain halaman web. Bootstrap adalah framework front-end populer yang digunakan untuk merancang aplikasi web yang responsif.



Django menggunakan gaya CSS bawaan Bootstrap dan plugin JavaScript untuk menata halaman web. Sementara itu mengurangi kerumitan gaya, mengonfigurasinya di Django dapat menantang.





GUNAKAN VIDEO HARI INI

Mari pelajari cara menginstal dan mengkonfigurasi Bootstrap di aplikasi Django.





Cara Memasang Bootstrap

Ada dua cara untuk gunakan Bootstrap5 dalam proyek Django. Anda dapat menginstalnya di aplikasi Anda atau mereferensikan file menggunakan CDN Bootstrap . Proyek ini akan menggunakan metode sebelumnya.

Sebelum menginstal Bootstrap, membuat proyek Django dan sebuah aplikasi bernama galeri. Aplikasi akan menjadi galeri foto, dan Anda akan menggunakan Bootstrap untuk menata bilah navigasi aplikasi.



Selanjutnya, instal Bootstrap dengan perintah berikut:

pipenv install django-bootstrap5  # installs Bootstrap version 5

Periksa Pipfile dan konfirmasikan ada ketergantungan Bootstrap 5. Anda sekarang perlu memberi tahu proyek Django bahwa Anda menggunakan ketergantungan Bootstrap.





Dalam pengaturan.py file, daftarkan Bootstrap seperti yang ditunjukkan di bawah ini:

INSTALLED_APPS = [ 
'gallery',
'bootstrap5',
]

Mendaftarkan Bootstrap dalam pengaturan proyek menghubungkan ketergantungan django-bootstrap5 ke proyek Anda. Ini akan tersedia untuk aplikasi lain yang ditentukan dalam proyek.





Terapkan Bootstrap pada Templat

Pertama, buat folder bernama template di folder aplikasi Anda. Di dalam folder ini, buat a basis.html berkas dan a navbar.html mengajukan. Template akan berisi file HTML yang akan diberi gaya Bootstrap.

transfer file dari windows ke linux

Meskipun Anda dapat menerapkan Bootstrap di navbar.html template, menggunakan file dasar konvensional. SEBUAH basis.html file akan berisi semua skrip dan tautan untuk diterapkan ke halaman mana pun. Ini mengurangi kerumitan masing-masing template, membuat kode Anda lebih bersih dan lebih mudah dipahami.

Dalam basis.html file, sertakan yang berikut ini:

{% load bootstrap5 %} 


<!DOCTYPE html>

<html lang="en">

<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> Gallery </title>


{% block styles %}


{% bootstrap_css %}


{% endblock %}

</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<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">
</script>
{% bootstrap_javascript %}
</body>
</html>

Pertama, muat dependensi bootstrap5. Kemudian buat dua gaya blok tempat Anda akan menentukan semua gaya untuk templat. Sertakan {% bootstrap_css %} tag templat dan tautan ke file Bootstrap CSS.

Selanjutnya, buat skrip blok yang mendefinisikan fungsionalitas JavaScript.

Termasuk navbar.html dalam basis.html menautkannya ke Bootstrap.

Uji konfigurasi dengan menambahkan gaya Bootstrap ke navbar.html templat:

<nav class="navbar navbar-expand-lg"> 
<div class="container-fluid">
<h2 class="brand" style="color:green">PICHA GALLERY</h2>

<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>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link nav-link-1 active" aria-current="page" href="{% url 'home' %}" style="color:green">Home</a></li>
<li class="nav-item"><a class="nav-link nav-link-2" href="#gallery" style="color:green">Gallery</a</li>
</ul>
</div>
</div>
</nav>

Sekarang, jalankan server dan periksa situs Anda di browser. Anda akan melihat gaya yang diterapkan Bootstrap ke bilah navigasi.

 bilah navigasi bergaya di browser

Mengapa Menggunakan Bootstrap di Proyek Django?

Anda sebagian besar akan menggunakan Django untuk pengembangan back-end, tetapi juga dapat membuat halaman front-end yang luar biasa. Menggunakan Bootstrap untuk menata halaman front-end adalah praktik yang baik untuk pemula Django. Anda mendapatkan pemahaman mendalam tentang Django saat Anda membuat aplikasi tumpukan penuh.

Seperti kerangka front-end lainnya, Anda dapat menggunakan kelas Bootstrap dengan proyek Django untuk menata halaman web Anda. Bootstrap 5 memiliki komponen yang lebih baik dan style sheet yang cepat. Ini juga telah meningkatkan daya tanggap untuk perangkat modern.

Mengapa tidak menggunakan Bootstrap untuk mendesain dan membuat UI yang luar biasa untuk proyek Django Anda? Django akan memukau Anda dengan kemampuannya dalam pengembangan web.