先安装 pip 包:
pip install dash-bootstrap-components
把 bootstrap 的 sheetstyle 加入你的 app 中:
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
生成 navbar:
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
search_bar = dbc.Row(
[
dbc.Col(dbc.Input(type="search", placeholder="Search")),
dbc.Col(
dbc.Button("Search", color="primary", className="ml-2"),
width="auto",
),
],
no_gutters=True,
className="ml-auto flex-nowrap mt-3 mt-md-0",
align="center",
)
navbar = dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
],
align="center",
no_gutters=True,
),
href="https://plot.ly",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
],
color="dark",
dark=True,
)
# add callback for toggling the collapse on small screens
@app.callback(
Output("navbar-collapse", "is_open"),
[Input("navbar-toggler", "n_clicks")],
[State("navbar-collapse", "is_open")],
)
def toggle_navbar_collapse(n, is_open):
if n:
return not is_open
return is_open
效果图:
欢迎关注我的知乎专栏【数据池塘】,专注于分享机器学习、数据挖掘相关内容:https://zhuanlan.zhihu.com/datapool
⬇️ 扫描下方二维码关注公众号【数据池塘】 ⬇️
回复【算法】,获取最全面的机器学习算法网络图: