python - Dash 使用本地引导样式表更改行为
问题描述
我已经从bootswatch下载了一个引导主题 css 样式表,并将其放在我的应用程序的 assets 文件夹中。该应用程序能够找到样式表,因为当我对样式表进行细微更改(例如增加字体大小)时,这会显示在我的应用程序中。
现在我发现在更改为本地样式表后,并非引导主题的所有部分都可以正常工作:
- 当我使用同一主题的外部样式表时,复选框菜单似乎与以前显示的不同
- CardDecks 现在可以垂直显示而不是水平显示
我错过了引导布局的一部分吗?我使用的样式表是从这里复制的。
解决方案
我认为问题不在于您包含样式的方式,而在于样式本身(不同版本)。
似乎与您链接的Bootswatch v5.0.1
样式表和一些破折号引导组件(平坦)样式不兼容。
让我们看看 dash bootstrap 组件可用的样式:
import dash_bootstrap_components as dbc
# Find themes available through dash_bootstrap_components
print(dir(dbc.themes)) # ['BOOTSTRAP', 'CERULEAN', 'COSMO', 'CYBORG', 'DARKLY', 'FLATLY', 'GRID', 'JOURNAL', 'LITERA', 'LUMEN', 'LUX', 'MATERIA', 'MINTY', 'PULSE', 'SANDSTONE', 'SIMPLEX', 'SKETCHY', 'SLATE', 'SOLAR', 'SPACELAB', 'SUPERHERO', 'UNITED', 'YETI', '_BOOTSWATCH_BASE', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__spec__']
# Find FLATLY theme url
print(dbc.themes.FLATLY) # https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/flatly/bootstrap.min.css
app = Dash(__name__, external_stylesheets=[dbc.themes.FLATLY])
所以 dash bootstrap components 版本0.12.0
适用于 bootswatch flatly 版本4.5.2
(还有其他最有可能的版本,但我只测试了这些版本)。
我比较了5.0.1
和4.5.2
样式之间的差异,发现5.0.1
版本没有任何.card-deck
样式,但4.5.2
版本有,这说明CardDeck
组件看起来不正确。
我建议您只使用dbc.themes.FLATLY
主题来确保与引导仪表板组件的兼容性,并根据需要添加额外的样式。
重申问题不是由在assets
目录中使用本地样式表而不是external_stylesheets
. 这两种方法都有效。选择您喜欢的任何方法。