<!DOCTYPE html> <html> <head> <title>Bootstrap 線上編輯器</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 標籤頁示例</h2> <p>.nav-tabs 類用於建立導航標籤:</p> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">主頁</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Python</a></li> </ul> </div> </body> </html>
直接從瀏覽器中嘗試此線上 Bootstrap 編輯器（版本 Bootstrap (3.3.1)）來線上編輯、執行和分享 Bootstrap 程式碼。此線上編譯器能讓你使用最新版本的 Bootstrap (3.3.1) 輕鬆編輯和編譯 Bootstrap 程式碼。
如何使用線上 Bootstrap 編輯器？
編寫並執行程式碼
- 在“原始碼”標籤下直接編寫你的程式（或貼上）。
- 如果你想儲存你的程式，請轉到“專案”選單並儲存它。
- 你可以直接執行你的程式無需儲存，只需點選“執行”按鈕。
如何輸入使用者輸入？
最新版本的線上 Bootstrap 編輯器允許在執行時從終端視窗提供程式輸入，這與你在自己計算機上執行程式的方式完全相同。因此，只需執行程式，並從右側可用的終端視窗提供程式輸入（如果有）。
鍵盤快捷鍵
以下是我們編輯器的關鍵字快捷鍵
| 快捷鍵 | 說明 |
|---|
| ⌘ + Enter | 執行程式 |
| ⌘ + S | 儲存專案（需要登入） |
| ⇧ + ⌘ + S | 另存為專案 |
| ⌘ + P | 新建專案 |
| ⌘ + G | 分享專案 |
| ⌘ + Z | 撤消編輯 |
| ⌘ + Y | 重做編輯 |
| ⌘ + A | 全選文字 |
| ⌘ + X | 剪下選中文字 |
| ⌘ + C | 複製選中文字 |
| ⌘ + V | 貼上已複製的文字 |
| ⌘ + F | 查詢文字 |
| ⌘ + ⌥ + F | 替換文字 |
| 快捷鍵 | 說明 |
|---|
| Ctrl + Enter | 執行程式 |
| Ctrl + S | 儲存專案 |
| Shift + Ctrl + S | 另存為專案 |
| Ctrl + G | 分享專案 |
| Ctrl + Z | 撤消編輯 |
| Ctrl + Y | 重做編輯 |
| Ctrl + A | 全選文字 |
| Ctrl + X | 剪下選中文字 |
| Ctrl + C | 複製選中文字 |
| Ctrl + V | 貼上已複製的文字 |
| Ctrl + F | 查詢文字 |
| Ctrl + H | 替換文字 |
儲存並分享專案程式碼
線上儲存 Bootstrap 專案
您可以將 Bootstrap 專案儲存在我們的伺服器上，這樣以後您可以訪問這個專案。要儲存專案，您需要建立一個登入 ID。因此，在您儲存專案之前，請使用此頁面右上角提供的連結建立一個登入 ID。
線上分享 Bootstrap 專案
您可以使用此功能與您的老師、同學和同事分享您的 Bootstrap 程式碼。只需單擊 分享 按鈕，它將會建立一個短連結，可以透過電子郵件、微信甚至社交媒體進行分享。如果一個分享連結三個月沒有被訪問過，那它將會被刪除。
編輯器的更多功能
- 主題 – 您可以在“設定”選單的“編輯器主題”選項中更改當前編輯器的主題。
- 字型大小 – 您可以在“設定”選單的“字型大小”選項中更改編輯器/編譯器的字型大小。
- 製表符大小 – 您可以在“設定”選單的“製表符大小”選項中更改制表符大小。
- 顯示/隱藏行號 – 您可以使用“設定”選單的“顯示行號”或“隱藏行號”選項顯示/隱藏程式碼中的行號。
- 還有更多。
為什麼使用線上 Bootstrap 編輯器？
使用線上 Bootstrap 編輯器執行您的 Bootstrap 程式碼有以下幾個優點
- 平臺無關性：您可以在任何裝置上執行您的程式碼，無需考慮作業系統。
- 便捷性：您不需要安裝任何東西來使用它。
- 無需設定：您無需進行任何額外的設定來執行您的程式碼。
- 最新版本：我們的線上編譯器/編輯器/終端都是最新的。
