Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mazeyqian/bootstrap-blueprints
Bootstrap 是当前很受欢迎的前端框架，如何用 Bootstrap 快速完成一个网站？
https://github.com/mazeyqian/bootstrap-blueprints
bootstrap bootstrap3 css3 html5 sass
Last synced: 16 days ago
JSON representation
Bootstrap 是当前很受欢迎的前端框架，如何用 Bootstrap 快速完成一个网站？
- Host: GitHub
- URL: https://github.com/mazeyqian/bootstrap-blueprints
- Owner: mazeyqian
- License: mit
- Created: 2017-06-22T15:38:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-06-09T14:20:04.000Z (over 1 year ago)
- Last Synced: 2023-06-09T15:26:20.136Z (over 1 year ago)
- Topics: bootstrap, bootstrap3, css3, html5, sass
- Language: HTML
- Homepage:
- Size: 19.1 MB
- Stars: 6
- Watchers: 1
- Forks: 16
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Bootstrap实战 - 从零开始边学边练
讲 Bootstrap 基础的教程网上已经很多了，实际上官网里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。
## [瀑布流布局](https://blog.mazey.net/2399.html)
瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 Bootstrap 实现一个瀑布流布局。
**1\. CSS3 实现**
在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html)
案例代码：[https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall](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://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript)
## [响应式布局](https://blog.mazey.net/2575.html)
响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。
在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html)
案例代码：[https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation](https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-second-navigation)
## [注册和登录](https://blog.mazey.net/2594.html)
注册和登录在社交和商业网站中是必不可少的一个部分。
在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html)
案例代码：[https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-third-login](https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-third-login)
## [评论列表](https://blog.mazey.net/2613.html)
社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。
在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html)
案例代码：[https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fourth-comment](https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fourth-comment)
## [单页面网站](https://blog.mazey.net/2671.html)
单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。
在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html)
案例代码：[https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fifth-singlepage](https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-fifth-singlepage)