Django - Thêm tệp tĩnh
Thêm Bootstrap 5
Có hai phương pháp chính để sử dụng bootstrap trong dự án Django của bạn. Bằng cách tải xuống các tệp cần thiết và đưa chúng vào dự án của bạn hoặc bạn có thể cài đặt mô-đun bootstrap 5 trong môi trường ảo của mình.
Chúng tôi sẽ sử dụng phương pháp thứ hai, cài đặt Bootstrap 5 trong môi trường ảo.
Cài đặt Bootstrap 5
Bootstrap 5 nên được cài đặt trong môi trường ảo.
Chúng tôi sẽ cài đặt nó trong một dự án hiện có, dự án My Tennis Club , được tạo trước đó trong hướng dẫn này.
Mở chế độ xem lệnh, điều hướng đến thư mục môi trường ảo và kích hoạt môi trường ảo:
Scripts\activate.bat
Khi bạn đã ở trong môi trường ảo, hãy cài đặt Bootstrap 5 bằng lệnh này:
pip
install django-bootstrap-v5Điều này sẽ cho bạn một kết quả như thế này:
Collecting django-bootstrap-v5
Downloading django_bootstrap_v5-1.0.11-py3-none-any.whl (24 kB)
Requirement already satisfied: django<5.0,>=2.2 in c:\users\ your name \myworld\lib\site-packages (from django-bootstrap-v5) (4.1.4)
Collecting beautifulsoup4<5.0.0,>=4.8.0
Downloading beautifulsoup4-4.11.1-py3-none-any.whl (128 kB)
|████████████████████████████████| 128 kB 6.4 MB/s
Requirement already satisfied: tzdata; sys_platform == "win32" in c:\users\ your name \myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (2022.7)
Requirement already satisfied: asgiref<4,>=3.5.2 in c:\users\ your name \myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (3.5.2)
Requirement already satisfied: sqlparse>=0.2.2 in c:\users\ your name \myworld\lib\site-packages (from django<5.0,>=2.2->django-bootstrap-v5) (0.4.3)
Collecting soupsieve>1.2
Downloading soupsieve-2.3.2.post1-py3-none-any.whl (37 kB)
Installing collected packages: soupsieve, beautifulsoup4, django-bootstrap-v5
Successfully installed beautifulsoup4-4.11.1 django-bootstrap-v5-1.0.11 soupsieve-2.3.2.post1Cập nhật cài đặt
Bước tiếp theo là đưa mô-đun bootstrap vào danh sách INSTALLED_APPS trong settings.py :
my_tennis_club/my_tennis_club/settings.py :
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'members',
'bootstrap5',
]Bootstrap 5 hiện đã sẵn sàng để sử dụng trong dự án của bạn!
Loại bỏ kiểu dáng cũ
Dự án My Tennis Club đã có sẵn stylesheet, hãy xóa nó đi và trang Thành viên không có stylesheet sẽ trông như thế này:
Thêm Bootstrap 5 vào mẫu
Để sử dụng Bootstrap 5 trong dự án, hãy bắt đầu bằng cách chèn một số dòng mã vào mẫu master.html :
my_tennis_club/members/templates/master.html :
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<div class="container">
<ul class="nav bg-info">
<li class="nav-item">
<a class="nav-link link-light" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="/members">MEMBERS</a>
</li>
</ul>
{% block content %}
{% endblock %}
</div>
</body>
</html> Như bạn có thể thấy, chúng tôi đã chèn ba dòng này vào phần <head> :
{% load bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
Dòng đầu tiên cho Django biết rằng nó nên tải mô-đun Bootstrap 5 trong mẫu này.
Dòng thứ hai chèn phần tử <link> có tham chiếu đến biểu định kiểu bootstrap.
Dòng thứ ba chèn phần tử <script> có tham chiếu đến tệp javascript cần thiết.
Chúng tôi cũng đã thực hiện một số thay đổi đối với các thành phần HTML trong mẫu, chẳng hạn như chèn các lớp khởi động vào thanh điều hướng:
<div class="container">
<ul class="nav bg-info">
<li class="nav-item">
<a class="nav-link link-light" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link link-light" href="/members">MEMBERS</a>
</li>
</ul>
{% block content %}
{% endblock %}
</div>
Nếu bạn chạy dự án ngay bây giờ, trang thành viên sẽ trông như thế này:
Đó là nó! Bootstrap 5 hiện là một phần trong dự án của bạn!
Tìm hiểu thêm về Bootstrap 5 trong Hướng dẫn Bootstrap 5 của chúng tôi.
