Bootstrap 3 学习案例

从布局开始,边学边练

通过六个独立案例,练习栅格系统、导航栏、表单、媒体对象和单页面布局。

LESSON 01 CSS3

瀑布流布局


结合 Bootstrap 栅格系统与 CSS3 多列属性,实现响应式瀑布流。

LESSON 01 JavaScript

JavaScript 瀑布流


使用 JavaScript 计算元素位置,完成瀑布流布局的另一种实现。

LESSON 02 响应式

导航栏与轮播


组合响应式导航栏、轮播和栅格系统,适配不同宽度的设备。

LESSON 03 表单

注册和登录


使用标签页、水平表单和校验状态,构建注册与登录模块。

LESSON 04 媒体对象

评论列表


通过 Bootstrap 媒体对象组织头像、评论内容和操作链接。

LESSON 05 滚动监听

单页面网站


组合固定导航、滚动监听和响应式内容区,构建单页面网站。