Bootstrap 4

Bootstrap 4 是一個 CSS 框架，可讓您快速輕鬆地建構具有統一外觀和風格的使用者介面。 DataTables 提供與 Bootstrap 4 的完整整合，讓您的 DataTables 與網站其餘部分具有相同的外觀和風格。

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

安裝

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

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

手動安裝

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

DataTables

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

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

對於 CSS，只需包含單一檔案，因為樣式函式庫將為表格提供核心樣式選項。 CSS 檔案的格式為 dataTables.{style}.css（例如，Bootstrap 4 為 dataTables.bootstrap4.css）。

擴充功能

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

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

在 CSS 的情況下，只需包含單一檔案 - 適用於所用樣式的檔案 - {extension}.{style}.css - 例如 buttons.bootstrap4.css。

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

詳細資訊

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

範例

此處提供使用 Bootstrap 設定樣式的 DataTable 範例。