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

Python Flask là một micro-framework để tạo các ứng dụng web. Nó rất nhẹ và dễ bắt đầu, và cũng rất phổ biến. Vì Flask là một khung web, nên làm việc với nó sẽ yêu cầu kiến ​​thức về HTML

Tuy nhiên, bản thân HTML rất hạn chế về những gì nó có thể làm đối với sự xuất hiện của một trang web. Chắc chắn, nó kiểm soát cấu trúc cơ bản và điều đó rất quan trọng, nhưng cần nhiều hơn nữa để tạo ra các thiết kế hấp dẫn sẽ thu hút người dùng của bạn và khiến họ muốn sử dụng trang web của bạn cho bất kỳ mục đích nào mà bạn đã tạo ra nó.

Chìa khóa để kiểm soát sự xuất hiện của một trang web là CSS – Cascading Style Sheets. CSS xác định cách hiển thị các phần tử HTML. Nó là một công cụ mạnh mẽ, nhưng nó đòi hỏi khá nhiều thời gian học tập để trở nên thành thạo trong

Tuy nhiên, có một lối tắt nếu bạn muốn tạo các trang web trực quan tuyệt đẹp với số lượng CSS tối thiểu

Sử dụng Bootstrap 4 với Python Flask

Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo trang web 1 trang bằng Python Flask và Bootstrap 4, làm bàn đạp để bạn khám phá thế giới tuyệt vời của các ứng dụng Web Python dễ tạo kiểu. Hãy bắt đầu

  • Nếu bạn chưa làm như vậy, hãy cài đặt Flask từ dòng lệnh bằng cách sử dụng pip install flask trên Windows hoặc pip3 install flask trên Mac/Linux
  • Tạo một thư mục mới có tên “Python Flask Bootstrap Demo” ở đâu đó thuận tiện trên máy tính của bạn
  • Tạo một tệp có tên là app.py
  • Thêm các nội dung sau
from flask import Flask, render_template


app = Flask(__name__)


@app.route("/")
def main():
    return render_template('index.html')


if __name__ == "__main__":
    app.run()
  • Tạo một thư mục có tên templates bên trong thư mục hiện tại
  • Tạo một tệp mới có tên là index.html
  • Thêm mã HTML demo sau, được điều chỉnh từ trang web w3schools



  Python Flask & Bootstrap 4
  
  
  
  
  
  
  



Python Flask & Bootstrap 4

Resize this responsive page to see the effect!

About Me

Photo of me:
Fake Image

Some text about me in culpa qui officia deserunt mollit anim..

Some Links

Lorem ipsum dolor sit ame.


TITLE HEADING

Title description, Dec 7, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


TITLE HEADING

Title description, Sep 2, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer

  • Chạy app.py
  • Bạn sẽ thấy một thông báo như thế này
Serving Flask app "flask-hello" (lazy loading)
Environment: production
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.
Debug mode: off
Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
  • Điều hướng đến http://127.0.0.1:5000/ trong trình duyệt của bạn và chắc chắn sẽ có trang chủ Bootstrap 4 Demo của bạn, được cung cấp bởi Python Flask

Chi tiết về cách thức hoạt động của Flask không phải là chủ đề của bài viết này, nhưng có rất nhiều thông tin trực tuyến dành cho những người tò mò và chúng tôi có thể sẽ đề cập đến Flask tại đây trên Compucademy trong tương lai gần

Điều tôi muốn làm ở đây là khuyến khích bạn khám phá mã soạn sẵn được cung cấp và bắt đầu hiểu cách thức hoạt động của nó. Bạn nên thay đồ, đập vỡ đồ, di chuyển đồ xung quanh và nói chung là làm bẩn tay bạn. Sẽ mất một chút thời gian để trở nên thành thạo với Bootstrap, nhưng sẽ rất nhanh chóng và dễ dàng để tạo ra các thiết kế đẹp khi bạn đã hiểu một số kiến ​​thức cơ bản

