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.
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 # menginstal Bootstrap versi 5Periksa 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 = [
'galeri',
'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.
Meskipun Anda dapat menerapkan Bootstrap di navbar.html template, menggunakan file dasar konvensional. A 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:
{% memuat bootstrap5 %}<!DOCTYPE html>
<html bahasa="en">
<kepala>
<meta charset="UTF-8">
<meta http-equiv="Kompatibel dengan X-UA" konten="IE = tepi">
<nama meta="area pandang" konten="lebar = lebar perangkat, skala awal = 1,0">
<judul> Galeri </title>{% gaya blok %}
{% bootstrap_css %}
{% blok akhir %}
</head>
<tubuh>
{% termasuk 'navbar.html' %}
{% blok konten %} {% blok akhir %}
{% memblokir skrip %}
<skrip src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integritas="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" lintas asal="anonim">
</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:
<kelas navigasi="navbar navbar-expand-lg">
<kelas div="wadah-cairan">
<kelas h2="merek" gaya="warna: hijau">GALERI PICHA</h2><kelas tombol="navbar-toggler" jenis="tombol" data-toggle="runtuh" data-target="#navbarSupportedContent" aria-kontrol="navbarSupportedContent" aria-diperluas="PALSU" aria-label="Alihkan navigasi"><saya kelas="fas fa-bar"></Saya></button>
<kelas div="runtuh navbar-runtuh" id="navbarSupportedContent">
<ul kelas="navbar-nav ml-otomatis mb-2 mb-lg-0">
<li kelas="nav-item"><sebuah kelas="nav-link nav-link-1 aktif" aria-arus ="halaman" href="{% url 'rumah' %}" gaya="warna: hijau">Rumah</A></li>
<li kelas="nav-item"><sebuah kelas="nav-tautan nav-tautan-2" href="#galeri" gaya="warna: hijau">Galeri</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.
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.
