Hướng dẫn bootstrap cheat sheet pdf - bootstrap cheat sheet pdf

Nếu bạn có kế hoạch chọn một số kỹ năng mã hóa, Bootstrap 4 là một lựa chọn vững chắc!

Nội dung chính Show

• Phiên bản pdf của bảng gian lận bootstrap
• Phiên bản infographic của Bootstrap Cheat Sheet (PNG)
• Bootstrap là gì?
• Các thành phần bootstrap chính
• Các yếu tố mã nguồn bootstrap
• Kích thước màn hình bootstrap
• Các thành phần khóa bootstrap
• Bootstrap Kiểu dáng cần thiết
• dash-bootstrap-cheatsheet
• Xem nó trực tiếp tại https://dashcheatsheet.pythonanywhere.com/
• Lưu ý - Đây là một WIP. Nếu bạn có bất kỳ nhận xét hoặc đề xuất hoặc chỉ muốn đưa ra một số ❤ Vui lòng mở một vấn đề.
• Đồ thị trong các tab
• Các thành phần có thể tái sử dụng
• Đồ thị trong các tab
• Bắt đầu nhanh chóng
• Thư viện thành phần mở rộng
• Có thể tùy chỉnh cao
• Siêu anh hùng
• Xin chào Dash
• Thực hiện thay đổi đầu tiên của bạn
• Thêm về các thành phần HTML
• Xin chào Dash
• Dash bao gồm tải nóng nóng, các tính năng này được kích hoạt theo mặc định khi bạn chạy ứng dụng của mình với ____37. Điều này có nghĩa là Dash sẽ tự động làm mới trình duyệt của bạn khi bạn thực hiện thay đổi mã của mình.
• Thêm về trực quan
• Đánh dấu
• Dash và Markdown
• Thành phần cốt lõi
• Cứu giúp
• Bản tóm tắt

Why?

Bởi vì nó là tiêu chuẩn vàng của sự phát triển mặt trước:

• Bootstrap có các lớp học tích hợp, có nghĩa là bạn không phải mã hóa hầu hết các yếu tố từ đầu
• Nó nguồn mở và có sự hỗ trợ lớn của cộng đồng
• Thêm vào đó, nó siêu linh hoạt và có thể được sử dụng để tạo bất kỳ loại trang web nào ngay lập tức.

Nếu bạn đã sẵn sàng để cuộn, hãy tải xuống tờ cheat bootstrap miễn phí của chúng tôi trong pdf.

Phiên bản pdf của bảng gian lận bootstrap

Bootstrap Cheat Sheet (Tải xuống PDF)

Phiên bản infographic của Bootstrap Cheat Sheet (PNG)

Bootstrap Cheat Sheet (Tải xuống PNG)

Bootstrap là gì?

Bootstrap 4 là một khung phổ biến để phát triển trang web phía trước.

Chủ yếu, nó là thiết kế đầu tiên trên thiết bị di động CSS và bao gồm cả các mẫu CSS và JavaScript cho những thứ như hình thức, nút, điều hướng, kiểu chữ, thả xuống, popover, phương thức và băng chuyền, cùng với các yếu tố giao diện khác. Nhưng don lồng sai nó: Bootstrap cũng cung cấp nhiều chỗ để tùy chỉnh và bạn có thể sử dụng nó để mã hóa bất kỳ loại trang web nào.

Bạn có thể xem tài liệu đầy đủ trên trang web chính thức của Bootstrap.

Các thành phần bootstrap chính

Bootstrap.css

Đây là gói bootstrap cơ bản mà bạn sẽ cần tải xuống. CSS là một ngôn ngữ bảng kiểu cho thông tin tĩnh.

Bootstrap.js

Một thư viện JavaScript/jQuery là những gì cung cấp năng lượng cho các thành phần nhất định của bootstrap như hoạt hình, cuộn và tương tác.

Glyphicons

Glyphs là các biểu tượng nguyên tố với kiểu chữ, chẳng hạn như biểu tượng pound tiếng Anh (£). Bootstrap có một danh sách khổng lồ các biểu tượng glyph nhúng có sẵn miễn phí.

Các yếu tố mã nguồn bootstrap

Tải xuống mã nguồn bootstrap bao gồm các tài sản CSS, JavaScript và phông chữ được biên dịch trước, cùng với nguồn ít hơn, JavaScript và tài liệu.

• 5 - Một bảng kiểu tiền xử lý cho CSS loại bỏ các tác vụ mã hóa lặp đi lặp lại

• 6 - Phiên bản mới hơn của bộ tiền xử lý phổ biến hơn

