怎么用yarn安装Bootstrap

陌辰酱_3135

陌辰酱_3135

2026-11-13

848人浏览

原创

Corepack启用是使用yarn add bootstrap的前提,需先运行corepack enable并重启终端;yarn仅安装文件,CSS/JS需手动导入main.js,且不可混用bootstrap与bootstrap-vue-3。

怎么用yarn安装bootstrap

用 yarn add bootstrap 就够了,但得确认 Corepack 已启用

如果你执行 yarn add bootstrap 报错说命令未找到,不是 Bootstrap 的问题,而是 Yarn 本身没被系统识别。2026 年起,Node.js 官方默认通过 corepack 管理 Yarn(包括 v4+),不再推荐用 npm install -g yarn 全局安装。

先检查是否能用:
corepack -h —— 有输出说明已就位
yarn -v —— 若报 command not found,运行:
corepack enable(Linux/macOS 可能需要 sudo)

之后再装 Bootstrap 才会真正生效。

装完后,CSS 和 JS 不会自动生效

Yarn 只负责把文件放进 node_modules/bootstrap,你得手动引入。Vue 项目里最稳妥的方式是在 main.js(或 main.ts)中显式导入:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

注意两点:

  • bootstrap.min.css 是压缩版,开发阶段建议先用 bootstrap.css,方便调试样式
  • 如果只用 CSS 组件(比如 btn、container),可以不引入 JS;但用了 Dropdown、Modal 等交互组件,就必须 import bootstrap 或其单独模块(如 bootstrap/js/dist/modal)
  • Vue 3 + Vite 项目中,若遇到 $tooltip 未定义等错误,大概率是 jQuery 缺失——Bootstrap 5 已移除 jQuery 依赖,别再配 jquery,否则反而冲突

别混用 Bootstrap Vue 和原生 Bootstrap

搜索时容易看到 bootstrap-vue 或 bootstrap-vue-3,它们是第三方封装的 Vue 组件库,和直接 yarn add bootstrap 完全不同。后者只提供 CSS 类名和原生 JS 插件,不带 BButton、BModal 这类 Vue 组件。

VPS Bootstrap
VPS Bootstrap

从零启动全新 VPS,完成 OpenClaw 完整部署,包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

如果你要的是 class 驱动的响应式布局(比如 col-md-6、text-center),就只装 bootstrap;如果想要声明式 Vue 组件,才考虑 bootstrap-vue-3(注意:它不维护了,且仅适配 Vue 3.2+)。

常见误操作:

  • 同时 yarn add bootstrap bootstrap-vue-3 → 样式重复、JS 冲突
  • 在 main.js 里既 import 'bootstrap' 又 app.use(BootstrapVue) → 控制台报 Bootstrap's JavaScript requires Popper 或初始化失败
  • 用 Vue CLI 脚手架却跳过 vue add bootstrap-vue 步骤,直接手动配 → 插件注册漏掉 IconsPlugin 导致图标不显示

CDN 方式更轻量,但不适合生产构建

如果只是临时验证效果或做原型,往 public/index.html 里加两行更快:


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

但要注意:

  • CDN 地址里的版本号(如 @5.3.3)必须和你 yarn list bootstrap 查到的本地版本一致,否则 class 行为可能不兼容(例如 form-control 在 v5.3+ 新增了 is-valid 状态样式)
  • Vite 或 Webpack 构建时不会分析 HTML 中的 CDN 资源,所以 build 后这些链接依然存在,无法离线运行
  • 没有 tree-shaking,哪怕只用一个 btn,也加载全部 CSS/JS

真正要进 CI/CD 流程的项目,坚持用 yarn add bootstrap + 显式 import,才是可控的起点。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2983

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

6523

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

7390

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

7278

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

1043

5

bootstrap框架介绍
bootstrap框架介绍

本专题整合了bootstrap框架相关介绍,阅读专题下面的文章了解更多详细内容。

2026.03.18

805

21

bootstrap安装教程
bootstrap安装教程

本专题整合了bootstrap安装相关教程,阅读专题下面的文章了解更多详细操作教程。

2026.03.18

199

9

Go-Zero零基础入门教程
Go-Zero零基础入门教程

本专题整理Go-Zero的入门知识,从框架定位、环境准备到跑通第一个API服务,讲清目录分层、配置加载、日志与中间件的基本用法,并对比Gin、Kratos的差异,帮助Go开发者建立整体认知,判断它是否适合当前项目。

2026.11.12

0

15

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

2026.11.06

120

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap5 入门教程
Bootstrap5 入门教程

共0课时 | 0人学习

Bootstrap Components 组件文档
Bootstrap Components 组件文档

共0课时 | 0人学习

Bootstrap Grid 栅格系统
Bootstrap Grid 栅格系统

共0课时 | 0人学习