讲 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