快速入门
本指南涵盖了Bubble的所有功能：
- 入门 — Create your account and open the Bubble editor
- 如何使用可自定义设计 — Place visual elements on the canvas and shape your UI
- 如何使用内置数据库 — Structure app data with custom data types and fields
- 如何使用逻辑和工作流 — Create logic that triggers actions in response to events
- 如何使用高级人工智能 — Add Bubble AI features without wiring up outside services
- 如何使用版本控制 — Test new features safely without touching the live app
- 如何使用安全仪表盘 — Set privacy rules and watch for suspicious user activity
- 如何使用AI应用生成器 — Turn a plain-text idea into a working first app
- 如何使用模板 — Start building from a ready layout instead of a blank page
- 如何使用原生移动应用构建器 — Deliver web, iOS, and Android apps from one editor
所需时间： 每部影片 5 分钟
本指南还包含以下内容： 专业提示 | 常见错误 | 故障排除 | 定价 | 替代方案
为什么信任本指南
I’ve used Bubble for two years and tested every feature covered here.
This tutorial comes from real hands-on experience, not vendor screenshots.
Bubble is one of the most powerful no-code platforms in the world today.
Most people search for how to use Bubble io and land on scattered videos.
You can code apps by hand, or you can ship no-code apps in a browser.
本指南将向您展示如何使用所有主要功能。
一步一步教你，附带截图和专业技巧。
You’ll learn how to build a working app, not just read theory.
The Bubble editor opens limitless possibilities once you understand workflows.
泡泡教程
This complete Bubble tutorial walks you through every feature, from your first app to the tips that turn beginners into power users.
气泡
Build scalable apps without writing a single line of code. Bubble gives you a visual editor, a real database, and workflows in one platform. Start free — no credit card required.
Bubble入门指南
使用任何功能之前，请先完成此一次性设置。
大约需要3分钟。
Watch this quick introduction first:
现在让我们一步一步来。
第一步：创建您的帐户
Go to Bubble’s website and click “Get started for free.”
请输入您的电子邮件地址并创建密码。
Read the terms, accept them, and agree to the privacy policy.
✓ 检查点： 检查你的 收件箱 请发送确认邮件。
Step 2: Open the Bubble Editor
Bubble runs in your browser, so there is nothing to download.
Name your first app, then pick a blank canvas to start building.
这就是编辑器的样子：
✓ 检查点： You should see the Design, Workflow, and Data tabs.
步骤 3：完成初始设置
Click the Bubble logo in the top-left corner to reach app settings.
Set your app name, time zone, and language details there.
Then open the guided walkthrough Bubble shows every new user.
✅ 完成： 您已准备好使用以下任何功能。
如何使用气泡自定义设计
可定制设计 lets you design your user interface visually, without writing code.
以下是使用步骤。
步骤 1：打开“设计”选项卡
点击 设计 in the left toolbar of the Bubble editor.
The elements panel holds containers, text, inputs, and buttons.
Step 2: Drag In Your Components
Drag components onto the page and drop them inside containers.
Group related elements first, because containers control the alignment.
这就是它的样子：
✓ 检查点： Your page shows every element exactly where you dropped it.
Step 3: Check Responsive Behaviour
Switch to responsive view and test the layout at mobile widths.
Bubble shows breakpoints, so you can hide elements on small screens.
✅ 结果： You have a clean UI that fits desktop and mobile screens.
💡 专业提示： Plan your logic before you polish the design. A logic-first mindset saves hours of rework later.
如何使用 Bubble 内置数据库
内置数据库 lets you structure app data with custom data types and fields.
以下是使用步骤。
步骤 1：打开数据选项卡
点击 数据, then create a data type such as “Project.”
Each data type behaves like a table in a normal database.
Step 2: Add Fields To Each Type
Add text, number, date, or image fields to describe your records.
Pick the field type that matches the data, not text for everything.
这就是它的样子：
✓ 检查点： Your new data type lists every field you added.
步骤 3：设置隐私规则
Add privacy rules immediately after you create each data type.
✅ 结果： Your database holds structured, protected records.
💡 专业提示： Never nest a “Do a search for” inside a repeating group. Nested searches slow every page load badly.
如何使用 Bubble Logic 和工作流
逻辑与工作流程 lets you create logic that triggers actions in response to events.
以下是使用步骤。
步骤 1：打开工作流选项卡
点击 工作流程, then choose “Click here to add an event.”
Step 2: Pick Your Trigger
Select an event, such as a user clicking your signup button.
Events also cover page loads, database changes, and scheduled runs.
这就是它的样子：
✓ 检查点： Your workflow shows the trigger with its actions beneath it.
Step 3: Add Actions In Order
Stack actions below the trigger, then reorder them by dragging.
Actions run top to bottom, so the order changes the outcome.
✅ 结果： Your app now reacts to what real users actually do.
💡 专业提示： Run Preview Mode in a real browser before you launch any workflow change. Bugs hide in the editor.
如何使用 Bubble 高级人工智能
高级人工智能 lets you add Bubble AI features to your app without outside services.
以下是使用步骤。
Step 1: Open the AI Panel
Find the AI options inside the Workflow tab action list.
第二步：描述你的需求
Write a clear prompt describing the text or image you want.
Drop dynamic data into the prompt to personalise every result.
这就是它的样子：
✓ 检查点： Your test run returns a usable AI response.
Step 3: Connect the Output
Save the AI result to a database field so your app can reuse it.
✅ 结果： Your app now delivers AI features with no external setup.
💡 专业提示： Keep prompts short and relevant. Long prompts cost more and rarely improve the output quality.
如何使用 Bubble 版本控制
版本控制 lets you test new features safely without breaking the live app.
以下是使用步骤。
Step 1: Create a Branch
Open the version menu and create a branch from your main version.
Your main version stays live while you work in the branch.
Step 2: Build and Test
Develop your new feature inside the branch, then test it there.
这就是它的样子：
✓ 检查点： Your branch name appears in the editor’s top bar.
Step 3: Merge When Ready
Merge the branch back into main, then deploy to live.
✅ 结果： You can ship changes without a single broken page for users.
💡 专业提示： Name branches after the feature, not the date. Future you will read them far more easily.
如何使用 Bubble Security 控制面板
安全仪表盘 lets you watch privacy rules and account activity in one place.
以下是使用步骤。
步骤 1：打开安全控制面板
Find it under your app settings in the Bubble editor.
Step 2: Review the Warnings
Bubble flags data types with weak or missing privacy rules.
A red warning means anyone can read that data today.
这就是它的样子：
✓ 检查点： The warning list shrinks as you fix each data type.
Step 3: Fix Each Warning
Tighten each rule so only the right user can read that data.
✅ 结果： Your app blocks spam signups and stops data leaking to strangers.
💡 专业提示： Recheck the dashboard after every launch. New fields often ship without privacy rules attached.
如何使用 Bubble AI 应用生成器
人工智能应用 发电机 lets you turn a plain-text idea into a working first app.
以下是使用步骤。
步骤 1：打开生成器
Start a new app and choose the AI option instead of blank.
步骤二：撰写详细提示
Describe your app features in natural language, screen by screen.
Name your data types in the prompt for a cleaner database.
这就是它的样子：
✓ 检查点： You see generated pages with a matching database behind them.
Step 3: Refine the Result
Open the generated app and edit pages, data, and workflows by hand.
✅ 结果： You have a blueprint instead of an empty canvas.
💡 专业提示： Treat the output as a draft. The generator handles structure well, but the details still need you.
如何使用气泡模板
模板 lets you start building from a ready layout instead of a blank page.
以下是使用步骤。
第一步：浏览市场
Open the template gallery and filter by app type or industry.
步骤 2：应用模板
Install it into a new app, then preview every page it created.
Most templates arrive with sample data you can delete safely.
这就是它的样子：
✓ 检查点： Your app opens with the template’s pages already built.
Step 3: Replace the Sample Content
Swap placeholder content, colours, and copy for your own.
✅ 结果： You skip days of layout work on your first app.
💡 专业提示： Check the template’s last update date. Old templates often use elements Bubble has since replaced.
如何使用 Bubble Native 移动应用构建器
原生移动应用构建器 lets you deliver web, iOS, and Android apps from one editor.
以下是使用步骤。
Step 1: Create a Mobile App
Add a native app to your project from the app dashboard.
Step 2: Build Mobile Screens
Design screens with mobile elements like tab bars and native inputs.
Mobile screens use their own element set, not your web layout.
这就是它的样子：
✓ 检查点： Your mobile preview runs on your own phone.
Step 3: Submit to the Stores
Set your icons and app details, then push a build to each store.
✅ 结果： One project now serves web and mobile users together.
💡 专业提示： Test on a real device 早期的. Simulators hide scrolling and keyboard problems that users hit daily.
泡泡游戏小技巧和快捷方法
After two years on this platform, here are the tips I share most often.
Bubble’s community forum answers specific questions faster than any course.
You can join it free, or buy paid coaching when you want one-to-one help.
Beginner tutorials on sites like Buildcamp cover the fundamentals in a few hours.
Small, self-contained projects build your skills faster than long videos.
Over 6,000 plugins in the marketplace enhance what a finished app can do.
Follow these practices from day one and you’ll avoid most rewrites.
Here’s the setup I use daily:
键盘快捷键
| 行动 | 捷径 |
|---|---|
| Copy an element | Ctrl + C |
| Paste with workflows | Ctrl + Shift + V |
| 撤销更改 | Ctrl + Z |
| Open app search | Ctrl + F |
大多数人错过的隐藏功能
- API 连接器： Connect to external services that no plugin covers yet.
- App Search: Locate the exact element or workflow you need during development.
- The official Bubble Manual: Step-by-step tutorials plus troubleshooting notes for common problems.
- Reusable elements: Build headers once, then share those components across every page.
避免常见的泡沫经济错误
Mistake #1: Packing Everything Into Version One
❌ 错误： Listing twenty features before you build a single page.
✅ 右图： Pick 3-4 core features for your MVP, then plan the rest as later versions.
Mistake #2: Installing Every Plugin You Find
❌ 错误： Adding ten plugins from the marketplace in one afternoon.
✅ 右图： Each plugin adds weight, so keep only essential, well-supported ones.
Mistake #3: Editing the Live App Directly
❌ 错误： Changing workflows on the live version while real users are inside.
✅ 右图： Test in a branch, then deploy once the change works.
气泡故障排除
Problem: Your Page Loads Empty in Preview
原因： A privacy rule is blocking the data from the current user.
使固定： Open the Data tab, check that data type’s rules, and allow the right user to view it.
Problem: A Workflow Never Runs
原因： A condition on the event is false, so Bubble skips it silently.
使固定： Remove the condition, test again, then add it back one piece at a time.
Problem: The App Feels Slow
原因： Nested searches and unused plugins both drag your load time down.
使固定： Flatten those searches, delete plugins you never call, and watch the error log for repeat warnings.
📌 笔记： If none of these fix your issue, contact Bubble support.
什么是泡沫？
气泡 is a no-code app builder that lets you build scalable apps without writing a single line of code.
Think of it like a design tool wired straight into a real database.
It brings your idea to life without hiring a developer.
Apps built here scale from a weekend MVP to enterprise-grade products.
观看这段快速概览：
它包含以下主要特点：
- 可定制设计： Place visual elements on the canvas and shape your UI
- 内置数据库： Structure app data with custom data types and fields
- 逻辑与工作流程： Create logic that triggers actions in response to events
- 高级人工智能： Add Bubble AI features without wiring up outside services
- 版本控制： Test new features safely without touching the live app
- 安全仪表盘： Set privacy rules and watch for suspicious user activity
- AI应用生成器： Turn a plain-text idea into a working first app
- 模板： Start building from a ready layout instead of a blank page
- 原生移动应用构建器： Deliver web, iOS, and Android apps from one editor
如需完整评测，请参阅我们的 泡泡评论.
泡沫定价
以下是《泡沫》在 2026 年的成本：
| 计划 | 价格 | 最适合 |
|---|---|---|
| 自由的 | 每月 0 美元 | Learning the editor |
| 起动机 | 每月 29 美元 | Your first live app |
| 生长 | 每月 119 美元 | Apps with paying users |
| 团队 | 每月 349 美元 | 多种的 编辑 working together |
| 风俗 | 接触气泡 | 企业工作负载 |
免费试用： Yes — the Free plan never expires, so you can learn without paying.
退款保证： Bubble offers refunds within 14 days on new paid plans.
💰 性价比最高： Starter — it removes the Bubble branding and lets you launch on your own domain.
泡沫与替代方案
Bubble 与其他同类产品相比如何？以下是竞争格局：
| 工具 | 最适合 | 价格 | 等级 |
|---|---|---|---|
| 气泡 | Full custom apps | 每月 29 美元 | ⭐ 4.3 |
| 更柔和 | Client portals | 每月 59 美元 | ⭐ 4.5 |
| 嗡嗡 | Figma to app | 每月 19 美元 | ⭐ 4.1 |
| 滑行 | 电子表格应用程序 | 每月 49 美元 | ⭐ 4.4 |
| Softgen | AI-built web apps | 每月 20 美元 | ⭐ 4.0 |
| 阿达洛 | 原生移动应用 | 每月 45 美元 | ⭐ 4.2 |
| 可爱的人工智能 | Prompt-to-code apps | 每月 25 美元 | ⭐ 4.4 |
| 涌现 | Agent-driven builds | 每月 20 美元 | ⭐ 4.0 |
快速精选：
- 综合最佳： Bubble — the deepest control over data, design, and workflows
- 最佳预算： Buzzy — the lowest entry price for a working prototype
- 最适合初学者： Glide — you can build from a spreadsheet in one sitting
- 最适合移动设备： Adalo — native screens without a separate mobile project
🎯 泡泡替代品
想找泡泡游戏的替代品吗？以下是一些最佳选择：
- 🚀 更柔和： Builds portals and internal tools on top of Airtable in an afternoon.
- 💰 嗡嗡声： Converts Figma designs into working apps, useful for design-led teams.
- 🎨 滑行： Turns spreadsheets into tidy apps with almost no setup time.
- ⚡ Softgen： Generates full web apps from a written brief in minutes.
- 📱 阿达洛： Focuses on native mobile builds with app store publishing included.
- 🧠 可爱的人工智能： Writes real code from prompts, so developers can extend it later.
- 🔧 新兴的： Runs AI agents that build and revise your app as you chat.
完整列表请参见我们的 泡泡替代品 指导。
⚔️ 泡沫对比
以下是Bubble与各竞争对手的对比：
- 泡泡糖 vs 软糖： Softr is faster to launch, but Bubble wins once you need custom logic.
- 泡泡大战嗡嗡： Buzzy starts from your design files, while Bubble gives you deeper database power.
- 泡泡 vs 滑翔： Glide suits simple data apps, and Bubble handles complex products better.
- 泡沫经济 vs 软性经济： Softgen generates quickly, but Bubble offers more control after generation.
- 泡泡对战阿达洛： Adalo feels simpler for mobile, though Bubble now ships native apps too.
- Bubble vs Lovable ai: Lovable ai produces code, while Bubble keeps everything inside one visual editor.
- 泡沫经济与新兴经济： Emergent leans on AI agents, and Bubble gives you predictable manual control.
立即开始使用 Bubble
你已经学会了如何使用 Bubble 的所有主要功能：
- ✅ 可定制设计
- ✅ 内置数据库
- ✅ 逻辑与工作流程
- ✅ 高级人工智能
- ✅ 版本控制
- ✅ 安全仪表盘
- ✅ AI 应用生成器
- ✅ 模板
- ✅ 原生移动应用构建器
下一步： 选择一项功能，立即试用。
大多数人都是从可定制设计开始的。
It takes less than 5 minutes to continue from here.
常见问题解答
Bubble.io 的工作原理是什么？
Bubble runs a visual editor in your browser. You design pages, define data types, and build workflows. Bubble hosts the app and handles the servers for you.
Bubble.io 适合新手吗？
Yes. Beginners can follow the built-in walkthroughs and free tutorials. Expect a week of practice before the workflow logic feels natural.
如何在Bubble游戏中赚钱？
Charge users a subscription inside your app, sell templates and plugins in the marketplace, or build client apps as a freelance Bubble developer.
What is bubble io used for?
People use it for marketplaces, SaaS products, internal tools, directories, and MVPs. It suits any web app that needs a database and user accounts.
Bubble 可以免费使用吗？
Yes. The Free plan lets you build and test forever. You need a paid plan to launch on a custom domain and remove Bubble branding.
English 
Spanish 
Chinese 
German 
French 
Arabic 
Russian 
Portuguese 
Japanese 
Korean 
Italian 
Turkish 
Dutch 
Polish 
Indonesian 
Thai 
Vietnamese 