Flask bootstrap được định nghĩa là một mô-đun cho phép đóng gói Bootstrap thành một tiện ích mở rộng để các nhà phát triển có thể sử dụng chúng. Mô-đun này chủ yếu bao gồm một bản thiết kế có tên là “bootstrap” và giúp tạo các liên kết để phục vụ bootstrap từ Mạng phân phối nội dung và không có mã hóa soạn sẵn trong ứng dụng. Bản thân Bootstrap là khung CSS phổ biến nhất được sử dụng để phát triển các trang web đáp ứng và ưu tiên thiết bị di động. Ngăn xếp công nghệ này cho phép phát triển các ứng dụng web nhanh hơn và dễ dàng hơn do Flask xây dựng. Mô-đun này cho phép các nhà phát triển cho phép họ đưa các tệp JavaScript bootstrap và CSS bootstrap vào dự án. Trong bài viết này, chúng ta sẽ xem xét quá trình chuyển đổi mà bootstrap mang lại mà không thay đổi một dòng mã ứng dụng nào

cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Phát triển ứng dụng web bằng Flask đã trở thành một kỹ năng không thể thiếu đối với bất kỳ nhà phát triển ứng dụng web nào và khi nói đến giao diện của ứng dụng, sự thành công của ứng dụng phụ thuộc rất nhiều vào cùng một. Trong phần này, chúng ta sẽ tìm hiểu về bootstrapping trong bình từ góc độ cú pháp để khi chúng ta tìm hiểu về cách thức hoạt động của bootstrap, sẽ dễ dàng ánh xạ lại nó hơn với cú pháp đã học ở đây để có bức tranh hoàn chỉnh về chủ đề đang thảo luận

Cài đặt jar bootstrap và cấu hình nó

pip install bootstrap-flask

Nhập Bootstrap vào mã ứng dụng

from flask_bootstrap import Bootstrap

Khởi tạo bootstrap bằng cá thể ứng dụng

Bootstrap(app)

Đang tải CSS trong một mẫu

{{ bootstrap.load_css() }}

Đang tải JS trong một mẫu

{{ bootstrap.load_js() }}

Bootstrap hoạt động như thế nào trong Flask?

Trong bài viết hiện tại, chúng ta sẽ nói về mô-đun mới nhất có sẵn để sử dụng bootstrap trong ứng dụng Flask. Bài viết này sẽ không giúp ích nhiều cho những ai đang tìm kiếm mô-đun jar-bootstrap. Bootstrap-flask là mô-đun mà chúng ta sẽ thảo luận chi tiết ở đây. Mô-đun này là một giải pháp thay thế cho phiên bản cũ hơn hỗ trợ Bootstrap 4. Mặc dù bootstrap-flask là một nhánh rẽ của jar-bootstrap, một số API trong số đó sẽ được thảo luận ở đây đã được thay đổi, xóa hoặc cải thiện cùng với việc sửa lỗi và bao gồm các macro mới. Chúng tôi cũng sẽ nói ngắn gọn về việc di chuyển từ bình-bootstrap

Hãy để chúng tôi nói về bước đầu tiên trong việc sử dụng bootstrap-flask. Chúng ta sẽ cần sử dụng lệnh bằng cách sử dụng pip để cài đặt mô-đun tương ứng i. e. cài đặt pip bootstrap-flask. Bây giờ, cuối cùng, bạn có thể không gặp phải bất kỳ lỗi nào cho đến khi và trừ khi bạn cũng đã cài đặt bình khởi động. Trong trường hợp như vậy, trước tiên chúng ta cần sử dụng lệnh pip để gỡ cài đặt bootstrap-flask và sau đó tiến hành cài đặt bootstrap. Trong các trường hợp cả hai mô-đun được cài đặt, người ta sẽ cần gỡ cài đặt cả hai mô-đun ngay từ bước đầu tiên và sau đó cài đặt chúng trên bootstrap-flask. Trong một số trường hợp nhất định, nếu cả hai mô-đun đều được yêu cầu cho các dự án khác nhau, giải pháp duy nhất là sử dụng chúng trong các môi trường ảo riêng biệt

