Bootstrap实战 - 从零开始边学边练

讲 Bootstrap 基础的教程网上已经很多了，实际上官网里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。

瀑布流布局

瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 Bootstrap 实现一个瀑布流布局。

1. CSS3 实现

在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall

2. JavaScript 实现

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript

响应式布局

响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。

在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation

注册和登录

注册和登录在社交和商业网站中是必不可少的一个部分。

在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-third-login

评论列表

社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。

在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fourth-comment

单页面网站

单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。

在线访问：https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html

案例代码：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fifth-singlepage