Bootstrap 3

Bootstrap 3 是一個 CSS 框架，可讓您快速且輕鬆地建構具有統一外觀和風格的使用者介面。整合 Bootstrap 和 DataTables 非常容易，讓您功能齊全的 DataTables 可以與網站的其他部分具有相同的外觀和風格。

Bootstrap 3 提供了 多種選項 來設定 HTML 表格的樣式，讓您可以彈性地控制表格，同時確保它們看起來非常時尚。DataTables / Bootstrap 整合可確保您可以使用所有這些功能以及 DataTables 對純 HTML 表格所做的增強。

安裝

包含 DataTables 及其擴充功能的 Bootstrap 整合的最簡單方法是使用 DataTables 下載產生器。這是一個點擊式的介面，可讓您選擇要使用的樣式和軟體。

下載產生器可以選擇將所需檔案託管在 DataTables CDN 上、下載您可以在本機託管的套件，或使用 NPM 等套件管理器。

手動安裝

如果您希望使用 DataTables Git 儲存庫 或下載套件，而不是 下載產生器，DataTables 及其所有擴充功能都共用類似的檔案命名慣例，可用於包含所需的檔案。

DataTables

主要的 DataTables 檔案名稱為 dataTables.js。還有一個用於 DataTables 支援的各種樣式函式庫的樣式整合檔案，其格式為 dataTables.{style}.js (例如，Bootstrap 為 dataTables.bootstrap.js)。

這兩個 Javascript 檔案都應包含在內 - 主要檔案用於包含基本的 DataTables 功能，而樣式檔案則用於根據樣式函式庫設定適當的預設值。

對於 CSS，僅應包含單個檔案，因為樣式函式庫將提供表格的核心樣式選項。CSS 檔案的格式為 dataTables.{style}.css (例如，Bootstrap 為 dataTables.bootstrap.css)。

擴充功能

上述的檔案命名慣例也適用於擴充功能。

對於 Javascript，我們有：dataTables.{extension}.js 和 {extension}.{style}.js - 例如，對於 Buttons，要包含的檔案是 dataTables.buttons.js 和 buttons.bootstrap.js - 再次包含核心函式庫和樣式檔案以設定適當的預設值。

在 CSS 的情況下，僅應包含單個檔案 - 適用於所使用樣式的檔案 - {extension}.{style}.css - 例如 buttons.bootstrap.css。

請注意，並非所有擴充功能都需要 Javascript 和/或 CSS 來設定樣式函式庫。如果儲存庫或套件中不存在樣式函式庫，則不需要它們。

詳細資訊

如果您對 DataTables 檔案命名慣例的詳細資訊感興趣，請參閱 這則技術筆記。

範例

一個由 Bootstrap 3 設定樣式的 DataTable 範例 在此處提供。