在線編輯器

在線編輯器說明。

本頁目錄

本頁介紹如何使用我們的在線編輯器。

在線編輯器適用於處理每一個 Issue 和 Pull Request！

如何登錄

登錄操作非常簡單，只需點擊右上角的 Sign in with GitHub 按鈕，通過 GitHub 賬號登錄即可。

基本功能與頁面結構

我們的在線編輯器用於為 Bootstrap Table 創建簡單的示例與演示。

頁面結構如下：

頂部導航欄

頂部導航欄包含 5 個按鈕：

Run：運行按鈕會展示你當前編寫的示例效果。
Save：保存按鈕會保存當前示例。保存後，URL 將變為類似 https://live.bootstrap-table.com/code/<username>/<ID> 的形式。
Libraries：打開配置頁面，你可以在這裡配置示例的運行環境：
- Bootstrap Table source：選擇示例使用的版本來源（CDN 或 GitHub 源碼）。選擇 From GitHub src 時，可以指定用於示例的分支；處理 Issue 時，通常使用 From Released CDN。
- Release CDN version：選擇 Bootstrap Table 的版本，以便為舊版本創建示例。
- Theme：可在支持的主題之間切換，例如用於展示某個主題下的問題。
- Extensions：若示例需要演示某個擴展功能，可以在此直接勾選，無需手動引入相關資源！
Load Examples：打開頁面以加載現有示例（與我們的示例頁面內容一致）。
Links：最後一個按鈕提供了一些相關鏈接，例如官方網站、GitHub 倉庫頁面等。

左側區域

左側區域用於編寫示例代碼，可包含 HTML、CSS 和 JavaScript（CSS 與 JavaScript 代碼需使用 <style></style> 或 <script></script> 標簽包裹）。

基礎模板如下：

<!-- 引入自定義 css 與 js 文件 -->
<link rel="stylesheet" href="https://example.com/custom.css">
<script src="https://example.com/custom.js"></script>

<!-- 自定義樣式 -->
<style>
</style>

<!-- 無需書寫 <html> 與 <body> 標簽 -->
<table id="table">
</table>

<script>
  $(function () {
    $('#table').bootstrapTable()
  })
</script>

注意：必須將初始化函數寫在 $(function () {}) 中，以確保 jQuery 與 Bootstrap Table 均已完成加載。

右側區域

右側區域用於查看示例的運行效果（需先點擊 Run 按鈕執行代碼）。

你也可以點擊 Result (Fullscreen) 按鈕，切換至示例的全屏顯示模式。

Issue 工作流程

每個 Issue 都應包含一個通過在線編輯器創建的示例，用於重現問題。

操作步驟如下：

打開在線編輯器；
進入 Libraries 頁面，配置示例的運行環境（包括版本、主題和擴展等）；
編寫示例代碼（或從本地項目復制相關代碼）；
檢查示例是否能准確重現你的問題；
點擊 Save 按鈕保存示例，然後復制生成的 URL；
創建 Issue 時，附上該示例的鏈接。

（你也可以使用 Load Examples 按鈕加載現有示例，以替代上述步驟 2 和 3。）

Pull Request 工作流程

PR（Pull Request）的操作流程與 Issue 類似。

唯一的區別是，你需要選擇自己的分支（編輯器會使用該分支的代碼生成示例）。具體操作如下：

打開 Libraries 頁面；
在 Bootstrap Table source 選項中選擇 From GitHub src；
在 GitHub src branch 輸入框中填寫分支名稱，分支名稱的格式為 <username>:<branch>；
你也可以直接在 Pull Request 頁面復制該字符串。