【Python百日基础系列】Day46 - Dash Bootstrap Components 初识

一、Dash Bootstrap Components(DBC) 是什么

• dash-bootstrap-components是 Plotly Dash 的 Bootstrap 组件库，它可以更轻松地构建具有复杂响应式布局的一致样式的应用程序。
• 安装后，只需链接 Bootstrap 样式表并开始使用组件，就像使用其他 Dash 组件库一样。
• Bootstrap 组件可作为本机 Dash 组件使用，让您可以轻松地将它们合并到您的 Dash 应用程序中。每个组件都公开了许多道具，让您可以使用 Dash 回调来控制行为。
• Dash Bootstrap Components 与您选择的任何 Bootstrap v5 样式表兼容。

二、DBC安装

2.1 pip安装

 pip install dash-bootstrap-components  -i https://mirror.baidu.com/pypi/simple

2.2 基本用法

dash-bootstrap-components是一个用于 Plotly Dash 的组件库。
要使用dash-bootstrap-components，你必须做两件事：

• 链接 Bootstrap v5 兼容的样式表
• 将dash-bootstrap-components合并到您的应用程序的布局中。

2.3 链接样式表

dash-bootstrap-components不包含 CSS。这是为了让您可以自由地使用您选择的任何 Bootstrap v5 样式表。然而，这意味着为了正确设置组件的样式，您必须自己链接到样式表。
为方便起见，用于标准 Bootstrap 和每个 Bootswatch 主题的JSDelivr 的CDN 链接可作为dash-bootstrap-components 的一部分提供，可以按如下方式使用

import dash
import dash_bootstrap_components as dbc

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

2.4 构建布局

import dash
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

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

三、主题

通过从不同的 Bootstrap 和 Bootswatch 主题中进行选择来自定义您的应用程序。
dash-bootstrap-components不包含 CSS。这是为了让您可以自由地使用您选择的任何 Bootstrap v5 样式表，这样您就可以在您的应用程序中实现您想要的外观。
您可以链接到通过 CDN 提供的样式表，或根据需要在本地提供 CSS。

3.1 打包的 CDN 链接

dash-bootstrap-components包含指向托管在JSDelivr上的 Bootstrap 和 Bootswatch 样式表的链接，因此您可以在您的应用程序中方便地链接到其中之一。最简单的方法是external_stylesheets在实例化应用程序时使用参数。

3.1.1 使用dbc.themes.BOOTSTRAP主题

import dash
import dash_bootstrap_components as dbc

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

3.1.2 使用dbc.themes.CYBORG主题

import dash
import dash_bootstrap_components as dbc

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

3.1.3 可用的主体样式

BOOTSTRAP = (
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
)

GRID = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css"  # noqa

_BOOTSWATCH_BASE = "https://cdn.jsdelivr.net/npm/[email protected]/dist/"
CERULEAN = _BOOTSWATCH_BASE + "cerulean/bootstrap.min.css"
COSMO = _BOOTSWATCH_BASE + "cosmo/bootstrap.min.css"
CYBORG = _BOOTSWATCH_BASE + "cyborg/bootstrap.min.css"
DARKLY = _BOOTSWATCH_BASE + "darkly/bootstrap.min.css"
FLATLY = _BOOTSWATCH_BASE + "flatly/bootstrap.min.css"
JOURNAL = _BOOTSWATCH_BASE + "journal/bootstrap.min.css"
LITERA = _BOOTSWATCH_BASE + "litera/bootstrap.min.css"
LUMEN = _BOOTSWATCH_BASE + "lumen/bootstrap.min.css"
LUX = _BOOTSWATCH_BASE + "lux/bootstrap.min.css"
MATERIA = _BOOTSWATCH_BASE + "materia/bootstrap.min.css"
MINTY = _BOOTSWATCH_BASE + "minty/bootstrap.min.css"
MORPH = _BOOTSWATCH_BASE + "morph/bootstrap.min.css"
PULSE = _BOOTSWATCH_BASE + "pulse/bootstrap.min.css"
QUARTZ = _BOOTSWATCH_BASE + "quartz/bootstrap.min.css"
SANDSTONE = _BOOTSWATCH_BASE + "sandstone/bootstrap.min.css"
SIMPLEX = _BOOTSWATCH_BASE + "simplex/bootstrap.min.css"
SKETCHY = _BOOTSWATCH_BASE + "sketchy/bootstrap.min.css"
SLATE = _BOOTSWATCH_BASE + "slate/bootstrap.min.css"
SOLAR = _BOOTSWATCH_BASE + "solar/bootstrap.min.css"
SPACELAB = _BOOTSWATCH_BASE + "spacelab/bootstrap.min.css"
SUPERHERO = _BOOTSWATCH_BASE + "superhero/bootstrap.min.css"
UNITED = _BOOTSWATCH_BASE + "united/bootstrap.min.css"
VAPOR = _BOOTSWATCH_BASE + "vapor/bootstrap.min.css"
YETI = _BOOTSWATCH_BASE + "yeti/bootstrap.min.css"
ZEPHYR = _BOOTSWATCH_BASE + "zephyr/bootstrap.min.css"

