Dấu gạch ngang bootstrap

Cho rằng phiên bản mới nhất của dash-bootstrap-components v1. 0 dựa trên Bootstrap 5, tôi đã tạo bảng tương tác tiện dụng này để sử dụng các lớp Bootstrap 5 trong ứng dụng Dash của bạn

Xem trực tiếp tại. Bảng mã Bootstrap của Dash

Nếu bạn đang nâng cấp từdash-bootstrap-components v0. 13 (đã sử dụng Bootstrap 4), bạn sẽ tìm thấy rất nhiều tính năng mới thú vị – nhưng cũng có một số thay đổi đột phá. Điều này chủ yếu là do Bootstrap 5 là bản viết lại chính của dự án Bootstrap. Không chỉ có những thay đổi đối với một số thành phần mà còn có nhiều lớp tiện ích mới và được đổi tên

Một ví dụ là Bootstrap 5 hiện hỗ trợ RTL, vì vậy các lớp được đổi tên thành “bắt đầu” và “kết thúc” thay vì “trái” và “phải”. Điều này có nghĩa là cách mới để đặt lề trái hoặc phải là className="ms-2 me-4" thay vì className="ml-2 mr-4". Ngoài ra còn có nhiều thứ mới như các lớp

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

0 và các lớp giúp tạo các thành phần dễ dàng hơn như.

Để biết thêm thông tin xem

• dash-bootstrap-components Thông báo V1
• Hướng dẫn di chuyển Bootstrap
• dash-bootstrap-components Hướng dẫn di chuyển

Hy vọng rằng Cheatsheet này sẽ giúp sử dụng dbc V1 và Bootstrap 5 trong ứng dụng Dash của bạn dễ dàng hơn

Lưu ý rằng trang web trực tiếp này có thể đang di chuyển - vì vậy nếu liên kết bị hỏng, hãy kiểm tra GitHub để biết thông tin mới nhất

---

.

Chào mọi người

Tôi chỉ muốn chia sẻ hướng dẫn nhỏ này về cách sử dụng các tiện ích Bootstrap với Dash. Bài viết này đề cập đến lớp tiện ích Bootstrap Stacks – trình trợ giúp tốc ký Bootstrap giúp bố cục thành phần nhanh hơn và dễ dàng hơn bao giờ hết. Các ví dụ được điều chỉnh cho các ứng dụng Dash từ tài liệu chính thức của Bootstrap

Các lớp tiện ích Bootstrap

Bootstrap bao gồm hàng chục lớp tiện ích để hiển thị, ẩn, căn chỉnh, giãn cách và tạo kiểu cho nội dung. Xem tất cả các lớp Bootstrap tại ứng dụng Dash Bootstrap Cheatsheet

Các lớp tiện ích Bootstrap có thể được áp dụng cho bất kỳ thành phần Dash nào để nhanh chóng tạo kiểu cho chúng mà không cần phải viết các quy tắc CSS tùy chỉnh. Sử dụng các lớp tiện ích Bootstrap trong phần hỗ trợ

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

3 của thành phần Dash

Bố cục dọc

Sử dụng

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

4 trong giá đỡ

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

3 để tạo bố cục dọc. Các mục được xếp chồng lên nhau có chiều rộng đầy đủ theo mặc định. Sử dụng các tiện ích

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

6 để thêm khoảng cách giữa các mục

from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="vstack gap-3"
)

app.layout= dbc.Container(stack)

if __name__ == "__main__":
    app.run(debug=True)

Bố cục ngang

Sử dụng

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

7 cho bố cục ngang. Các mục xếp chồng lên nhau được căn giữa theo chiều dọc theo mặc định và chỉ chiếm chiều rộng cần thiết của chúng. Sử dụng các tiện ích

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

6 để thêm khoảng cách giữa các mục

Ở đây chúng tôi thay đổi bố cục ngang bằng cách thay đổi một dòng mã. Hãy thử thay đổi từ

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

4 thành

stack = html.Div(
    [
        html.Div("First item", className="bg-light border"),
        html.Div("Second item", className="bg-light border"),
        html.Div("Third item", className="bg-light border")
    ], className="hstack gap-3"
)

7 trong ứng dụng ví dụ ở trên