🅱️ Bootstrap 学习路线
65 个互动教程
Bootstrap 入门 — 响应式 CSS 框架
Bootstrap：最流行 CSS 框架，栅格+组件+工具类
Bootstrap 工具类大全
掌握Bootstrap常用工具类：间距、颜色、边框、阴影、文本对齐、显示与隐藏
Bootstrap 表单控件
form-control/input-group/form-check 美化表单
Bootstrap 导航栏
navbar + collapse 响应式导航
Bootstrap 表格样式
学习Bootstrap表格的各种样式变体和响应式处理
Bootstrap 警告框与提示
掌握Bootstrap Alert组件和关闭按钮的交互
Bootstrap 徽章与进度条
学习Badge徽章和Progress进度条组件的使用
Bootstrap 折叠面板 Accordion
学习Bootstrap Accordion组件的使用：手风琴效果、自定义样式
Bootstrap Toast 轻提示
学习Bootstrap Toast组件的使用和JavaScript控制
Bootstrap 颜色系统
了解Bootstrap的颜色变量体系和语义化颜色类名
Bootstrap 间距
m{tblrxy}-{0~5} 快速调整
Bootstrap 排版
display/lead/text-muted
Bootstrap 常用组件
Alert、Card、Badge、Progress、Modal 开箱即用
Bootstrap 模态框
Modal 弹窗组件，data-bs-toggle 触发
Bootstrap 轮播
学习Carousel
Bootstrap 卡片组件
Card 布局：header/body/footer/image/overlay
Bootstrap 栅格系统详解
12列布局/断点/偏移/嵌套/对齐
BS5 Offcanvas 侧边栏交互
学习使用 Bootstrap 5 的 Offcanvas 组件创建可滑出的侧边栏，用于导航、表单或附加内容。
BS5 Scrollspy 滚动监听
学习使用 Scrollspy 组件自动更新导航栏以标记当前滚动位置。
Bootstrap 5 文本截断与溢出处理
Bootstrap文本工具类：.text-truncate文本溢出省略号、.text-nowrap不换行、.text-break强制换行、.text-reset重置颜色、.text-decoration-none去除下划线
BS5 Popover 弹出框
学习使用 Popover 组件在点击或悬停时显示附加信息。
Bootstrap 5 显示属性工具
Bootstrap Display工具：.d-none/.d-block/.d-inline/.d-flex/.d-grid、响应式显示（.d-md-none等）、打印显示.print-*、.invisible隐藏但占位
BS5 Placeholder 占位符
学习使用 Placeholder 组件在内容加载时显示占位提示，提升用户体验。
Bootstrap 5 浮动与清除浮动
Bootstrap浮动工具：.float-start/.float-end左浮右浮、响应式浮动.float-md-*、.clearfix清除浮动、与Flexbox/Grid的对比选择
BS5 Ratio 响应式比例容器
学习使用 Ratio 组件创建固定宽高比的嵌入容器，用于视频或图片。
BS5 Stacks 堆叠布局
学习使用 Stacks 工具快速创建垂直或水平布局，无需额外 CSS。
BS5 Utilities 实用工具
学习使用 Bootstrap 5 的内置实用工具类快速调整样式，如边框、阴影和文本。
Bootstrap 5 Flex 弹性布局工具
Bootstrap 5 Flex工具类：.d-flex/.d-inline-flex、flex-direction（.flex-row/.flex-column）、justify-content、align-items、flex-wrap、flex-grow/shrink、响应式flex
BS5 RFS 字体缩放
学习使用 RFS（响应式字体缩放）让文本在不同屏幕尺寸下自动调整大小。
Bootstrap 5 Sizing 尺寸工具
Bootstrap尺寸工具：宽度w-25/50/75/100/auto、高度h-25/50/75/100/auto、max-width/height mw-100/mh-100、vw-100/vh-100视口尺寸
BS5 CSS 变量
学习使用 Bootstrap 5 的 CSS 自定义属性（变量）来覆盖主题颜色和样式。
Bootstrap 5 Borders 边框工具
Bootstrap边框工具：.border添加边框、边框方向（.border-top/end/bottom/start）、边框颜色、.border-0移除边框、圆角.rounded（-circle/pill）、圆角大小
BS5 定制主题
学习通过 Sass 变量和工具定制 Bootstrap 5 主题，创建独特的设计。
Bootstrap 5 Shadows 阴影工具
Bootstrap阴影：.shadow（默认）、.shadow-sm小阴影、.shadow-lg大阴影、.shadow-none移除、阴影在交互中的应用（hover悬浮效果）、对比CSS box-shadow
利用CSS自定义属性深度定制Bootstrap 5主题
学习如何通过覆盖CSS自定义属性（CSS Variables）而非SASS变量来动态修改Bootstrap的配色、间距与圆角，实现运行时主题切换。
Bootstrap 5 辅助类大全
Bootstrap辅助类：.visually-hidden无障碍隐藏、.sticky-top吸附顶部、.overflow-auto/hidden/visible、.text-reset重置颜色、.bg-transparent透明背景
构建多层嵌套Offcanvas与独立滚动容器
解决Bootstrap Offcanvas组件中嵌套另一个Offcanvas时body滚动失效问题，通过CSS和JS控制内部滚动容器。
Bootstrap 5 选项卡 Tabs
Bootstrap 5选项卡：Nav tabs导航标签、.nav-tabs/.nav-pills样式、data-bs-toggle='tab'切换、JavaScript Tab API、淡入淡出动画.fade、垂直选项卡
bs-grid2
intermediate
Bootstrap 5 栅格系统深入
Bootstrap栅格深入：row-cols列数控制、offset偏移、order排序、nesting栅格嵌套、gutter间距（g-0~g-5）、响应式断点（sm/md/lg/xl/xxl）策略
Bootstrap 5 表单组件
Bootstrap表单：Floating labels浮动标签、Input group输入组、form-validation验证样式（is-valid/is-invalid）、form-select/form-range自定义、form-floating
Bootstrap 5 辅助类大全
Bootstrap辅助类：间距（p-*/m-*）、边框（border/border-*-0）、阴影（shadow/shadow-none）、文本（text-truncate/text-wrap）、显示（d-*-none/flex/grid）
Bootstrap 5 导航栏
Bootstrap导航栏Navbar：navbar-expand响应式折叠、navbar-brand品牌、nav-item/nav-link导航链接、dropdown下拉菜单、navbar-toggler汉堡菜单、sticky-top固定顶部
Bootstrap 5 表格
Bootstrap表格：table类样式（table-striped/table-bordered/table-hover/table-dark）、响应式表格table-responsive、表格对齐vertical-align/text-align、table-sm紧凑表格
Bootstrap 5 Utilities API
Bootstrap 5 Utilities API（以编程方式生成工具类/$utilities map）：$utilities:()配置在_utilities.scss使用API动态生成响应式间距/边框/颜色等工具类、与直接用CSS类对比、定制项目Tailwind风格工具类
Bootstrap 5 JavaScript 组件
Bootstrap 5 JS组件（原生JS实现去jQuery依赖）：Modal/Dropdown/Offcanvas/Collapse/Carousel/Tooltip/Popover/Toast实例化(new bootstrap.Modal(el)/ data-bs-*属性)、事件(show.bs.modal/hidden.bs.modal)、与Alpine/Vue/React集成
用Subgrid与Bootstrap Grid实现跨行对齐
利用CSS Subgrid配合Bootstrap网格，让不同行内的子元素在垂直方向上严格对齐，突破传统块级布局限制。
Bootstrap 5 导航 Scrollspy自动更新
Bootstrap Scrollspy滚动监听：data-bs-spy='scroll'属性配置、导航自动高亮当前滚动位置、配合navbar/list-group使用、offset偏移设置、手动刷新refresh
创建可拖拽的Toast通知堆叠管理器
用Bootstrap Toast组件结合原生拖拽API实现可排序、可拖拽位置的通知堆叠面板。
响应式表格：用户可切换显示/隐藏列
通过复选框控制Bootstrap表格列的显示与隐藏，并利用CSS Grid或flex保持响应式布局。
为Bootstrap Carousel添加Ken Burns慢速缩放效果
使用CSS动画和Bootstrap Carousel事件实现背景图片缓慢缩放与平移的电影级视差效果。
使用Bootstrap Utility API 创建可链式调用的工具类生成器
深入Bootstrap的Utility API，编写自定义Sass混入，批量生成例如间距、颜色、阴影的变体组合类。
在Input Group中嵌入验证图标与浮动标签
结合Bootstrap表单验证与Input Group，实现前置/后置图标自动显示校验状态。
固定导航栏下的滚动阅读进度条
在Bootstrap sticky-top导航栏下方添加一个全宽进度条，随页面滚动显示阅读百分比。
基于断点的智能网格重新排序（无JavaScript）
仅使用Bootstrap的order类与flex方向改变，实现不同屏幕尺寸下内容块的完全重新排列。
自定义断点矩阵：突破xs-xl的限制
学习如何创建非标准的断点系统（如超小屏576px、巨屏1600px），并实现与其对应的容器与栅格行为。
工具链组合器：用Sass生成无冗余的复合样式
从零构建一个工具链生成器，将多个实用类（如.p-2 .border .rounded）合并为单一CSS类，减少HTML体积。
动态主题切换系统：基于CSS变量与JS的实时换肤
超越暗色模式，实现多主题（如蓝、绿、红）实时切换，并同步更新全局组件与自定义变量。
栅格覆层调试器：在开发中可视化所有断点的列边界
构建一个非侵入式的调试覆层，实时显示当前断点下的栅格列线与间距，并支持显示/隐藏。
内联表单验证反馈：实时多字段关联校验与视觉反馈
实现相邻字段（如密码与确认密码）的联动验证，错误消息与Bootstrap表单样式完美融合。
无容器流体布局：用CSS网格与Bootstrap边距实现全宽设计
移除传统.container，利用CSS Grid和Bootstrap的gutter类构建完全流体但保持对齐的布局。
手风琴状态机：用Bootstrap Collapse实现有限状态自动机
将Bootstrap的折叠组件与状态模式结合，实现复杂交互逻辑如顺序展开、最少一个保持展开。
组件加载变形术：为按钮/卡片注入动态占位与状态切换
利用Bootstrap Spinner与自定义CSS动画，实现按钮点击后变为加载状态再变为完成状态的无缝过渡。
RTL排印与布局引擎：从右向左的深度适配
超越基本dir=rtl，构建支持混合左右书写方向的复杂布局，并利用Bootstrap的RTL变量动态调整。
Offcanvas数据流连接器：将面板与外部API实时绑定
构建一个Offcanvas面板，自动从REST API获取数据并利用Bootstrap的Table/Form组件渲染，支持实时更新。