Bootstrap線上編輯器

Code

Result

Bootstrap CDN 網站

您可以使用以下 Bootstrap cdn 取代程式碼中的 Bootstrap 版本：

https://cdn.bytedance.com/?query=bootstrap&version=5.1.2
https://www.bootcdn.cn/twitter-bootstrap/

如何使用 Bootstrap 線上編輯器？

三個簡單步驟

在左側程式碼編輯器中，編寫或貼上您的Bootstrap程式碼。
按一下「執行」按鈕執行您的Bootstrap程式碼。
輸出將顯示在右側結果區域中。

什麼是Bootstrap線上編輯器

Bootstrap線上編輯器允許您的Bootstrap程式碼線上執行而無需Web伺服器，您無需使用文字編輯器在電腦上編輯Bootstrap檔案。

這樣，您可以快速輕鬆地看到Bootstrap執行結果，使用ace編輯器，可以識別程式碼錯誤或警告，並提供清晰且可操作的回饋，以幫助您提高程式碼的效能。您可以像這樣編寫或貼上 Bootstrap 程式碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 線上編輯器</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界</h1>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 線上編輯器的功能

簡單方便的 Bootstrap 線上編輯器或測試器
關鍵字建議自動完成。
提供多種設計主題。