3.2 手动链接到 CDN

每个主题（例如）只是一个存储为字符串的 BootstrapCDN URL，因此使用主题模块实际上相当于执行以下操作。
您可以将此 URL 更改为您喜欢的任何内容，例如，如果您更喜欢使用镜像或不同的 CDN 来提供样式表。

BS = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
app = dash.Dash(external_stylesheets=[BS])

3.3 链接本地 CSS

如果您愿意，您可以下载样式表并在本地提供它。如果您受到防火墙的限制，或者如果您想修改样式表甚至编译您自己的. 有在线工具可以帮助解决这个问题，我们推荐Bootstrap Build。
链接本地样式表的最简单方法是将其放置在assets/app 目录根目录下的文件夹中。

3.4 可用主题

网上有许多免费使用的 Bootstrap 样式表。该dash_bootstrap_components.themes模块包含 Bootstrap 和所有Bootswatch 主题的CDN 链接。Bootstrap 还维护着自己的 [主题网站][bootstrap-themes]，其中列出了许多可以合并到应用程序中的免费和高级主题。
首先，我们建议尝试使用dash_bootstrap_components.themes模块中提供的一些 Bootswatch 主题。可用的主题的完整列表CERULEAN，COSMO，CYBORG，DARKLY，FLATLY，JOURNAL，LITERA，LUMEN，LUX，MATERIA，MINTY，MORPH，PULSE，QUARTZ，SANDSTONE，SIMPLEX，SKETCHY，SLATE，SOLAR，SPACELAB，SUPERHERO，UNITED，VAPOR，YETI，ZEPHYR。
查看主题浏览器，查看使用所有不同可用主题的 dash-bootstrap-components 的现场演示。您可能还想查看dash-bootstrap-css项目，其中包含 Bootstrap 样式表，这些样式表对来自 dash-core-components 的各种组件应用一致的样式。

四、图标

添加图标以增强您的应用程序。
与CSS 样式表一样，dash-bootstrap-components没有预先捆绑图标。这是为了让您可以自由地使用您选择的任何图标库。
有许多不同的图标库可用，您可以通过 CDN 链接到这些图标库，也可以根据需要在本地提供服务。可以在主题文档中找到有关如何链接 css 的详细信息。

4.1 打包的 CDN 链接

dash-bootstrap-components包含Bootstrap Icons和Font Awesome 的CDN 链接，这两个图标库可以在您的应用程序中使用。您可以通过external_stylesheets在实例化您的应用程序时将它们添加到其中来使用它们中的任何一个。
Bootstrap Icons 由 Bootstrap 团队开发，专门用于 Bootstrap。Bootstrap 网站上有关于如何使用它们的优秀文档，下面还有一个小例子。
Font Awesome 可能是使用最广泛的图标库，并且非常常与 Bootstrap 一起使用。用法类似于 Bootstrap Icons，查看他们的文档了解更多细节。

import dash
import dash_bootstrap_components as dbc

# For Bootstrap Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)
# Or for Font Awesome Icons...
app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME]
)

4.2 图标示例

import dash_bootstrap_components as dbc
from dash import html
import dash

alerts = html.Div(
    [
        dbc.Alert(
            [
                html.I(className="bi bi-info-circle-fill me-2"),
                "带有图标的  信息  警报示例",
            ],
            color="info",
            className="d-flex align-items-center",
        ),
        dbc.Alert(
            [
                html.I(className="bi bi-check-circle-fill me-2"),
                "带有图标的  成功  警报示例",
            ],
            color="success",
            className="d-flex align-items-center",
        ),
        dbc.Alert(
            [
                html.I(className="bi bi-exclamation-triangle-fill me-2"),
                "带有图标的  警告  警报示例",
            ],
            color="warning",
            className="d-flex align-items-center",
        ),
        dbc.Alert(
            [
                html.I(className="bi bi-x-octagon-fill me-2"),
                "带有图标的  危险  警报示例",
            ],
            color="danger",
            className="d-flex align-items-center",
        ),
    ]
)

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

app.layout = html.Div(alerts)

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

五、Bootstrap边距定义

