科技虫致力于分享一些优秀的开源程序和客户端软件。比如商城、小程序、H5、网站、办公系统、OA、CRM、ERP、内容管理系统CMS、物联网系统、智能硬件、人工智能AI、大数据分析、智慧大屏、工具类软件、编程类软件工具、服务器运维、网络安全、前端技术、后台技术。
大家好～今天要给各位推荐一款「前端开发效率神器」——Bulma，这是一款轻量级、无JavaScript依赖的开源CSS框架，凭借简洁的语法、强大的响应式设计和高度可定制性，圈粉了无数开发者。不管你是刚入门的新手，还是想简化CSS编写流程的老司机，掌握它的安装方法，就能快速搭建出美观的页面。下面就带大家一步步搞懂Bulma的所有安装方式，按需选择不踩坑！
先搞懂：为什么选Bulma？
在讲安装前，先花30秒说说Bulma的核心优势，帮你判断它是否适合你的项目：
-
• 轻量无依赖：仅含CSS代码，不捆绑多余JS，加载速度快，不会给项目“增重”； -
• 响应式开箱即用：自带移动端、平板、桌面端适配，不用手动写媒体查询； -
• 高度可定制：通过Sass变量轻松修改主题（比如颜色、字体、间距），不用“魔改”原生样式； -
• 开源免费：GitHub星标超4.7万，社区活跃，文档清晰，遇到问题容易找到解决方案。 -
两种核心安装路径：按需选对方法
Bulma提供「直接用CSS文件」和「用Sass库自定义」两种方式，前者适合快速测试或简单项目，后者适合需要定制主题的复杂项目。下面把每种方式的操作步骤讲透～
路径1：直接获取CSS文件——快速上手首选
如果你的需求是“尽快用Bulma写页面”，不用自定义样式，直接引入现成的CSS文件最省事，有两个选项可选：
推荐选项：用CDN引入（新手优先）
CDN的好处是“不用下载文件”，直接复制代码到项目里就能用，支持两大CDN平台：
-
1. jsDelivr（推荐，国内访问快）
有两种引入方式，根据你的项目场景选： -
• 方式1：在CSS文件中通过 @import引入
如果你习惯在单独的CSS文件里管理样式，直接加这行代码：@import "https://cdn.jsdelivr.net.cn/npm/[email protected]/css/bulma.min.css"; -
• 方式2：在HTML头部用 <link>标签引入
直接在HTML的<head>里添加，加载更直接：<link
rel="stylesheet"
href="https://cdn.jsdelivr.net.cn/npm/[email protected]/css/bulma.min.css"
> -
2. cdnjs（备选）
若需要切换CDN，也可以用cdnjs的链接，用法和上面一致，替换链接即可：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
小贴士：自Bulma v1版本后，主版本已支持RTL（从右到左）语言（如阿拉伯语），不用再单独下载“Bulma RTL版本”，直接用上面的链接就行～
备选选项：下载GitHub发布版
如果你的项目不能连外网，或者想把CSS文件存在本地，可以下载压缩包：
-
1. 打开Bulma的GitHub发布页（点击直达）； -
2. 找到最新版本的「Source code (zip)」，点击下载； -
3. 解压后，在 css文件夹里找到bulma.min.css，复制到你的项目中，再通过<link>引入即可。
路径2：获取Sass库——自定义主题必选
如果你的项目需要个性化主题（比如把主色调改成品牌色、调整字体大小），就需要用Bulma的Sass库（.sass文件），同样有两个选项：
推荐选项：用NPM/Yarn安装（项目开发首选）
NPM/Yarn是前端项目的依赖管理工具，用它安装Bulma，方便后续更新和管理，步骤如下：
-
1. 确保你的电脑已安装Node.js（若未安装，先去Node.js官网下载）； -
2. 打开终端，进入你的项目根目录； -
3. 执行安装命令（二选一，NPM更通用，Yarn更快）： -
• 用NPM安装： npm install bulma -
• 用Yarn安装： yarn add bulma -
4. 安装完成后，在项目的 node_modules/bulma目录下，就能找到所有Sass文件，之后在你的Sass文件中引入即可开始定制：// 先修改Bulma变量（比如把主色调改成蓝色）
$primary: #0066cc;
// 再引入Bulma的Sass主文件
@import "../node_modules/bulma/bulma.sass";
备选选项：克隆GitHub仓库
如果想获取Bulma的最新开发版（非稳定版，适合进阶开发者），可以直接克隆GitHub仓库：
-
1. 打开终端，执行克隆命令（三选一，根据你的GitHub连接方式）： -
• 用SSH克隆（需配置GitHub SSH密钥）： git clone [email protected]:jgthms/bulma.git -
• 用HTTPS克隆（无需配置，直接用）： git clone https://github.com/jgthms/bulma.git -
• 用GitHub CLI克隆（需安装GitHub CLI）： gh repo clone jgthms/bulma -
2. 克隆完成后，进入 bulma文件夹，里面的sass目录就是所有Sass源文件；注意：GitHub仓库包含Bulma的文档和示例，体积比NPM包大很多，普通项目用NPM安装更轻便。
3个实用小贴士，避坑又高效
-
1. 版本选择：建议用 0.9.x或1.x版本（文档中用的是0.9.4，稳定且兼容好），避免用太旧的版本，以免缺少新功能； -
2. 安装方式怎么选？ -
• 快速测试/简单页面：选CDN引入CSS； -
• 本地无外网项目：下载GitHub的CSS压缩包； -
• 需定制主题的项目：用NPM安装Sass库； -
3. RTL支持：v1以上版本无需额外配置，直接在HTML标签加 dir="rtl"就能适配从右到左的语言。
最后：动手试试吧！
Bulma的安装门槛不高，核心就是“按需选择”——简单用选CSS，定制用选Sass。安装完成后，你可以去Bulma的官方文档看看组件示例（比如按钮、卡片、导航栏），复制代码就能快速复用，大大减少CSS编写时间。
使用案例
如果你的项目里已经用了Bulma，或者安装时遇到了问题，欢迎在评论区聊聊～也别忘了把这篇教程分享给需要的小伙伴，一起提升开发效率！
官网地址：https://bulma.org.cn/github：https://github.com/jgthms/bulma
喜欢的话点击下方卡片关注一下我吧，为您推荐更多优秀好用的程序和软件。你也可以给我留言或私信，说出你需要的程序和软件，我帮大家推荐。
创作不易 分享,点赞,在看 支持一下,🙏感谢。
