Cách sử dụng Bootstrap trong Dự án Django
Kể từ khi phát hành vào năm 2013, Bootstrap đã cách mạng hóa cách các nhà phát triển tạo kiểu trang web. Bootstrap là một khung giao diện người dùng phổ biến được sử dụng để thiết kế các ứng dụng web đáp ứng.
Django sử dụng các kiểu CSS dựng sẵn của Bootstrap và các plugin JavaScript để tạo kiểu cho các trang web. Mặc dù nó làm giảm sự phức tạp của kiểu dáng, nhưng việc định cấu hình nó trong Django có thể là một thách thức.
Hãy tìm hiểu cách cài đặt và định cấu hình Bootstrap trong ứng dụng Django.
Mục Lục
Cách cài đặt Bootstrap
Có hai cách để sử dụng Bootstrap 5 trong dự án Django. Bạn có thể cài đặt nó trong ứng dụng của mình hoặc tham khảo các tệp bằng CDN của Bootstrap. Dự án này sẽ sử dụng phương pháp cũ.
Trước khi cài đặt Bootstrap, hãy tạo một dự án Django và một ứng dụng có tên là thư viện. Ứng dụng sẽ là một thư viện ảnh và bạn sẽ sử dụng Bootstrap để tạo kiểu cho thanh điều hướng của ứng dụng.
Tiếp theo, cài đặt Bootstrap bằng lệnh sau:
pipenv install django-bootstrap5 Kiểm tra Pipfile và xác nhận có phần phụ thuộc Bootstrap 5. Bây giờ bạn cần thông báo cho dự án Django rằng bạn đang sử dụng phụ thuộc Bootstrap.
bên trong cài đặt.py tệp, hãy đăng ký Bootstrap như hình bên dưới:
INSTALLED_APPS = [
'gallery',
'bootstrap5',
]Đăng ký Bootstrap trong cài đặt dự án sẽ kết nối phần phụ thuộc django-bootstrap5 với dự án của bạn. Nó sẽ có sẵn cho bất kỳ ứng dụng nào khác được xác định trong dự án.
Áp dụng Bootstrap trên Mẫu
Đầu tiên, tạo một thư mục có tên mẫu trong thư mục ứng dụng của bạn. Trong thư mục này, tạo một cơ sở.html tập tin và một thanh điều hướng.html tập tin. Các mẫu sẽ chứa các tệp HTML mà Bootstrap sẽ tạo kiểu.
Trong khi bạn có thể áp dụng Bootstrap trên thanh điều hướng.html mẫu, sử dụng tệp cơ sở là thông thường. Một cơ sở.html tệp sẽ chứa tất cả các tập lệnh và liên kết để áp dụng cho bất kỳ trang nào. Nó làm giảm độ phức tạp của các mẫu riêng lẻ, làm cho mã của bạn sạch hơn và dễ hiểu hơn.
bên trong cơ sở.html tập tin, bao gồm những điều sau đây:
{% 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>
Đầu tiên, tải phụ thuộc bootstrap5. Sau đó, tạo hai kiểu khối nơi bạn sẽ xác định tất cả các kiểu cho các mẫu. Bao gồm cái {% bootstrap_css %} thẻ mẫu và một liên kết đến tệp Bootstrap CSS.
Tiếp theo, tạo một tập lệnh khối xác định chức năng JavaScript.
Bao gồm cả thanh điều hướng.html bên trong cơ sở.html liên kết nó với Bootstrap.
Kiểm tra cấu hình bằng cách thêm các kiểu Bootstrap vào thanh điều hướng.html mẫu:
<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>
Bây giờ, hãy chạy máy chủ và kiểm tra trang web của bạn trong trình duyệt. Bạn sẽ thấy kiểu dáng mà Bootstrap áp dụng cho thanh điều hướng.
Tại sao nên sử dụng Bootstrap trong các dự án Django?
Bạn sẽ chủ yếu sử dụng Django để phát triển back-end, nhưng nó cũng có thể tạo ra các trang front-end tuyệt vời. Sử dụng Bootstrap để tạo kiểu cho các trang giao diện người dùng là một cách thực hành tốt cho người mới bắt đầu sử dụng Django. Bạn sẽ hiểu sâu hơn về Django khi bạn tạo các ứng dụng toàn ngăn xếp.
Giống như bất kỳ khung giao diện người dùng nào, bạn có thể sử dụng các lớp Bootstrap với dự án Django để tạo kiểu cho các trang web của mình. Bootstrap 5 có các thành phần tốt hơn và biểu định kiểu nhanh. Nó cũng đã cải thiện khả năng đáp ứng cho các thiết bị hiện đại.
Tại sao không sử dụng Bootstrap để định kiểu và tạo giao diện người dùng tuyệt vời cho các dự án Django của bạn? Django sẽ làm bạn ngạc nhiên với khả năng phát triển web của nó.