Hướng dẫn css html django - css html django
Ghi chúNội dung bài viết bạn đang xem được update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữ VIDEO và NỘI DUNG BÀI VIẾT.update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữ VIDEO và NỘI DUNG BÀI VIẾT. Show Chúng ta sẽ có nhiều cập nhập hơn về cả bài viết lẫn video trong thời gian tới. Nhớ like/ share hoặc đánh giá 5 sao để Kteam có động lực nhé! like/ share hoặc đánh giá 5 sao để Kteam có động lực nhé! Cảm ơn các bạn! Dẫn nhậpTrong bài viết hôm nay, Kteam sẽ hướng dẫn cho các bạn cách Sử dụng Bootstrap để thiết kế Website và cách lưu trữ các file tĩnh. Sử dụng Bootstrap để thiết kế Website và cách lưu trữ các file tĩnh. Nội dungĐể theo dõi bài này tốt nhất, bạn nên xem qua bài:
Bài này sẽ giới thiệu những nội dung sau:
File tĩnh là gì? Bootstrap là gì?Trong việc thiết kế website chúng ta sẽ có những file tĩnh để gắn vào các template như các file hình ảnh, CSS hay Javascript tách riêng ra để giúp chúng ta dễ quản lý hơn. Bootstrap là một framework của css để giúp chúng ta thiết kế website tiện lợi hơn, đặc biệt là dành cho responsive web là một framework của css để giúp chúng ta thiết kế website tiện lợi hơn, đặc biệt là dành cho responsive web Responsive Web có thể hiểu là trang web có thể hiển thị co giãn theo màn hình các thiết bị như máy tính, tablet, điện thoại để thể hiện sự thẩm mỹ của trang web có thể hiểu là trang web có thể hiển thị co giãn theo màn hình các thiết bị như máy tính, tablet, điện thoại để thể hiện sự thẩm mỹ của trang web Lưu thư viện Bootstrap vào staticĐầu tiên ta sẽ vào trang chủ bootstrap để tải thư viện bootstrap cho dự án này Sau khi tải về, ta sẽ có 1 file nén Bootstrap chứa 2 thư mục css, js chính là thư viện Bootstrap người ta đã viết ra Quay lại project Django, ta sẽ tạo folder static, rồi ta giải nén file bootstrap rồi copy 2 folder kia vào: Sau đó, ta sẽ map giữa đường dẫn url /static và folder static. Ở file settings.py phía dưới cùng có đoạn code này:url /static và folder static. Ở file settings.py phía dưới cùng có đoạn code này: File settings đã mặc định rằng muốn lấy các file tĩnh sẽ thông qua url '/static/' đã mặc định rằng muốn lấy các file tĩnh sẽ thông qua url '/static/' Bây giờ ta sẽ mapping nó với folder static bằng cách viết đoạn code config này phía dưới file settings.py:settings.py:
STATICFILES_DIRS là một dict lưu các đường dẫn folder chứa các file tĩnh. Đầu tiên Kteam sẽ nói về biến BASE_DIR là biểu hiện đường dẫn hiện tại của project, được tạo ra bằng nhóm câu lệnh nàylà một dict lưu các đường dẫn folder chứa các file tĩnh. Đầu tiên Kteam sẽ nói về biến BASE_DIR là biểu hiện đường dẫn hiện tại của project, được tạo ra bằng nhóm câu lệnh này Có thể các bạn không hiểu thư viện os, nói chung kết quả của nó là BASE_DIR sẽ lưu đường địa chỉ của project trong máy tính. Giả sử project PythonWeb của Kteam lưu là “C:/Users/Windows 10/Documents/PythonWeb” thì chính xác BASE_DIR đang lưu đoạn string này.BASE_DIR sẽ lưu đường địa chỉ của project trong máy tính. Giả sử project PythonWeb của Kteam lưu là “C:/Users/Windows 10/Documents/PythonWeb” thì chính xác BASE_DIR đang lưu đoạn string này. Trong file dict này ta có 1 element duy nhất là os.path.join(BASE_DIR, "static") . Nếu bạn nào tìm hiểu thư viện os thì câu lệnh os.path.join là ghép các folder thành 1 đường dẫn máy vi tính. như vậy kết quả trong file dict này là “C:/Users/Windows 10/Documents/PythonWeb/static” chính là đường dẫn chứa file tĩnh mà mình cần mapping với url '/static/'.os.path.join(BASE_DIR, "static") . Nếu bạn nào tìm hiểu thư viện os thì câu lệnh os.path.join là ghép các folder thành 1 đường dẫn máy vi tính. như vậy kết quả trong file dict này là “C:/Users/Windows 10/Documents/PythonWeb/static” chính là đường dẫn chứa file tĩnh mà mình cần mapping với url '/static/'. Sau khi map xong, ta thử mở file bootstrap.css ở folder css thông qua url. Ta chạy server ảo và vào địa chỉ http://localhost:8000/static/css/bootstrap.css bootstrap.css ở folder css thông qua url. Ta chạy server ảo và vào địa chỉ http://localhost:8000/static/css/bootstrap.css Vậy ta đã map đường dẫn /static/ và folder static thành công./static/ và folder static thành công. Để template có thể sử dụng các file tĩnh, ta sẽ gọi câu lệnh sau ở các template.
Đầu tiên mình sẽ thiết kế ở file base.html, bạn hay copy câu lệnh trên và điền vào:base.html, bạn hay copy câu lệnh trên và điền vào: Bây giờ, mình có thể gọi các file css, js từ folder static. Như ta muốn sử dụng file bootstrap.min.css từ folder css. Ta sẽ gọi như sau:bootstrap.min.css từ folder css. Ta sẽ gọi như sau:
Thiết kế blog bằng BootstrapBây giờ, Kteam sẽ thiết kế giao diện có mẫu như sau: Việc đầu tiên, ta cần chia ngang trang web cho 2 nội dung sau: Để chia ngang các nội dung ra, ta tìm hiểu về Grid System của BootstrapGrid System của Bootstrap Bootstrap sẽ chia độ ngang của trang web thành 12 phần, ta sẽ quyết định nội dung đó sẽ chiếm bao nhiêu phần ngang của trang web.sẽ chia độ ngang của trang web thành 12 phần, ta sẽ quyết định nội dung đó sẽ chiếm bao nhiêu phần ngang của trang web. Giờ Kteam sẽ cho nội dung ô thứ 1 chiếm 2 phần ,ô thứ 2 chiếm 10 phần. Ở ô đầu tiên có ảnh avatar, thì Kteam sẽ tạo 1 folder img trong static và đưa ảnh đó vào Ta sẽ thiết kế giao diện như sau:
Bây giờ ta sẽ xem kết quả: Đây là ở màn hình máy tính Đây là ở màn hình điện thoại Đây là file base.html sau khi design:base.html sau khi design:
KếtNhư vậy Kteam đã giới thiệu cách sử dụng File tĩnh và thiết kế web bằng Bootstrap trong Python Django Ở bài tiếp theo, Kteam sẽ giới thiệu cho các bạn THIẾT KẾ HOÀN CHỈNH BLOG TRONG PYTHON DJANGO Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.Luyện tập – Thử thách – Không ngại khó”. Thảo luậnNếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. |