第35课：Tailwind CSS 布局与响应式——Flex/Grid 类、断点前缀、container、@applyTailwind CSS 将 CSS 的 Flexbox 和 Grid 能力封装为直观的原子类，结合响应式前缀，让你无需写一行 CSS 即可构建任意复杂的自适应布局。本节课将系统讲解 Tailwind 中的 Flex 和 Grid 工具类体系、断点前缀的精细控制、container 容器的用法，以及如何通过 @apply 将高频布局模式抽象为可复用的组件类。掌握这些工具后，你将能够在 HTML 中以极快的速度实现从导航栏到仪表板的全部布局需求。
1. Flex...
第34课：Tailwind CSS 实用优先哲学与配置Tailwind CSS 是一个实用优先（Utility-First） 的 CSS 框架。与 Bootstrap 提供预制的组件（如 .btn、.card）不同，Tailwind 提供的是原子化的工具类（如 text-center、bg-blue-500、p-4），让你直接在 HTML 中组合这些类来构建任意设计，而无需编写自定义 CSS。这种范式在初期可能显得冗长，但它在可维护性、一致性和设计系统的可扩展性方面有显著优势。本节课将深入 Tailwind 的设计哲学、配置文件的核心作用、响应式与状态变体的工作机制，以及如何通过 @la...
第33课：Bootstrap 5 定制与主题——Sass 变量覆盖、工具类、实用 APIBootstrap 5 的默认样式可以满足大多数场景，但真实项目往往需要与品牌视觉保持一致。Bootstrap 5 提供了三个层面的定制能力：CSS 变量（自定义属性）覆盖、Sass 变量和映射、以及实用 API（Utility API）。通过组合这些工具，可以系统性地修改颜色、间距、圆角、字体等全局设计令牌，打造专属的主题系统，而不必写冗余的覆盖样式。本节课将深入这三种定制机制的原理与实战。
1. CSS 变量覆盖：最轻量的定制方式Bootstrap 5 内部大量使用 CSS 自定义属性（CSS ...
第32课：Bootstrap 5 常用组件——导航栏、卡片、按钮、模态框、下拉菜单Bootstrap 5 提供了大量预制的 UI 组件，这些组件基于 JavaScript 插件和 CSS 类构建，能快速搭建出功能齐全、样式一致、响应式的界面。本节课将详细介绍五个最常用的核心组件：导航栏、卡片、按钮、模态框和下拉菜单。我们将逐一拆解每个组件的 HTML 结构、关键 CSS 类、JavaScript 交互行为以及自定义选项，并结合实际场景给出完整可运行示例。
1. 导航栏（Navbar）导航栏是网站顶部最重要的导航元素，Bootstrap 的 .navbar 组件内置了响应式折叠、品牌区、...
第31课：Bootstrap 5 栅格系统与响应式工具Bootstrap 5 的栅格系统是一套基于 Flexbox 的 12 列布局引擎，用于快速构建响应式页面。它通过预定义的 CSS 类名，将容器、行、列的尺寸与断点（Breakpoints）无缝结合，无需写一行自定义 CSS 即可实现复杂的自适应布局。本节课将深入拆解栅格系统的底层逻辑：容器如何限定宽度、行如何组织列、列宽如何按断点自动分配，以及偏移、排序、间距控制等高级技巧。
1. Bootstrap 5 的核心断点与容器1.1 五个响应式断点Bootstrap 5 使用五个断点将屏幕从小到大分层：
断点名称
类名前缀
最小...
第30课：响应式设计与媒体查询——移动优先、断点、@media 与容器查询简介响应式设计（Responsive Design）是让同一个网站或应用在不同屏幕尺寸、不同设备上都能提供良好体验的设计哲学。其核心支柱是媒体查询（Media Queries）——允许 CSS 根据视口宽度、设备特性等条件应用不同的样式。本节课将系统讲解移动优先策略、断点的选择与命名、@media 的完整语法与逻辑组合，以及现代响应式布局的新星——容器查询（Container Queries） 的基本原理。
1. 移动优先（Mobile First）策略1.1 两种设计策略对比
策略
基础样式面向
媒体查询方...
第29课：Grid 网格布局（下）——项目定位、网格区域命名、auto-fit vs auto-fill上一节课我们学习了 Grid 容器属性，定义了网格的轨道结构与间距。本节课将聚焦于 Grid 项目自身的属性——如何将项目精确地放置在网格单元格中、跨越多个轨道、甚至完全脱离自动流放置。我们还会深入对比 auto-fit 和 auto-fill 的细微差异，并学习命名网格区域这一高级技巧。掌握这些能力后，你将能够构建任何你能想到的二维布局。
1. 基于网格线的项目定位：grid-column 与 grid-row每条网格线都有一个数字索引，从 1 开始。列线从左到右编号，行线从上到下...
第28课：Grid 网格布局（上）——容器属性：grid-template-columns/rows、fr 单位、gap、隐式网格CSS Grid 是二维布局的终极解决方案。Flexbox 擅长处理一维排列（要么行、要么列），而 Grid 允许你同时控制行和列，在二维平面上精确地放置元素。它是构建页面整体框架、复杂卡片网格、仪表板布局的首选工具。本节课将从零开始，深入讲解 Grid 容器上的核心属性：如何定义网格轨道、fr 单位的弹性分配、gap 间距控制、以及隐式网格的自动生成机制。
1. 开启 Grid 布局：display: grid 与 display: inline-grid...
第27课：Flexbox 弹性布局（下）——项目属性：flex-grow、flex-shrink、flex-basis、order、align-self上一节课我们掌握了 Flex 容器上的六个属性，它们决定了整体排列规则。本节课将聚焦于 Flex 项目自身的属性——这些属性让你精确控制每个子元素如何伸缩、如何排列顺序、以及如何脱离群体的对齐规则。它们是 Flexbox 实现复杂响应式布局的核心武器。理解每个属性的计算原理，将帮助你写出更加简洁、灵活的 CSS，而无需依赖大量的媒体查询或固定宽度。
1. flex-grow：增长因子——瓜分剩余空间flex-grow 定义当 Flex ...
第26课：Flexbox 弹性布局（上）——容器属性：flex-direction、flex-wrap、justify-content、align-itemsFlexbox 是 CSS 一维布局的终极方案。它让容器具备了控制子元素对齐、分布和尺寸的能力，彻底告别了浮动和表格布局的繁琐与 hack。Flexbox 的核心思想简单却强大：将容器划分为主轴和交叉轴两条轴线，子元素沿主轴排列，沿交叉轴对齐。本节课将从零开始，深入剖析 Flex 容器上的六个核心属性——flex-direction、flex-wrap、flex-flow、justify-content、align-items 和 ...