Để giúp bạn bắt đầu, đây là một vài gợi ý

  • Bootstrap có thể được bao gồm thông qua một máy chủ từ xa (CDN) hoặc từ các tệp dự án của riêng bạn sau khi bạn đã tải xuống chúng
  • Trong ví dụ này, nó được bao gồm thông qua
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    0
  • Các phần JavaScript của Bootstrap không phải lúc nào cũng cần thiết. Tôi đã để chúng vào để bạn có thể xem cách đưa chúng vào
  • Nói chung, bạn nên sử dụng các phiên bản CSS và JS mới nhất, có tại đây
  • Kiểu dáng CSS được áp dụng thông qua
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    1 được thêm vào các phần tử html. Các lớp này có CSS ​​được xác định trước được xác định trên chúng
  • Một số lớp ví dụ là. —
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    2. được sử dụng để bọc xung quanh một tập hợp các phần tử mà bạn muốn áp dụng các lớp Bootstrap vào —
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    3. được sử dụng để tách nội dung thành các hàng ngang —
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    4. sử dụng hệ thống lưới Bootstrap mạnh mẽ để kiểm soát bố cục dựa trên lưới. Ví dụ này có nghĩa là “trên các thiết bị nhỏ trở xuống (xuống xs – cực nhỏ) phần tử này chiếm 8 trên 12 đơn vị cột. " TÔI. e. nó sẽ chiếm 2/3 không gian ngang có sẵn, vì Bootstrap dựa trên sự phân chia 12 cột của các hàng. —
    
    
    
      Python Flask & Bootstrap 4
      
      
      
      
      
      
      
    
    
    
    

    Python Flask & Bootstrap 4

    Resize this responsive page to see the effect!

    About Me

    Photo of me:
    Fake Image

    Some text about me in culpa qui officia deserunt mollit anim..

    Some Links

    Lorem ipsum dolor sit ame.


    TITLE HEADING

    Title description, Dec 7, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


    TITLE HEADING

    Title description, Sep 2, 2017
    Fake Image

    Some text..

    Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

    Footer

    5 cung cấp cho bạn tất cả kiểu dáng bạn cần để tạo menu điều hướng đáp ứng thông minh

Tách kiểu khỏi bố cục bằng Bootstrap 4

Một điều mà bạn có thể nhận thấy về cách thức hoạt động của Bootstrap là việc tách phong cách khỏi bố cục thường được khuyến nghị không thực sự được giữ nguyên. Điều này là do khi viết HTML của bạn, bạn đặt các lớp có tên có ý nghĩa về mặt ngữ nghĩa về hành vi trực quan của chúng. Nếu bạn đang tách biệt phong cách khỏi bố cục một cách nghiêm ngặt, bạn sẽ cần phải làm điều gì đó như




  Python Flask & Bootstrap 4
  
  
  
  
  
  
  



Python Flask & Bootstrap 4

Resize this responsive page to see the effect!

About Me

Photo of me:
Fake Image

Some text about me in culpa qui officia deserunt mollit anim..

Some Links

Lorem ipsum dolor sit ame.


TITLE HEADING

Title description, Dec 7, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


TITLE HEADING

Title description, Sep 2, 2017
Fake Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer

6 và sau đó bạn sẽ có quyền tự do hiển thị div đó theo bất kỳ cách nào bạn thấy phù hợp mà không cần quan tâm đến thực tế là ví dụ như chức năng của một hàng. Đây không phải là một vấn đề quan trọng trong thực tế mặc dù vậy đừng để nó làm bạn lo lắng. Nó thực sự chỉ là một quan sát


Vậy là bạn đã có nó - một bàn đạp để tạo các ứng dụng Flask đẹp mắt một cách nhanh chóng và dễ dàng bằng Bootstrap 4. Tôi hy vọng bạn thích nó và nếu bạn muốn cập nhật các bài báo và ưu đãi từ Compucademy, vui lòng cân nhắc tham gia danh sách gửi thư của chúng tôi

Bình khởi động sử dụng phiên bản Bootstrap nào?

Flask-Bootstrap 3. 3. 7. 1 .

Flask có sử dụng Bootstrap không?

Một ứng dụng Flask cơ bản . uses a Bootstrap container, with some top margin.

Phiên bản hiện tại của Flask là gì?

Flask (khung web)

Làm cách nào để cài đặt Bootstrap trong Python?

Cài đặt .
Cài đặt bằng pip. cài đặt pip django-bootstrap-v5. Ngoài ra, bạn có thể cài đặt tải xuống hoặc sao chép repo này và gọi pip install -e.
Thêm vào INSTALLED_APPS trong cài đặt của bạn. py. INTALLED_APPS = ( #. "bootstrap5", #. )
Trong các mẫu của bạn, hãy tải thư viện bootstrap5 và sử dụng các thẻ bootstrap_*