了解Bootstrap ——初学者
一、实验基础知识
1、介绍
Bootstrap 是一款开源免费的前端开发框架，最初由 Twitter 团队开发并于 2011 年开源，目前已迭代至 Bootstrap 5 稳定版本，是全球最流行的前端框架之一。其核心优势包括响应式设计、组件化开发和跨浏览器兼容，能显著提升 Web 开发效率。
2、核心特点
（1）响应式设计开箱即用：内置 12 列栅格系统和响应式断点，支持多设备自适应。
（2）丰富的 UI 组件库：提供按钮、表单、导航栏、模态框等常用组件。
（3）跨浏览器高度兼容：兼容主流现代浏览器，对 IE10+ 也有适配。
（4）轻量化且易于定制：支持 Sass 变量定制，可按需引入组件。
（5）生态完善且上手简单：文档详细，社区资源丰富，支持快速入门。
3、核心组成部分
（1）CSS 样式库：包括基础排版、栅格系统、表单样式等。
（2）JavaScript 插件：提供模态框、下拉菜单、轮播图等交互组件，Bootstrap 5 已移除 jQuery 依赖。
（3）图标库：内置 Bootstrap Icons，涵盖多种矢量图标。
4、版本差异
Bootstrap 3：依赖 jQuery，支持 IE8+，适用于旧项目维护。
Bootstrap 4：引入 Sass 和 Flexbox，仍依赖 jQuery，适合兼容旧浏览器的项目。
Bootstrap 5：移除 jQuery，采用原生 JS，更适合现代浏览器和新项目。
5、适用场景
（1）适用于中小型企业官网、后台管理系统、移动端 H5 页面等快速开发项目。
（2）不适用于对性能或视觉定制要求极高的项目，如大型电商首页或艺术化设计网站。
二、实验步骤
1. 下载安装包
访问 Bootstrap 官网（如 `https://v3.bootcss.com/`）进入下载页面。
选择下载 Bootstrap，下载完成后解压缩，保存安装路径。
2. 安装 Bootstrap
打开命令行窗口，输入 `npm -v` 确认 Node.js 环境。
输入 `npm install bootstrap` 进行安装，显示 “added 1 package” 表示安装成功。
在 `node_modules` 文件夹中找到 `bootstrap` 目录，将其中的 `dist`、`js` 等文件夹复制到项目中使用。
3. 环境变量配置（如需要）
打开控制面板中的“环境变量”设置。
在用户变量中找到 `Path`，添加 Bootstrap 安装路径，保存并退出。
4. 安装验证
在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。
编写简单代码（如使用 `btn btn-primary` 类按钮），查看页面是否正常显示样式，以验证安装成功。
三、实验测试与验证
1、下载安装包
输入网址：https://v3.bootcss.com/
进入下载页面--->选择下载Bootstrap--->下载完成后解压缩---->进行安装，并保存安装路径
2、安装Bootstrap
在命令行窗口输入npm -v回车--->显示版本号；
接着输入npm -install回车--->显示added 1 packge in 34s（类似即可，一定要有added）即为安装成功
文件路径为你输入npm -install时的路径（C:\Users\Adminisrator）
可在该路径下找到刚下载的文件node_modules--->文件中有Bootstrap文件夹---->打开后能看到dist、fonts、js等文件夹--->将其复制到项目中即可使用
3、环境变量配置
在控制面板找到环境变量编辑器--->选择环境变量---->在用户环境变量中找到path双击进入--->选择新建--->填入下载时的地址--->保存退出即可
4、安装验证
在环境中编写简单代码，引用js文件，观察网页是否正常显示内容
