Bulma

Bulma 是一种新兴的 CSS 框架,并且迅速获得普及。DataTables 提供与 Bulma 的完全集成,以便您的 DataTables 与网站中的其他位置保持相同的外观和感觉。

Bulma 为 HTML 表格提供 时尚集成,它能使您灵活处理表格,同时确保它们的外观非常精巧。DataTables/Bulma 集成确保您可以使用所有这些功能以及 DataTables 对纯 HTML 表格所做的增强。

安装

包括 DataTables 及其扩展的 Bulma 集成的最简单方法是使用 DataTables 下载构建器。这是一个通过单击界面让您选择所需的样式和想要使用的软件的功能。

下载构建器可以选择将所需文件托管在 DataTables CDN 上或者下载可本地托管的包。

手动安装

如果您希望使用 DataTables Git 回购或下载包,而不是 下载构建器,则 DataTables 及其所有扩展共享可用于包括所需文件的类似文件命名约定。

数据表格

DataTables 主文件名为 dataTables.js。此外,还为 DataTables 支持的各种样式工具库提供一个样式集成文件,其格式为 dataTables.{style}.js(比如,Bulma 为 dataTables.bulma.js)。

这两个 JavaScript 文件都应包含在内,主要文件包含基本 DataTables 功能,样式文件设置适合于样式工具库的默认值。

对于 CSS,应仅包含一个文件,因为样式工具库会提供表格的核心样式选项。CSS 文件的格式为 dataTables.{style}.css(比如,Bulma 为 dataTables.bulma.css)。

扩展

上述文件命名约定也适用于 扩展

对于 JavaScript,我们有:dataTables.{extension}.js{extension}.{style}.js - 例如,对于 按钮,要包括的文件为 dataTables.buttons.jsbuttons.bulma.js - 再一次,包括核心库和设置适当默认值的样式文件。

对于 CSS,应仅包含一个文件,也就是正在使用的样式的适当文件 - {extension}.{style}.css - 比如 buttons.bulma.css

请注意,并非所有扩展都需要样式工具库中的 JavaScript 和/或 CSS。如果回购或包中不存在样式工具库,则不需要它们。

详细信息

如果您有兴趣了解 DataTables 文件命名约定的技术细节,请参阅此技术说明

示例

用 Bulma 设置样式的 DataTable 的示例在此处提供