• 7 - Chỉ cần đề cập đến mã nguồn JavaScript, cho phép các thành phần bootstrap hoạt động

• 8 - Đây là những phông chữ biểu tượng đi kèm với bản tải xuống

• 9-Một thư mục chứa các tệp được biên dịch trước để sử dụng thả vào trong phát triển trang web

Lưu ý: Bootstrap cũng yêu cầu cài đặt jQuery cho các plugin JavaScript Bootstrap. JQuery là một thành phần giàu tính năng của thư viện JavaScript và nó đã đánh bại rất nhiều mã JavaScript và kết thúc chúng thành các hành động bạn có thể thực hiện bằng một dòng. Bootstrap also requires jQuery installation for Bootstrap’s JavaScript plugins. jQuery is a feature-rich component of the JavaScript library, and it whittles down lots of JavaScript code and wraps them into actions you can accomplish with a single line.

Để cài đặt trình cắm:

Kích thước màn hình bootstrap

Kích thước màn hình bootstrap (mở rộng)

Các thành phần khóa bootstrap

Các thành phần khóa Bootstrap (Mở rộng)

Bootstrap Kiểu dáng cần thiết

Bootstrap Styling Essentials (Mở rộng)

Thêm về trực quan

Nội phân chính

• Đồ thị trong các tab
• Bắt đầu nhanh chóng
• Bắt đầu nhanh chóng
• Thư viện thành phần mở rộng
• Có thể tùy chỉnh cao
• Xin chào Dash
• Thực hiện thay đổi đầu tiên của bạn
• Thêm về các thành phần HTML
• Xin chào Dash
• Thực hiện thay đổi đầu tiên của bạn
• Thêm về các thành phần HTML
• Dash và Markdown
• Thành phần cốt lõi

Các thành phần có thể tái sử dụng

Thêm về trực quan

Đồ thị trong các tab

Bắt đầu nhanh chóng

Thư viện thành phần mở rộng

Bắt đầu nhanh chóng

Thư viện thành phần mở rộng

Có thể tùy chỉnh cao

Xem QuickStart để biết thêm chi tiết, bao gồm các hướng dẫn cài đặt cho R và Julia.

Bắt đầu nhanh "

pip install dash-bootstrap-components

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

Thư viện thành phần mở rộng

Bootstrap

Phong cách bootstrap.

Các thành phần Bootstrap có sẵn dưới dạng các thành phần Dash gốc để cho phép bạn dễ dàng kết hợp chúng vào các ứng dụng Dash của bạn. Mỗi thành phần hiển thị một số đạo cụ để cho phép bạn kiểm soát hành vi bằng các cuộc gọi lại Dash.

Các thành phần "

Có thể tùy chỉnh cao

Siêu anh hùng

Phong cách siêu anh hùng.

Các thành phần Dash Bootstrap tương thích với bất kỳ kiểu dáng Bootstrap V5 nào bạn chọn. Tìm hiểu cách tùy chỉnh giao diện của ứng dụng của bạn bằng cách sử dụng các chủ đề đi kèm hoặc các chủ đề tùy chỉnh của riêng bạn.

Chủ đề »

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Xin chào Dash

Dash: Một khung ứng dụng web cho dữ liệu của bạn.

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

Truy cập http://127.0.0.1:8050/ trong trình duyệt web của bạn. Bạn sẽ thấy một ứng dụng trông giống như ở trên.
in your web browser. You should see an app that looks like the one above.

Note:

1. 7 bao gồm một cây của các thành phần của người Hồi giáo, chẳng hạn như
   8 và
   9.
   
   8
   and
   9.

2. Mô -đun thành phần HTML Dash (

   0)

   Có một thành phần cho mỗi thẻ HTML. Thành phần

   1 tạo ra phần tử
   2 HTML trong ứng dụng của bạn. 3. Không phải tất cả các thành phần là HTML thuần túy. Mô-đun thành phần lõi Dash (
   3) chứa các thành phần cấp cao hơn tương tác và được tạo bằng JavaScript, HTML và CSS thông qua thư viện React.js.
   The
   1
   component generates a
   2 HTML element in your application.
   3. Not all components are pure HTML.
   The Dash Core Components module (
   3)
   contains higher-level components that are interactive and are generated with
   JavaScript, HTML, and CSS through the React.js library.

3. Mỗi thành phần được mô tả hoàn toàn thông qua các thuộc tính từ khóa. Dash là khai báo: Bạn sẽ chủ yếu mô tả ứng dụng của mình thông qua các thuộc tính này.
   Dash is declarative: you will primarily describe your application
   through these attributes.

