点此查看 所有教程、项目、源码导航
0. 作者的话
在写完HTML、CSS、JS教程，以及写完HTML+CSS实战和HTML+CSS+JS实战后，我其实一直犹豫，是直接写前端工程化和Vue的内容。还是写BootStrap框架过渡一下。
最终我还是觉得，先把BootStrap框架拿出来讲一下，当然这里要注意两点：
- BootStrap5教程是完全可以跳过的，学完之前的HTML、CSS、JS后，你大可直接进入后面ES6+、Vue3的教程，这个没问题的。
- 我个人还是建议，可以先过一下BootStrap5教程，通过这个教程，继续夯实咱们的HTML、CSS、JS基础。同时接触一下UI框架是什么，如何利用UI框架提高编程效率，以及认识常用的各种组件，这对以后的学习都大有裨益。
最后，为了避免学习这个BootStrap过于乏味，我还决定学习每个组件的时候，加入对该组件实现的分析。这样咱们通过这个经典的UI框架，来巩固、提高自身的CSS和JS技术。
就这样决定了，先讲BootStrap！
1. 背景
前面我们已经完成 HTML、CSS、JavaScript 的基础学习，并且通过社团活动发布报名平台实战，完整走通了原生前端前后端联调的开发流程。从本篇开始，我们开启新的学习阶段：学习 Bootstrap 5。
学习 Bootstrap 有两个核心目标：一是认识 UI 框架的开发思维，学会复用业界成熟的解决方案，站在巨人的肩膀上提升开发效率；二是借助这个框架，研究组件底层的 CSS、JavaScript 实现逻辑，进一步完善我们的 CSS 和 JS 技术体系，把原生基础学得更加扎实。
2. 为什么选择学习 Bootstrap 5
UI 框架把开发中反复出现的布局、样式、交互组件提前封装好，如果从零手写，我们需要重复处理布局、兼容、样式重置、交互状态等大量琐碎工作。成熟框架已经帮我们完成这部分沉淀，开发者只需要通过简单的类名调用，就可以快速搭建页面原型、后台管理界面。这也就是常说的站在巨人的肩膀上开发。
但要明确一个重要原则：学习框架不等于只背诵类名。框架并不是黑盒，它本质就是一套组织规范良好的 CSS，搭配 JavaScript 实现交互效果。我们选择 Bootstrap 5，也正是因为它不再依赖 jQuery，全部使用原生 JavaScript 实现交互，和我们之前学习的技术栈高度契合，方便我们阅读、理解底层源码。
相比旧版本：
- Bootstrap 5 以 Flex 布局作为底层支撑，栅格布局更简洁；
- 移除老旧浏览器兼容代码，整体更加轻量化；
- 组件风格现代化，源码可读性更高，适合用来做源码研读。
引入方式分为两种：CDN 引入适合课堂演示、快速上手练习，不需要下载任何本地文件；本地引入适合正式项目，可以按需定制主题、删减不需要的组件，减少最终打包体积。我们前期演示优先使用 CDN。
3. 本次配套学习方法
和单纯套用组件的学习方式不同，我们采用一套“由表及里”的学习思路：每学习一个组件，除了掌握它怎么调用、有哪些常用参数、适合什么业务场景之外，额外增加一步，探究组件背后的实现原理。
当学习布局类组件（栅格、卡片、导航）：重点阅读对应的 CSS，观察它如何利用弹性布局、选择器、工具类、伪类来控制布局、间距、颜色与状态，理解它的样式组织思路，学习大型项目中 CSS 的管理方案。
当学习交互类组件（弹窗、折叠、下拉菜单）：找到对应的 JS 源码，理清它如何绑定事件、操作 DOM、切换类名、控制组件显示与隐藏，理解组件封装的思路。
简单来说，使用组件只是表层目标；透过组件，吸收别人优秀的 CSS、JS 写法，反哺我们的原生基础，才是这一阶段最重要的任务。
4. 客观认识 Bootstrap 的优缺点
它的优势很明显：上手门槛低，响应式能力开箱即用，组件丰富，非常适合快速搭建后台页面与原型。同时它的源码规范，是很好的学习范本。
它同样存在局限：如果不加修改直接套用，大量页面会出现样式趋同；如果需要深度定制外观，就需要理解 CSS 优先级，合理覆盖原有样式；对于高度定制化、视觉风格独特的产品，直接使用会有较多改造工作量。
5. 小结
原生 HTML、CSS、JavaScript 是前端的内功，Bootstrap 是一套优秀的学习范本与开发工具。我们不会把它当成一个“拿来就用”的黑盒，而是把它当成一份高质量的开源学习案例。
在后续的学习中，我们一边学会使用 UI 框架快速开发，一边持续深挖底层实现，持续巩固原生前端能力。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/woshisangsang/article/details/170370557
