Bootstrap在线编辑器

Code
Result

Bootstrap CDN 网站

您可以使用以下 Bootstrap cdn 替换代码中的 Bootstrap 版本:

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

如何使用 Bootstrap 在线编辑器?

三个简单步骤
  1. 在左侧代码编辑器中,编写或粘贴您的Bootstrap代码。
  2. 单击“运行”按钮运行您的Bootstrap代码。
  3. 输出将显示在右侧结果区域中。

什么是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 在线编辑器的功能

  1. 简单方便的 Bootstrap 在线编辑器或测试器
  2. 关键字建议自动完成。
  3. 提供多种设计主题。