4. Tài sản
   4 là đặc biệt. Theo quy ước, nó luôn luôn là thuộc tính đầu tiên có nghĩa là bạn có thể bỏ qua nó:
   1 giống như
   6. Nó có thể chứa một chuỗi, một số, một thành phần duy nhất hoặc danh sách các thành phần.
5. Các phông chữ trong ứng dụng của bạn sẽ trông hơi khác một chút so với những gì được hiển thị ở đây. Ứng dụng này đang sử dụng Bộ thiết kế kiểu CSS tùy chỉnh và Dash Enterprise Design để sửa đổi các kiểu mặc định của các yếu tố. Bạn có thể tìm hiểu thêm về CSS tùy chỉnh trong hướng dẫn CSS.
   This application is using a custom CSS stylesheet and Dash Enterprise Design Kit
   to modify the default styles of the elements. You can learn more about custom CSS in the
   CSS tutorial.

Thực hiện thay đổi đầu tiên của bạn

Dash bao gồm tải nóng nóng, các tính năng này được kích hoạt theo mặc định khi bạn chạy ứng dụng của mình với ____37. Điều này có nghĩa là Dash sẽ tự động làm mới trình duyệt của bạn khi bạn thực hiện thay đổi mã của mình.
you run your app with

Hãy thử: Thay đổi tiêu đề Hello Hello Dash trong ứng dụng của bạn hoặc thay đổi dữ liệu

Bạn có thích tải nóng không? Bạn có thể tắt nó với ____40. Tìm hiểu thêm trong câu hỏi tài liệu công cụ Dash Dev? Xem Diễn đàn Cộng đồng Thảo luận tải lại nóng.
Learn more in Dash Dev Tools documentation
Questions? See the community forum hot reloading discussion.

Thêm về các thành phần HTML

