先安装 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, StatePLOTLY_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 / branddbc.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_openreturn is_open

效果图：

欢迎关注我的知乎专栏【数据池塘】，专注于分享机器学习、数据挖掘相关内容：https://zhuanlan.zhihu.com/datapool

⬇️ 扫描下方二维码关注公众号【数据池塘】 ⬇️

回复【算法】，获取最全面的机器学习算法网络图：

用 dash_bootstrap_components 为 dash 生成美观的导航栏相关推荐

如何使用HTML制作一个简单美观的导航栏（代码详解）
在不久前学习了基础知识(并很快忘记了它们)后,几个月前我开始阅读它.我已经开始制作自己的网页以测试和提高我的技能,但是我在让导航栏正确显示时遇到了问题. 我的导航栏的 HTML 代码如下: Home ...
网页导航栏的设计原则和注意事项
在网页制作中,导航栏是一个非常重要的部分,它们通常位于网站的顶部或底部,用于引导用户到达不同的页面或功能.导航栏通常包括一个标题.一些链接和一些图标,用于帮助用户快速找到他们需要的内容.对于一个网站来 ...
html页面间的跳转及导航栏制作
html页面间的跳转及导航栏制作 html页面间的跳转及导航栏制作技术:通过链接进行页面跳转,通过按钮进行页面跳转页面跳转演示: 通过链接进行页面跳转 html超链接另一个html页面的方法:在一个 ...
快应用底部导航栏的原生实现
什么是快应用快应用是一种不需要安装即可使用,类似于原生APP的新型应用形态,它是由手机厂商联合推出的一款产品.它不依赖于App,而是依赖于各大手机厂商自带的快应用加载器,使用极其方便. 快应用的官方 ...
JavaScript自动生成博文目录导航/TOP按钮
博客园页面添加返回顶部TOP按钮进入网页管理->设置在"页面定制CSS代码"中添加如下css样式,当然你可以改为自己喜欢的样式此处可以将背景色background-co ...
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航原文:MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航上篇文章我们完成了动态生成多级菜单这个实用组件. 本篇 ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
JavaScript自动生成博文目录导航
http://www.cnblogs.com/xdp-gacl/p/3718879.html 为博客园添加目录的配置总结 http://www.cnblogs.com/jiangz/p/3734968 ...
[转]JavaScript自动生成博文目录导航
转自:http://www.cnblogs.com/xdp-gacl/p/3718879.html 我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲 ...

用 dash_bootstrap_components 为 dash 生成美观的导航栏

欢迎关注我的知乎专栏【数据池塘】，专注于分享机器学习、数据挖掘相关内容：https://zhuanlan.zhihu.com/datapool

⬇️ 扫描下方二维码关注公众号【数据池塘】 ⬇️

用 dash_bootstrap_components 为 dash 生成美观的导航栏相关推荐

最新文章

热门文章