网上已有许多 Bootstrap 基础教程。官方文档也提供了详细说明，但完整的实战案例相对较少。本项目以常见的网页布局为目标，演示如何使用 Bootstrap 样式完成页面。每个案例仅讲解相关知识点，便于在练习中加深理解。开始前，需要具备 HTML 和 CSS 基础。
瀑布流是一种多栏布局，各列内容的高度并不一致。本案例演示如何使用 Bootstrap 实现瀑布流布局。
1. CSS3 实现
在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall
2. JavaScript 实现
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall-javascript
响应式布局让同一个网站适配多种终端，无需为每种终端单独开发版本。本案例介绍导航栏和轮播，并演示如何让导航栏根据屏幕宽度切换显示方式。
在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-second-navigation
注册和登录是社交网站与商业网站中的常见功能。
在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-third-login
评论是社交媒体网站中的常见功能，用户可以通过评论表达观点。
在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fourth-comment
单页面网站结构简单、布局清晰，常用于手机 App 或产品的下载介绍页。它可以集中展示核心信息，帮助用户快速了解产品。
在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html
案例代码：https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fifth-singlepage