Bootstrap là một khung web được xây dựng để giúp bạn thiết kế các trang web đáp ứng nhanh hơn. Nó chứa rất nhiều mã css/javascript và jquery tùy chỉnh mà bạn có thể sử dụng để tạo kiểu và bố cục trang web của mình
Thêm Bootstrap
Hướng dẫn đầy đủ về cách thêm bootstrap có thể xem tại đây
Để thêm Bootstrap, bạn cần thêm một số thứ vào mẫu cơ sở của mình
First ensure you have "" at the very top of your base template.
Tiếp theo, trong các thẻ đầu của mẫu cơ sở của bạn, hãy thêm đoạn mã sau
Cuối cùng, thêm đoạn mã sau vào END của thẻ body của bạn
Và đó là để thêm bootstrap
Sử dụng Bootstrap
Để xem danh sách đầy đủ các lớp bootstrap và hướng dẫn chuyên sâu hơn về bootstrap, hãy nhấp vào đây
Tôi chỉ đơn giản là sẽ sử dụng bootstrap để tạo kiểu cho trang web của mình. Thoải mái loay hoay với các lớp khác nhau và làm cho trang web của bạn trông khác đi
Bây giờ bạn đã có sẵn ứng dụng web Django với cơ sở dữ liệu PostgreSQL được cài đặt hoặc triển khai cho Heroku hoặc miền tùy chỉnh hoặc chỉ là một ứng dụng Django cục bộ đơn giản, bạn muốn có giao diện giao diện người dùng của một chủ đề Bootstrap mà bạn đã thấy. Tất nhiên, khung Bootstrap đi kèm với khả năng phản hồi tốt của riêng nó và phần lớn công việc giao diện người dùng được thực hiện cho bạn. Tôi hơi tò mò/sợ làm thế nào một mẫu độc lập có thể được tích hợp vào bố cục dự án trung đoàn của Django. Do đó, hướng dẫn này dành cho mục đích này và… thật đơn giản
Kho lưu trữ github này có hướng dẫn hoàn chỉnh. Đây là cách bố cục dự án cho thư mục duy nhất trước và sau khi tích hợp bootstrap
Như bạn thấy, chúng tôi đã thêm một loạt các thư mục trong thư mục static
của khung Django
Đối với bài viết này, tôi đang sử dụng chủ đề startbootstrap-bare. Nhân bản kho lưu trữ github của chủ đề. Đây là cách bố cục của chủ đề cho thư mục duy nhất trông như thế nào
Bố cục thư mục chủ đề Bootstrap
Như bạn có thể thấy, tôi đã sao chép thư mục vendor
và thư mục con của nó sang thư mục static
của Django. Tôi đã sao chép chủ đề ở cấp độ gốc của dự án Django của mình. Vì vậy, trước khi sao chép thư mục vendor
sang thư mục static
của Django, các tệp ed href
trong thư mục vendor
bằng cách đưa ra một đường dẫn tương đối. Than ôi, nó không hoạt động. Có
0 Chà, đó là một thử nghiệm khá đơn giản. 😄
Sau khi đọc lại tài liệu quản lý tệp tĩnh của Django, đã sao chép thư mục vendor
sang thư mục static
và phần còn lại của phụ lục của chủ đề, vd. Thư mục static
1, static
2 đến static
3 trong thư mục static
. Điều đó quan tâm đến nơi lưu trữ các thư mục Bootstrap trong Django
Bây giờ chăm sóc mẫu. Đã sao chép tệp static
5 của Bootstrap vào thư mục static
6 nằm trong thư mục static
7. Bây giờ ở đây tôi cần ________ 8 để Bootstrap chủ đề ________ 39 và ________ 40 tệp. Theo Django, đã tải thẻ mẫu static
và tệp tĩnh href
. Đây là phần tổng quan về cách các tệp của nhà cung cấp dịch vụ href
trông giống như trong tệp static
5
{% load static %
...
...
Đây là một ảnh chụp màn hình chạy cục bộ của ứng dụng
Sau đó, phần còn lại của việc tái cấu trúc tệp static
5 thành vendor
6 , mở rộng tệp đó thành tệp static
5 và đặt câu hỏi static
6 ở đó. Đây là giao diện sau khi tùy chỉnh ban đầu chủ đề
Tôi đang tự hỏi làm thế nào khung giao diện người dùng khác như vendor
9 hoặc static
0 được tích hợp vào Django. Quá trình phải khá giống nhau
Dù sao, Xin chúc mừng bạn đã tích hợp chủ đề Bootstrap vào ứng dụng Django của mình. Hy vọng điều này sẽ giúp ích cho sự phát triển của bạn