基础

来自 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 示例。

在新窗口中查看示例。

Comments (0)