Sau khi mô-đun được cài đặt, chúng tôi sẽ cần nhập mô-đun vào mã python của mình. Sau khi hoàn tất, chúng ta sẽ cần khởi tạo đối tượng bootstrap bỏ qua nó bằng đối tượng ứng dụng Flask. Điều này giúp cài đặt tiện ích mở rộng của bootstrap vào ứng dụng Flask. Bây giờ bootstrap-flask đã được cài đặt cho đối tượng ứng dụng Flask, có html có thể được kế thừa để sử dụng nó làm mẫu. Điều này đạt được thông qua đường dẫn tìm kiếm mẫu của Flask. Việc tìm kiếm được thực hiện trong thư mục mẫu của ứng dụng hoặc trong thư mục mẫu của bản thiết kế. Mô-đun thực sự đăng ký một bản thiết kế cho ứng dụng Flask

Bây giờ có một số macro có sẵn trong mô-đun, việc hiểu về chúng cũng quan trọng không kém để hiểu toàn bộ chu trình của bootstrap

Tên của MacroTemplates PathTask của macrorender_field()bootstrap/form. htmlTrường biểu mẫu WTForms được hiển thị renderedrender_form()bootstrap/form. htmlBiểu mẫu WTForms được kết xuấtrender_form_row()bootstrap/form. htmlHàng của biểu mẫu lưới được hiển thị renderedrender_hidden_errors()bootstrap/form. htmlThông báo lỗi cho trường biểu mẫu ẩn được renderedrender_pager()bootstrap/phân trang. htmlPhân trang Flask-SQLAlchemy cơ bản được kết xuấtrender_pagination()bootstrap/pagination. htmlPhân trang Flask-SQLAlchemy chuẩn được hiển thị renderedrender_nav_item()bootstrap/nav. htmlMục điều hướng được renderedrender_breadcrumb_item()bootstrap/nav. htmlMục Breadcrumb được renderedrender_static()bootstrap/utils. htmlMã tham chiếu tài nguyên (i. e. < link >, < script >) được renderedrender_messages()bootstrap/utils. htmlCác tin nhắn nhấp nháy được gửi bởi hàm flash() được renderedrender_icon()bootstrap/utils. htmlBiểu tượng Bootstrap được kết xuất renderedrender_table()bootstrap/table. htmlTable với dữ liệu đã cho được hiển thị

Cách sử dụng macro khá đơn giản. Người ta chỉ cần nhập chúng từ đường dẫn được đề cập và gọi chúng chung như bất kỳ macro nào khác được gọi. Bằng cách sử dụng cách này, mẫu từ đường dẫn được chọn và tương ứng với nhiệm vụ của nó được sử dụng để hoàn thành nhiệm vụ của ứng dụng bình. Ngoài ra, có một số cấu hình để thực hiện các sắp xếp cần thiết giúp ứng dụng bình hoạt động tốt nhất

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem khóa học

600+ Khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập Trọn đời
4. 6 (84.149 xếp hạng)

ví dụ

Dưới đây là các ví dụ sau được đề cập dưới đây

Ví dụ 1

Cài đặt bootstrap và cấu hình nó

cú pháp

pip install bootstrap-flask

đầu ra

Ví dụ #2

Nhập Bootstrap vào mã ứng dụng

cú pháp

from flask_bootstrap import Bootstrap

đầu ra

Ví dụ #3

Ứng dụng Flask với bootstrap được kết xuất

cú pháp

Mục lục. html

{% extends "base.html" %}
{% block title %}Home Page{% endblock %}
{% block content %}


Home Page for Bootstrap tutorial


{% endblock %}

tập tin Python

________số 8

đầu ra

Ở đây chúng ta thấy rằng một bố cục đã được chuẩn bị bằng html thực sự được mở rộng từ cơ sở. bố cục html

Phần kết luận

Tóm lại, trong bài viết này, chúng ta đã tìm hiểu về bootstrap và cấu hình của nó cùng với ứng dụng trong Flask. Chúng tôi cũng có thể sử dụng phương pháp này để bao gồm một mẫu mà không cần thay đổi một dòng trong mã của một dự án hiện có để nhà phát triển không phải bắt đầu lại từ đầu. Điều duy nhất cần lưu ý trong quá trình sử dụng là không để bootstrap-flask và jar-bootstrap cùng nhau. Sử dụng cái phù hợp nhất cho ứng dụng. Giống như bất cứ lúc nào khác, phần còn lại dành cho bạn để thử nghiệm

Bài viết được đề xuất

Đây là hướng dẫn về Flask bootstrap. Ở đây chúng tôi thảo luận về bootstrap và cấu hình của nó cùng với ứng dụng trong Flask và Ví dụ với đầu ra. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Tôi có thể sử dụng Flask với Bootstrap không?

Flask sử dụng phiên bản Bootstrap nào?

Cách khởi tạo bình

Flask có tương thích với Python không?