问题：mb-3是什么意思？答：底部外边距1rem

5.1 浏览器分辨率 breakpoint

Bootstrap具有广泛的响应边距和填充实用程序类。它们适用于所有breakpoint：

• xs(< = 576px)
• sm(> = 576px)
• md(> = 768px)
• lg(> = 992px)
• xl(> = 1200px))

5.2 边距类的格式

{property} {sides} – {size} for xs
{property} {sides} – {breakpoint} – {size} for sm，md，lg和xl。

5.2.1 property的可选值

property的可选值为m/p分别代表margin和padding

5.2.2 sides的可选值

• t – 设置margin-top或padding-top

• b – 设置margin-bottom或padding-bottom

• l – 设置margin-left或padding-left

• r – 设置margin-right或padding-right

• x – 设置padding-left和padding-right或margin-left和margin-right

• y – 设置padding-top和padding-bottom或margin-top和margin-bottom

• 空白 – 在元素的所有4个边上设置边距或填充

5.2.3 breakpoint的可选值

breakpoint的可选值有sm,md,lg,xl，意为在breakpoint的情况下才生效。

5.2.4 size可选值

size可选值为0/1/2/3/4/5/auto，在_variables.scss中可以找到

• 0 – 将边距或填充设置为0

• 1 – 将边距或填充设置为.25rem(如果font-size为16px则为4px)

• 2 – 将边距或填充设置为.5rem(如果字体大小为16px则为8px)

• 3 – 将边距或填充设置为1rem(如果字体大小为16px，则为16px)

• 4 – 将边距或填充设置为1.5rem(如果字体大小为16px，则为24px)

• 5 – 将边距或填充设置为3rem(如果font-size为16px则为48px)

5.3 Bootstrap5 槽宽（Gutters）

槽宽（Gutters）是列之间的填充，用于响应地间隔和对齐Bootstrap网格系统中的内容。

5.3.1 Gutters是如何工作

• Gutters是列内容之间的间隙，由水平padding创建的。我们在每一列设置padding-right和padding-left，并在每一行的开头和结尾使用负margin来抵消，以对齐内容。

• Gutters开始是1.5rem（20px）宽。这使我们能够根据padding和margin spacers的比例来匹配我们的网格。

• Gutters可以响应地调整。使用breakpoint特定的gutter类来修改水平间隔、垂直间隔和所有间隔。

5.3.2 水平间隔 gx-*

gx-*类可以用来控制水平间隔宽度。如果使用较大的间隔，可能需要调整.container或.container-fluid父类，以避免溢出，使用匹配的padding工具。例如，我们用.px-4增加padding。

5.3.3 垂直间隔 gy-*

gy-*类可以用来控制垂直槽的宽度。像水平间隔一样，垂直间隔可能会在页面末尾的.row下面造成一些溢出。如果发生这种情况，你可以使用.overflow-hidden类在.row周围添加一个包装器。

5.3.4 水平 & 垂直间隔 g-*

g-*类可以用来控制水平间隔宽度。

5.3.5 无间隔

在我们预定义的网格类中，可以用.g-0删除列之间的间隔。这将删除.row的负边距和所有子列的水平填充。

5.4 元素左右对齐方式

5.4.1 bootstrap5

.ms-auto 元素居右对齐
.me-auto 元素居左对齐
.mx-auto 左右自动对齐
.ms-auto{margin-left:auto!important}
.me-auto{margin-right:auto!important}
.mx-auto{margin-right:auto!important;margin-left:auto!important}

5.4.2 bootstrap4

.ml-auto元素居右
.mr-auto元素居左
.ml-auto,.mx-auto{margin-left:auto!important}
.mr-auto,.mx-auto{margin-right:auto!important}

六、常见问题

6.1 如何在移动设备上缩放视口？

在构建响应式布局时，通常在 HTML 模板中包含以下内容
这可确保移动设备不会在小屏幕上重新缩放您的内容，并让您构建移动优化的布局。

<meta name="viewport" content="width=device-width, initial-scale=1" />

要在 Dash 中实现相同的功能，请在Dash构造函数中使用meta_tags关键字参数。

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"},
    ],
)

6.2 如何使Popover更宽？

Bootstrap在.popover CSS 类中设置弹出框的max-width。您可以通过使用 Bootstrap CSS 的本地副本并编辑文件来覆盖它，或者通过将如下所示的代码段添加到您的assets/文件夹中。

6.3 在 dash_table.DataTable 中使用 Bootstrap

请确保你的Dash版本在1.18以上。

DataTable(..., css=[{"selector": ".row", "rule": "margin: 0; display: block"}])