Các thành phần HTML Dash (

Hãy để tùy chỉnh văn bản trong ứng dụng của chúng tôi bằng cách sửa đổi các kiểu nội tuyến của các thành phần. Tạo một tệp có tên

pip install dash-bootstrap-components

pip install dash-bootstrap-components

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd

app = Dash(__name__)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='Dash: A web application framework for your data.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-2',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Xin chào Dash

Dash: Một khung ứng dụng web cho dữ liệu của bạn.

Truy cập http://127.0.0.1:8050/ trong trình duyệt web của bạn. Bạn sẽ thấy một ứng dụng trông giống như ở trên.

pip install dash-bootstrap-components

pip install dash-bootstrap-components

html.H1('Hello Dash', style={'textAlign': 'center', 'color': '#7FDBFF'})

Mô -đun thành phần HTML Dash (

1. Có một thành phần cho mỗi thẻ HTML. Thành phần
   1 tạo ra phần tử
   2 HTML trong ứng dụng của bạn. 3. Không phải tất cả các thành phần là HTML thuần túy. Mô-đun thành phần lõi Dash (
   3) chứa các thành phần cấp cao hơn tương tác và được tạo bằng JavaScript, HTML và CSS thông qua thư viện React.js.
   you can just supply a dictionary.
2. Mỗi thành phần được mô tả hoàn toàn thông qua các thuộc tính từ khóa. Dash là khai báo: Bạn sẽ chủ yếu mô tả ứng dụng của mình thông qua các thuộc tính này.
   So, instead of

   import dash
   import dash_bootstrap_components as dbc
   
   app = dash.Dash(
       external_stylesheets=[dbc.themes.BOOTSTRAP]
   )
   
   app.layout = dbc.Alert(
       "Hello, Bootstrap!", className="m-5"
   )
   
   if __name__ == "__main__":
       app.run_server()

   0, it’s

   import dash
   import dash_bootstrap_components as dbc
   
   app = dash.Dash(
       external_stylesheets=[dbc.themes.BOOTSTRAP]
   )
   
   app.layout = dbc.Alert(
       "Hello, Bootstrap!", className="m-5"
   )
   
   if __name__ == "__main__":
       app.run_server()

   1.
3. Tài sản
   4 là đặc biệt. Theo quy ước, nó luôn luôn là thuộc tính đầu tiên có nghĩa là bạn có thể bỏ qua nó:
   1 giống như
   6. Nó có thể chứa một chuỗi, một số, một thành phần duy nhất hoặc danh sách các thành phần.
4. Các phông chữ trong ứng dụng của bạn sẽ trông hơi khác một chút so với những gì được hiển thị ở đây. Ứng dụng này đang sử dụng Bộ thiết kế kiểu CSS tùy chỉnh và Dash Enterprise Design để sửa đổi các kiểu mặc định của các yếu tố. Bạn có thể tìm hiểu thêm về CSS tùy chỉnh trong hướng dẫn CSS.
   argument. By convention, this is always the first argument and so it is often omitted.

Thực hiện thay đổi đầu tiên của bạn
to you within your Python context.

Dash bao gồm tải nóng nóng, các tính năng này được kích hoạt theo mặc định khi bạn chạy ứng dụng của mình với ____37. Điều này có nghĩa là Dash sẽ tự động làm mới trình duyệt của bạn khi bạn thực hiện thay đổi mã của mình.

Hãy thử: Thay đổi tiêu đề Hello Hello Dash trong ứng dụng của bạn hoặc thay đổi dữ liệu

Bạn có thích tải nóng không? Bạn có thể tắt nó với ____40. Tìm hiểu thêm trong câu hỏi tài liệu công cụ Dash Dev? Xem Diễn đàn Cộng đồng Thảo luận tải lại nóng.
Pandas dataframe. Create a file named

pip install dash-bootstrap-components

Thêm về các thành phần HTML

pip install dash-bootstrap-components

pip install dash-bootstrap-components

pip install dash-bootstrap-components

pip install dash-bootstrap-components

pip install dash-bootstrap-components

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

pip install dash-bootstrap-components

Thêm về trực quan

Mô -đun thành phần lõi Dash (

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

Đối số

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

Dưới đây, một ví dụ tạo ra một âm mưu phân tán từ khung dữ liệu gấu trúc. Tạo một tệp có tên

pip install dash-bootstrap-components

pip install dash-bootstrap-components

Các biểu đồ này là tương tác và phản hồi. Nhìn qua các điểm để xem các giá trị của chúng, nhấp vào các mục huyền thoại để chuyển đổi dấu vết, nhấp và kéo để phóng to, giữ Shift và nhấp và kéo đến Pan.
Hover over points to see their values,
click on legend items to toggle traces,
click and drag to zoom,
hold down shift, and click and drag to pan.

Đánh dấu

Mặc dù Dash phơi bày HTML thông qua các thành phần HTML DASH (

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

pip install dash-bootstrap-components

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

pip install dash-bootstrap-components

Dash và Markdown

Ứng dụng Dash có thể được viết bằng Markdown. Dash sử dụng đặc tả Commonmark của Markdown. Kiểm tra hướng dẫn đánh dấu 60 giây của họ nếu đây là phần giới thiệu đầu tiên của bạn về Markdown!
Dash uses the CommonMark
specification of Markdown.
Check out their 60 Second Markdown Tutorial
if this is your first introduction to Markdown!

Thành phần cốt lõi

Các thành phần lõi Dash (

Giống như tất cả các thành phần Dash, chúng được mô tả hoàn toàn khai báo. Mỗi tùy chọn có thể định cấu hình đều có sẵn dưới dạng đối số từ khóa của thành phần.
Every option that is configurable is available as a keyword argument
of the component.

Chúng tôi sẽ thấy nhiều thành phần này trong suốt hướng dẫn. Bạn có thể xem tất cả các thành phần có sẵn trong bộ sưu tập các thành phần cốt lõi Dash.
You can view all of the available components in the
Dash Core Components Gallery.

Dưới đây là một vài thành phần có sẵn. Tạo một tệp có tên

pip install dash-bootstrap-components

pip install dash-bootstrap-components

Thả xuống

Thả xuống đa lựa chọn

Các mặt hàng radio

Hộp kiểm

Đầu vào văn bản

Thanh trượt

Cứu giúp

Các thành phần Dash được khai báo: Mọi khía cạnh có thể định cấu hình của các thành phần này được đặt trong quá trình khởi tạo làm đối số từ khóa.
components is set during instantiation as a keyword argument.

Gọi

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

Bản tóm tắt

Các thành phần HTML Dash (

pip install dash-bootstrap-components

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

pip install dash-bootstrap-components

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Alert(
    "Hello, Bootstrap!", className="m-5"
)

if __name__ == "__main__":
    app.run_server()

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

Để tham khảo, xem:

• Bộ sưu tập thành phần cốt lõi Dash
• Bộ sưu tập linh kiện HTML Dash

Phần tiếp theo của hướng dẫn Dash bao gồm cách làm cho các ứng dụng này tương tác. Hướng dẫn Dash Phần 3: Gọi lại cơ bản
Dash Tutorial Part 3: Basic Callbacks