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オンラインエディターの使い方？

3つの簡単なステップ

左側のコードエディターで、Bootstrapコードを記述または貼り付けます。
「実行」ボタンをクリックして、Bootstrapコードを実行します。
出力は右側の結果領域に表示されます。

Bootstrapオンラインエディターとは

Bootstrapオンラインエディターを使用すると、Webサーバーを必要とせずにBootstrapコードをオンラインで実行できます。テキストエディターを使用してコンピューター上で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オンラインエディターまたはテスター
キーワード提案の自動補完。
複数のデザインテーマを提供。