DOM 元素样式设置#

Bokeh 提供了几种不同的机制，用于在输出中包含 CSS 样式。

样式#

Styles 类可用于直接配置 DOM 元素的内联样式属性

style = Styles(
    display="grid",
    grid_template_columns="auto auto",
    column_gap="10px",
)
grid = Div(style=style)

样式表#

也可以在生成的输出中定义和包含样式表。 Bokeh 提供了几种不同的变体，可用于将 CSS 规则应用于 Bokeh 输出中的 DOM 对象

内联样式表

内联样式表等效于 <style type="text/css">${css}</style>。
导入样式表

导入样式表等效于 <link rel="stylesheet" href="${url}">。
全局内联样式表

类似于内联样式表，但附加到 <head> 元素。
全局导入样式表

类似于导入样式表，但附加到 <head> 元素。

全局变体仅附加到 <head> 一次，以便可以在各种 UI 组件之间高效地共享相同的样式表模型。

例如

from bokeh.models import InlineStyleSheet, Slider

stylesheet = InlineStyleSheet(css=".bk-slider-title { background-color: lightgray; }")

slider = Slider(value=10, start=0, end=100, step=0.5, stylesheets=[stylesheet])