Làm cách nào để sử dụng các hình thức giòn Bootstrap ở Django?
|
Mọi trang web Django phải có biểu mẫu đẹp mắt, đặc biệt khi sử dụng biểu mẫu để tương tác và nhận thông tin đầu vào từ người dùng trang web của bạn. Show
Có hai cách tiếp cận mà bạn có thể thực hiện để tạo kiểu cho các trang và biểu mẫu trang web Django của mình
Tôi có nên sử dụng Bootstrap hoặc CSS trong trang web Django của mình không? Bạn nên sử dụng khung CSS chẳng hạn như Bootstrap để tạo kiểu trang web Django. Lợi thế đến từ việc phát triển ứng dụng web của bạn nhanh hơn. Hơn nữa, bạn không phải viết quá nhiều CSS. Tuy nhiên, điều đó không có nghĩa là bạn không nên sử dụng CSS trong trang web Django của mình Sử dụng CSS khi cần thiết
Quay lại hướng dẫn Tạo kiểu cho các thành phần trang web như biểu mẫu có thể là một thách thức vì bạn phải viết các kiểu và quy tắc CSS để làm cho chúng phản hồi nhanh Việc viết các quy tắc và kiểu dáng CSS và JS của khách hàng có thể mất rất nhiều thời gian Lựa chọn tốt nhất là sử dụng phương pháp khuyến khích phát triển nhanh, sử dụng khung CSS chẳng hạn như Bootstrap và gói được thiết kế để định dạng biểu mẫu của bạn, chẳng hạn như Django Crispy Forms Bạn sẽ tiết kiệm được rất nhiều thời gian mà lẽ ra bạn phải sử dụng để viết các quy tắc CSS cho các biểu mẫu của mình Tiết kiệm nhiều thời gian hơn Dành nhiều thời gian hơn để phát triển mục tiêu chính của ứng dụng Django giúp giải quyết trường hợp kinh doanh nhanh hơn và đạt được một trang web đầy đủ chức năng Vì vậy, hãy bắt đầu bằng cách hiểu Django Crispy Forms làm gì Hình thức giòn Django là gì?Django Crispy Forms là một gói Python được sử dụng để tạo kiểu cho các biểu mẫu Django trông hấp dẫn và lôi cuốn hơn các biểu mẫu mặc định Django Crispy Forms dựa trên khung CSS được sử dụng trong dự án Django của bạn để cung cấp hành vi hiển thị cho các biểu mẫu của bạn Các khung CSS này được Django Crispy Forms hỗ trợ là Bootstrap, Foundation, Tailwind, Bulma và uni-form Trong hướng dẫn cách thực hiện này, tôi sẽ tập trung vào việc sử dụng các biểu mẫu giòn Django với Bootstrap 4 Tôi sẽ chỉ cho bạn một cách chi tiết làm thế nào để Cài đặt Django Crispy Forms, Định cấu hình dự án Django của bạn để sử dụng Bootstrap 4 cho các biểu mẫu giòn và Sử dụng các thẻ biểu mẫu giòn trong các mẫu Django của bạn Vì vậy, chúng ta sẽ tích hợp dự án Django của mình với Bootstrap 4, cài đặt Django Crispy Forms và bắt đầu sử dụng các thẻ biểu mẫu giòn Cách tích hợp Bootstrap 4 với DjangoTích hợp Bootstrap 4 với dự án Django của bạn thật dễ dàng vì tất cả những gì bạn phải làm là thêm các liên kết Bootstrap CDN vào mẫu chính của bạn. Sử dụng mẫu chính mà tất cả các mẫu Django của bạn kế thừa từ đó là một phương pháp được khuyến nghị, đặc biệt khi bạn muốn đạt được kiểu dáng hoặc định dạng chung
Vì vậy, hãy cài đặt Python, tạo một dự án Django mới và thêm tệp mẫu chính mà chúng ta sẽ đặt tên là Cài đặt Python3Chạy các lệnh sau để cài đặt Python phiên bản 3 trên hệ thống của bạn Sau khi quá trình hoàn tất, hãy tạo một môi trường ảo mới mà bạn sẽ sử dụng cho dự án Django của mình Tôi muốn giữ tất cả các môi trường ảo của mình trong một thư mục bên trong thư mục chính Sao chép lệnh bên dưới và chạy nó trên Terminal của bạn Lệnh tạo một thư mục mới bên trong thư mục chính của bạn. Đặt cho nó bất kỳ tên nào bạn muốn Tôi sẽ sử dụng virtualenvs làm tên thư mục Tôi sử dụng một dấu chấm trước tên thư mục để ẩn thư mục Do đó, thư mục sẽ không hiển thị từ trình quản lý tệp tiêu chuẩn Trong thư mục môi trường, tạo một môi trường mới cho dự án Django của bạn Sau khi tạo môi trường mới, tạo thư mục mới trên thư mục Desktop hoặc bất cứ đâu Bạn sẽ sử dụng thư mục để lưu trữ các tệp dự án Django của mình Điều hướng vào thư mục bằng Terminal, kích hoạt môi trường và cài đặt Django Tạo một dự án Django mớiĐể tạo một dự án mới, sử dụng lệnh sau ________số 8_______Sau khi tạo một dự án Django mới, hãy tạo một thư mục mẫu bên trong thư mục gốc của dự án - thư mục có quản lý. tập tin py Trong thư mục mẫu, tạo một tệp mới và đặt tên là Mẫu cơ sở sẽ chứa các tệp Bootstrap 4 và các cài đặt định dạng và kiểu dáng khác cho toàn bộ dự án Mở tệp Tôi đang sử dụng Visual Studio Code Dán đoạn mã sau có chứa mã soạn sẵn HTML Sử dụng cùng một mã soạn sẵn, tải CSS Bootstrap của bạn bằng thẻ liên kết và JS ở dưới cùng. Đây là cách thực hiện Tạo các khối Django mà bạn sẽ sử dụng trên trang web của mình Tôi thích khối tiêu đề hơn để thay đổi cách mỗi trang web xuất hiện trên thanh địa chỉ và khối nội dung nơi tất cả mã HTML cho mỗi trang web sẽ được Sau khi thêm các khối, chúng tôi cần hướng dẫn Django bao gồm thư mục mẫu mới để chúng tôi có thể sử dụng mẫu Mở tệp cài đặt của dự án bên trong thư mục cấu hình dự án - chúng tôi đặt tên cho nó là danh mục đầu tư. Trong tệp cài đặt, tìm khối mã giống như thế này Thay thế toàn bộ khối mã bằng khối sau Dòng, Do đó, chúng tôi có thể sử dụng mã Bất kỳ trang HTML nào có dòng Hơn nữa, chúng ta có thể sử dụng các lớp Bootstrap CSS bên trong khối nội dung Cách sử dụng Bootstrap 4 trong các mẫu Django của bạnBất cứ khi nào bạn muốn sử dụng Bootstrap trên các mẫu Django mới, bạn chỉ cần mở rộng các mẫu từ Mỗi khi bạn tạo các mẫu HTML mới, hãy bắt đầu với các dòng mã sau Bạn có thể sử dụng các lớp Bootstrap trên mã HTML Django của mình và nó sẽ hoạt động với các mẫu Django của bạn Cách tạo biểu mẫu đẹp với Django Crispy FormsBây giờ chúng tôi đã định cấu hình dự án Django của mình để sử dụng Django, chúng tôi cần cài đặt Django Crispy Forms Đây là cách cài đặt Django Crispy Forms trong dự án Django của bạn Mở Terminal, kích hoạt môi trường ảo và gõ Nhấn Enter Sau khi cài đặt hoàn tất, hãy mở cài đặt. py và thêm ứng dụng crisp_forms vào INSTALLED_APPS của bạn Vì chúng tôi đang sử dụng Bootstrap 4 làm gói mẫu cho dự án Django của mình, hãy cuộn xuống cuối cài đặt của bạn. py và thêm dòng sau Django hiện được thiết lập để sử dụng Django Crispy Forms và Bootstrap 4 làm chủ đề chính cho các biểu mẫu Django của bạn Để trình diễn, hãy tạo một ứng dụng Django đơn giản cho phép người dùng gửi thông tin bằng biểu mẫu liên hệ cho ứng dụng Django của chúng ta Tạo một ứng dụng liên hệ mới bằng cách mở Terminal và gõ như sau Thêm ứng dụng liên hệ vào các ứng dụng đã cài đặt của bạn Tạo các biểu mẫu cho ứng dụng liên hệ. Mở các mô hình. py bên trong thư mục liên hệ và thêm các dòng mã sau Ở đây, chúng tôi đang sử dụng các trường tên, email và thông báo làm thuộc tính của bảng Liên hệ.
Mô hình sẽ cho phép chúng tôi sử dụng cơ sở dữ liệu để tạo thông tin liên hệ liên tục Mở Terminal và chạy như sau Tìm thêm thông tin về cách các mô hình Django hoạt động trong bài viết này Thay vì tạo biểu mẫu mới, chúng ta có thể sử dụng biểu mẫu mô hình để hiển thị các thuộc tính mà chúng ta đã xác định trong cơ sở dữ liệu trong biểu mẫu liên hệ của mình
Hãy xác định một biểu mẫu mô hình cho mô hình Liên hệ của chúng tôi Trong thư mục liên hệ, tạo một tệp mới và đặt tên cho nó là biểu mẫu. py mở biểu mẫu. py và thêm các dòng mã sau Phiên bản ContactForm sẽ tạo một biểu mẫu HTML mà chúng tôi sẽ sử dụng để thu thập dữ liệu và lưu nó vào bảng liên hệ của chúng tôi trong cơ sở dữ liệu Lớp con ModelForm xác định các trường biểu mẫu cụ thể và các tiện ích biểu mẫu HTML tương ứng được sử dụng trên biểu mẫu Lớp Python Meta xác định kết nối với mô hình nào sẽ kết nối và các trường mà chúng ta muốn trên biểu mẫu của mình Trong trường hợp này, chúng tôi sử dụng tất cả các trường trong bảng cơ sở dữ liệu Bây giờ, biểu mẫu đã hoàn tất và chúng tôi cần hiển thị mã biểu mẫu HTML cho mẫu của mình Thiết lập chế độ xem của ứng dụng liên hệ để hiển thị HTML biểu mẫu đã tạo Mở tệp Tại đây, chúng tôi đang nhập HTML biểu mẫu đã tạo, thêm nó vào từ điển ngữ cảnh và xác định mẫu mà chế độ xem sẽ sử dụng để hiển thị dữ liệu động ở mặt trước của ứng dụng web của chúng tôi Tạo một thư mục mới bên trong ứng dụng liên hệ và đặt tên là mẫu Trong thư mục mẫu, tạo một tệp mới và đặt tên là liên hệ. html mở liên hệ. html và thêm đoạn mã sau Mở các url chính. py nằm trong thư mục dự án. Thêm dòng sau vào đầu Sau đó, bên dưới điểm cuối quản trị viên, hãy thêm dòng mã sau Đoạn mã trên nhập chế độ xem biểu mẫu liên hệ mà chúng tôi sẽ hiển thị khi một người truy cập trang /liên hệ trên trang web của chúng tôi Nếu chúng tôi mở /liên hệ URL, 127. 0. 0. 1. 8000/liên hệ/, bạn có thể thấy thuộc tính tên, email và thông báo được hiển thị trên mẫu HTML của chúng tôi Tuy nhiên, hình thức của chúng tôi trông không đẹp Hãy thử tạo kiểu cho nó bằng Django Crispy Forms – làm cho nó giòn Cách sử dụng các thẻ và bộ lọc biểu mẫu giòn ở dạng DjangoĐể sử dụng thẻ biểu mẫu giòn, bạn phải thêm {% load crisp_forms_tags %} ở đầu mỗi mẫu Django mà bạn muốn hiển thị biểu mẫu của mình. Để sử dụng bộ lọc giòn, hãy thêm. giòn sau tên biểu mẫu hoặc bộ định dạng của bạn Dưới đây là cách sử dụng thẻ và bộ lọc biểu mẫu giònmở liên hệ. html mẫu bên trong thư mục liên hệ/mẫu và thay thế toàn bộ tệp bằng các dòng mã sau Làm cách nào để sử dụng các biểu mẫu giòn trong mẫu Django?Cách sử dụng biểu mẫu giòn Django . pip cài đặt django-crispy-forms trong dự án Django của bạn thêm giòn_forms vào danh sách các ứng dụng đã cài đặt trong cài đặt thêm giòn_template_pack vào cài đặt tải vào Django crisp_forms_tags trong mẫu HTML Làm cách nào để sử dụng Bootstrap ở dạng Django?Django với Bootstrap . Tải xuống Bootstrap. Truy cập trang web chính thức https. //getbootstrap. com để tải xuống bootstrap tại máy cục bộ. . Tạo một thư mục. Tạo một thư mục có tên tĩnh bên trong ứng dụng đã tạo và đặt các thư mục css và jss bên trong nó Tạo mẫu. . Tải Bootstrap {{ form As_p }} là gì?{{ biểu mẫu. as_p }} – Hiển thị Biểu mẫu Django dưới dạng đoạn văn . {{ hình thức. as_ul }} – Kết xuất Biểu mẫu Django dưới dạng danh sách.
Thư viện nào được Django sử dụng để tích hợp Bootstrap trong các biểu mẫu Django?Tích hợp Biểu mẫu Bootstrap với Django rất dễ dàng và đơn giản. Có rất nhiều Thư viện Django cho Bootstrap. Trong hướng dẫn này, chúng tôi sẽ sử dụng django-crispy-forms cho Biểu mẫu Bootstrap trong Django. Crispy-Forms là một gói tuyệt vời giúp kiểm soát tốt việc hiển thị biểu mẫu Bootstrap trong Dự án Django của bạn. |
