纯Python也可以做Web网页应用，在上一篇文章中介绍了Dash的一些开源组件库，做Web网页，我认为应该先从布局开始，只有将布局搞清楚了，接下来对各种组件的运用才能如鱼得水。在Dash的众多开源组件库中，我更推荐使用Dash Bootstrap Components做布局，Bootstrap相信大家都不陌生，它是目前最受欢迎的前端框架，基于HTML、CSS、JAVASCRIPT的。
很多时候，即使我们只做某一个方面的开发，比如：Python后端开发、Python算法开发等，但有很多东西都是需要展现的，简单了解下前端开发还是有必要的，如果因此还能做一些简单的页面，那就更好了。如果之前没做过网页开发，但是熟悉Python，那么通过对Dash Bootstrap Components的了解，相信你能够快速上手，毕竟Python封装的库相对都很简单、易用，至于性能问题，还不是当前阶段的我们该考虑的问题，况且Dash给我们提供了很多提升性能的方案，这部分我们后续再介绍。
这篇文章主要介绍Dash Bootstrap Components组件中的布局部分：
控件的安装：pip install dash-bootstrap-components
Dash Bootstrap Layout用于布局Dash应用程序的组件, 包括包装容器和一个功能强大、响应迅速的网格系统。
Bootstrap中的布局是使用网格系统控制的。Bootstrap网格有12列和6个响应层(允许您在不同的屏幕尺寸上指定不同的行为)。列的宽度可以根据它应该跨越12个网格列中的多少来指定, 也可以允许列扩展或缩小以适应它们的内容或行中的可用空间。
在dash-bootstrap-components中有三个主要的布局组件: Container、Row和Col。
- Container可以用于居中和水平填充应用程序的内容。
- Row是列的包装器。你的应用的布局应该构建为一系列的行和列。
- Col应该始终作为Row的直接子组件使用, 它是内容的包装器, 确保它占用了正确的水平空间。
为了获得最好的效果，在构建布局时要确保遵循以下两条规则:
- 只在Container内使用Row和Col, 用一个Container包装整个应用程序的内容就可以了, 如果不希望使用默认情况下Container添加的边距, 则设置fluid=True。
- 任何Row组件的直接子组件都应该是Col组件。内容应该放在Col组件中。
下面我们来使用代码来体验一下Dash的布局如何编写：
from dash import Dash, html
import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets=[dbc.themes.MATERIA, dbc.icons.FONT_AWESOME])
app.layout = html.Div(
[
dbc.Container(
[
dbc.Row(dbc.Col('第一行的布局'), style={'background-color': 'lightgreen'}),
dbc.Row(
[
dbc.Col('第二行第一列的布局', width=6, style={'background-color': 'lightblue'}),
dbc.Col('第二行第二列的布局', width=6, style={'background-color': 'lightskyblue'}),
],
),
dbc.Row(
[
dbc.Col('第三行第一列的布局', width=2, style={'background-color': 'HotPink'}),
dbc.Col('第三行第二列的布局', width=3, style={'background-color': 'IndianRed'}),
dbc.Col('第三行第三列的布局', width=7, style={'background-color': 'MistyRose'}),
],
),
dbc.Row(
[
dbc.Col('第四行第一列的布局', width=2, style={'background-color': 'lightblue'}),
dbc.Col('第四行第二列的布局', width=10, style={'background-color': 'lightskyblue'}),
],
),
dbc.Row(
[
dbc.Col('第五行第一列的布局', width=10, style={'background-color': 'LightSteelBlue'}),
dbc.Col('第五行第二列的布局', width=2, style={'background-color': 'lightgreen'}),
],
),
],
fluid=True,
)
]
)
if __name__ == '__main__':
app.run_server(debug=True)1. Row与Col主要参数解析
dbc.Row()参数详解 | dbc.Col()参数详解 |
children：该组件的子组件，可传入list或者单个的dash组件、字符串、数字 | children |
id：此组件的ID，用于识别回调中的Dash组件。ID在应用中的所有组件中都必须是唯一的 | id |
align：设置此行列的垂直对齐方式，可选的值：'start', 'center', 'end', 'stretch' and 'baseline'. | align：设置此列内容在父行中的垂直对齐，可选的值：'start', 'center', 'end', 'stretch' and 'baseline'. |
class_name：通常与CSS一起使用，以设置具有公共属性的元素的样式 | class_name |
key：组件的唯一标识符，用于在渲染组件时提高React.js的性能 | key |
loading_state：该对象保存来自dash-renderer的加载状态 | loading_state |
style：定义将覆盖先前设置的样式的CSS样式 | style |
justify：设置此行列的水平间距和对齐方式，可选的值：'start', 'center', 'end', 'around' and 'between'. | lg：在大屏幕上指定列行为，有效的参数是布尔值，1-12范围内的整数，或者带有'offset'， 'order'， 'size'键的字典 |
md、sm：指定中等屏幕上的列行为、在小屏幕上指定列行为。 | |
width：指定列的宽度。将在xs断点处设置行为，如果指定了xs，则将覆盖该行为。有效的参数是布尔值，1-12范围内的整数，或者带有'offset'， 'order'， 'size'键的字典。 | |
xxl、xl、xs：在不同大小的屏幕上指定列行为。 |
2. 行与列的基本知识
默认情况下，列的宽度相等，并会扩展以填充可用空间。
使用width关键字参数指定每个列的所需宽度。基本的选项是:
- True时，默认的，列将展开以填充可用空间。
- "auto"，列将根据其内容的自然宽度调整大小。
- 一个整数1到12所示。列将跨越12个网格列中的这么多列。对于半宽列，设置width=6，对于三宽列，设置width=4，依此类推。
- 还可以向width传递一个值字典。字典可以有键的size、order和offset
- size接受width能理解的任何简单参数，例如True， "auto"，或整数1到12，并指定列的大小/宽度。
- order可用于对列进行重新排序。它接受整数1到5，或者字符串“first”和“last”。然后将按数字顺序排列列，指定为“first”或“last”的列分别放置在最前面和最后面。如果两个列的顺序相同，它们将保持在源代码中指定的顺序。
- offset接受整数1到12，并将列的左距增加相应数量的网格列。
为不同的屏幕尺寸指定宽度
Bootstrap的网格包括六个响应层，用于构建复杂的响应布局。使用xs, sm, md, lg, xl和xxl关键字参数自定义从超大到超大的设备上列的大小、顺序和偏移量。每个都采用与width相同的参数，并为该屏幕大小或更大的屏幕指定列行为。Width秘密地设置了xs。如果同时指定两者，xs将覆盖width。
通过为不同的响应层设置不同的大小、顺序和偏移量，可以构建非常复杂的布局，而不需要编写自己的CSS或内联样式。
Row without 'gutters'
默认情况下，在列之间添加水平间距。使用Bootstrap的排水沟修改器类来调整这个。
垂直对齐
使用align关键字控制行中每列的垂直对齐。可以在Col组件或其父Row中为align指定一个值。如果您在Col中为align指定了一个值，它将覆盖父Row中指定的任何值。可用的选项是"start"， "center"， "end"，它们分别沿着行的顶部、中间和底部对齐列。
水平对齐
还可以使用Row的justify关键字参数控制列的水平对齐。选项有"start"， "center"， "end"， "between"和"around"。
只使用网格组件
有时你可能希望使用Bootstrap的网格系统来指定应用程序的布局，但你不希望Bootstrap对排版进行更改，或加载Bootstrap指定的所有额外的CSS类。在这种情况下，您可以使用themes模块仅链接网格系统所需的CSS。