<!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 代码有以下几个优点
- 平台无关性：您可以在任何设备上运行您的代码，无需考虑操作系统。
- 便捷性：您不需要安装任何东西来使用它。
- 无需设置：您无需进行任何额外的设置来运行您的代码。
- 最新版本：我们的在线编译器/编辑器/终端都是最新的。
