基础
来自 Zurb 的Foundation是一个 CSS 框架,可快速开发复杂的网站,其特点是针对 HTML 页面的设计流程采用移动优先的方式。使用 Foundation 等 CSS 框架,您可以非常快速地创建一个界面统一且美观的界面。DataTables 可以直接与 Foundation 集成,以确保它完全符合您的网站/应用程序的流程!
Foundation 提供了多种选项来设置 HTML 表格的样式。DataTables/Foundation 集成可确保您既可以使用所有这些功能,又可以使用 DataTables 对纯 HTML 表格所做的增强。
安装
为 DataTables 及其扩展包含 Foundation 集成的最简单方法是使用DataTables 下载构建器。这是一个点击式界面,可让您选择要使用的样式和软件。
下载构建器提供了以下选项:将所需文件托管在 DataTables CDN 上、下载您可以在本地托管的包,或使用 NPM 等包管理器。
手动安装
如果您希望使用 DataTables Git 代码库或下载包,而不是下载构建器,则 DataTables 及其所有扩展都使用相似的文件命名约定来包含所需文件。
DataTables
DataTables 主文件名为dataTables.js
。DataTables 支持的各种样式库还有一个样式集成文件,其格式为dataTables.{style}.js
(例如,Foundation 为dataTables.foundation.js
)。
这两个 Javascript 文件都应包含在内 - 主文件包含基本 DataTables 功能,而样式文件则根据样式库的需要设置默认值。
对于 CSS,只应包含一个文件,因为样式库将为表格提供核心样式选项。CSS 文件的格式为dataTables.{style}.css
(例如,Foundation 为dataTables.foundation.css
)。
扩展
上述文件命名约定也适用于扩展。
对于 Javascript,我们有:dataTables.{extension}.js
和{extension}.{style}.js
- 例如,对于Buttons,要包含的文件是dataTables.buttons.js
和buttons.foundation.js
- 再次包含核心库并样式文件以设置适当的默认值。
在 CSS 的情况下,只应包含一个文件 - 适合所用样式的相应文件 - 例如{extension}.{style}.css
- buttons.foundation.css
。
请注意,并非所有扩展都要求 JavaScript 和/或 CSS 的样式库。如果样式库不存在于代码库或包中,则不需要它们。
详细信息
如果您有兴趣了解 DataTables 文件命名约定的详细技术内容,请阅读本技术注释。
示例
以下是经 Foundation 美化的 DataTable 示例。