问bootstrap 框架安装使用详解

bootstrap 框架是前端常用的响应式 UI 框架，基于 HTML CSS JavaScript 开发，内置栅格系统 组件 样式 交互插件，开发网页的时候不用从零写大量基础样式，可以快速搭建适配电脑平板手机的页面，安装方式主要分成 CDN 引入 本地文件下载 npm 包管理三种，新手优先推荐 CDN 方式，不需要下载文件，直接在 html 页面引入链接就能使用，正式项目一般选择 npm 或者本地源码，方便自定义修改和离线开发，bootstrap 现在主流版本分为 3.x 4.x 5.x，5 版本已经移除 jQuery 依赖，是目前推荐使用的版本，学习的时候要确认版本，不同版本类名语法有差别，混用版本很容易出现样式失效。

三种安装方式对照表

表格

详细安装操作步骤

第一种 CDN 引入方式

第一步 新建空白 html 文件，在 head 标签里面引入 bootstrap 的 css 文件链接。

第二步 在 body 结束标签之前引入 bootstrap 的 js 文件，5 版本不需要额外引入 jQuery。

第三步 页面里面直接写 bootstrap 自带类名，比如 container row col-md-6，保存之后浏览器打开测试样式是否生效。

第二种 本地下载方式

第一步 前往官方站点下载编译好的压缩包，里面包含 css js fonts 文件夹。

第二步 把解压后的文件夹放到项目目录里面。

第三步 html 页面里面把链接地址改成本地相对路径，引用本地 bootstrap.min.css 和 bootstrap.bundle.min.js。

第四步 打开浏览器测试，如果样式错乱，优先检查字体文件路径是否正确。

第三种 npm 安装方式

第一步 电脑提前安装 nodejs，打开终端，进入项目根目录。

第二步 执行安装命令，安装 bootstrap 包。

第三步 在项目入口文件导入 css 和 js，配合 vite 或者 webpack 打包编译。

第四步 项目打包之后，页面就可以正常调用 bootstrap 组件。

基础使用核心要点

栅格系统是 bootstrap 框架最核心功能，页面外层使用 container 容器，内部 row 行，再拆分 col 列，通过 col-xs col-sm col-md col-lg 设置不同屏幕宽度下的列占比，实现响应式自动换行。

内置组件包含导航栏 按钮 卡片 模态框 轮播 表单 分页 徽章，只需要按照官方类名书写标签，不需要自己写复杂 css。

交互插件比如模态框 下拉菜单 轮播，需要正确引入 js 文件，否则点击没有反应，这是新手最常见报错点。

常见踩坑说明

bootstrap 框架类名优先级很高，自定义样式如果想覆盖默认样式，需要提升选择器权重，或者写在 bootstrap css 之后引入。版本切换的时候，4 版本和 5 版本类名改动较多，比如卡片 表单 间距类不能直接照搬旧教程，会出现样式异常。如果使用 CDN 加载失败，优先检查网络，或者更换备用 CDN 地址。

综合来说 bootstrap 框架安装门槛很低，新手从 CDN 入门，熟悉之后再切换本地或者 npm 工程化方式，重点掌握栅格和组件类名，就可以快速开发响应式网页。

【相关 FAQ】

问题 1 bootstrap 框架安装需要 node 环境吗

回答 1 bootstrap 框架安装如果选择 CDN 或者本地下载，不需要 node 环境，只有使用 npm 方式安装 bootstrap 框架，才需要提前安装 nodejs 环境。

问题 2 bootstrap 框架 5 版本还需要 jQuery 吗

回答 1 bootstrap 框架 5 版本已经移除 jQuery 依赖，安装 bootstrap 框架之后只需要引入自带 bundle js 文件，不需要额外引入 jQuery 库。

问题 3 安装 bootstrap 框架之后样式不生效怎么办

回答 3 安装 bootstrap 框架之后样式不生效，优先检查 css 文件引入顺序和路径，确认类名是否和当前 bootstrap 框架版本匹配，js 插件失效还要检查 js 文件是否正确引入。

问题 4 bootstrap 框架可以离线使用吗

回答 4 bootstrap 框架可以离线使用，选择本地下载方式安装 bootstrap 框架，把 css js 字体文件存到项目内，不依赖外网 CDN 就能正常运行。

【免责申明】

本内容仅为前端框架通用教学科普，官方版本会持续迭代，类名和安装命令以 bootstrap 官方文档为准，不同项目打包工具配置存在差异，不构成商业项目开发承诺。