（数据科学学习⼿札103）Python+Dash快速web应⽤开发——
页⾯布局篇
本⽂⽰例代码已上传⾄我的Github仓库
由我开源的先进Dash组件库feffery-antd-components正处于早期测试版本阶段，欢迎前往官⽹h/了解更多
1 简介
  这是我的系列教程Python+Dash快速web应⽤开发的第⼆期，在上⼀期中，我带领⼤家认识了什么是Dash，Dash可以做什么，以
及Dash中最基本的⼀些概念，⽽今天开始，我将开始带领⼤家正式学习有关Dash的实⽤知识，以及各种奇淫巧技 ~
图1
  今天的⽂章，我将带⼤家学习Dash中页⾯布局的先进⽅法，通过今天的⽂章，你将学会以⾮常简单的⽅式实现现代化的页⾯布局，下⾯让我们开始吧~
2 为Dash应⽤设计页⾯布局
  我们都知道，⼀个好的⽹页设计通常都需要编写css甚⾄js来定制前端内容，譬如⾮常流⾏的bootstra
p框架。
图2
  但我们既然想使⽤Dash来搭建web应⽤，很⼤的⼀个原因是不熟悉或者不想写繁琐的前端代码，⽽Dash的第三⽅拓展库中就有这么⼀
个Python库——dash-bootstrap-components，借助它，我们就可以纯Python编程调⽤到bootstrap框架中的诸多特性来让我们的web应⽤页⾯更美观。
  ⾸先需要通过pip install dash-bootstrap-components来安装它，安装完成之后，我们来验证⼀下是否可以正常使⽤，推荐以import
dash_bootstrap_components as dbc的⽅式导⼊：
app1.py
  执⾏后打开所提⽰的⽹址，看到下列信息就说明安装成功：
图3
  这⾥我们使⽤到dash.Dash()中的参数external_stylesheets ，⽤于引⼊外部的css ⽂件，有了这些补充进来的css ，我们才得以实现更多彩的样式，⽽除了上述填⼊url 的⽅式之外，我更推荐的⽅式是在我们的Dash 应⽤.py ⽂件同级⽬录创建⽂件夹assets ，放在这个⽬录中的⽂件会被Dash ⾃动扫描到，也就⽆需填⼊external_stylesheets 参数啦：
app2.py
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(
__name__,
# 从国内可顺畅访问的cdn 获取所需的原⽣bootstrap 对应css
external_stylesheets=['/twitter-bootstrap/4.5.2/css/bootstrap.min.css']
)
app.layout = dbc.Alert(
"你好，dash_bootstrap_components ！", color='success'
)
if __name__ == "__main__":
app.run_server()
import dash
import dash_bootstrap_components as dbc
图4
  这时在Dash 页⾯抓包可以看到对应bootstrap.min.css 的url
信息指向域名下的对应⽬录：
图5
  这种⽅式最稳妥，不受⽹络波动影响，推荐⼤家养成好习惯。
  在测试完dash-bootstrap-components 的可⽤性之后，接下来我们就开始学习构造页⾯布局。
app = dash.Dash(__name__)
app.layout = dbc.Alert(
"你好，dash_bootstrap_components ！", color='success'
)
if __name__ == "__main__":
app.run_server()
2.1 认识Container()、Row()与Col()
Container()
  dash-bootstrap-components封装了bootstrap框架中的⽹格系统，我们在使⽤它进⾏布局时，⾸先要了解的是组件Container()，它是我们组织页⾯元素的容器，其参数fluid默认为False，会以两边填充空⽩区域的⽅式居中其内部嵌套的⼦元素：
app3.py
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(
[
# fluid默认为False
dbc.Container(
[
dcc.Dropdown(),
'测试',
html网页设计教程(推荐)dcc.Dropdown()
]
),
html.Hr(), # ⽔平分割线
# fluid设置为True
dbc.Container(
[
dcc.Dropdown(),
'测试',
dcc.Dropdown()
],
fluid=True
)
]
)
if __name__ == "__main__":
app.run_server()
图6
  可以看到，第⼀个Container()部分呈现出两边空⽩填充中间居中的形式，⽽第⼆个则充满了整个⽔平⽅向。
Row()与Col()
  在上⾯所介绍的Container()之内，我们就可以按照bootstrap的⽹格系统进⾏内容的排布：⾏嵌套列，再向列内嵌套各种部件。
  ⽽所谓的⽹格系统指的是每个Row()部件内部分成宽度相等的12份，传⼊的Col()部件具有参数width可以传⼊整数来分配对应数量的宽度，如下例：
app4.py
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(__name__)
app.layout = dbc.Container(
[
dbc.Row(dbc.Col('第⼀⾏'),
style={
'background-color': 'lightgreen'
}),
dbc.Row(
[
dbc.Col('第⼆⾏第⼀列', width=6, style={'background-color': 'lightblue'}),

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。