{"id":31688310,"url":"https://github.com/chengchuu/bootstrap-blueprints","last_synced_at":"2025-10-08T10:54:47.204Z","repository":{"id":43401724,"uuid":"95130741","full_name":"chengchuu/bootstrap-blueprints","owner":"chengchuu","description":"Bootstrap 是当前很受欢迎的前端框架，如何用 Bootstrap 快速完成一个网站？","archived":false,"fork":false,"pushed_at":"2025-09-27T08:35:22.000Z","size":20052,"stargazers_count":7,"open_issues_count":2,"forks_count":17,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-27T10:22:24.094Z","etag":null,"topics":["bootstrap","bootstrap3","css3","html5","sass"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chengchuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-22T15:38:16.000Z","updated_at":"2025-01-21T09:37:09.000Z","dependencies_parsed_at":"2025-04-19T14:43:57.431Z","dependency_job_id":"d0012206-0364-498c-8238-723931babba4","html_url":"https://github.com/chengchuu/bootstrap-blueprints","commit_stats":null,"previous_names":["chengchuu/bootstrap-blueprints"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chengchuu/bootstrap-blueprints","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chengchuu%2Fbootstrap-blueprints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chengchuu%2Fbootstrap-blueprints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chengchuu%2Fbootstrap-blueprints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chengchuu%2Fbootstrap-blueprints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chengchuu","download_url":"https://codeload.github.com/chengchuu/bootstrap-blueprints/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chengchuu%2Fbootstrap-blueprints/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278931659,"owners_count":26070788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap3","css3","html5","sass"],"created_at":"2025-10-08T10:54:45.347Z","updated_at":"2025-10-08T10:54:47.197Z","avatar_url":"https://github.com/chengchuu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Bootstrap实战 - 从零开始边学边练\n\n讲 Bootstrap 基础的教程网上已经很多了，实际上官网里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。\n\n## [瀑布流布局](http://blog.mazey.net/2399.html)\n\n瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 Bootstrap 实现一个瀑布流布局。\n\n**1\\. CSS3 实现**\n\n在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-first-waterfall/index.html)\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall)\n\n**2\\. JavaScript 实现**\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall-javascript](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-first-waterfall-javascript)\n\n## [响应式布局](http://blog.mazey.net/2575.html)\n\n响应式布局就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。导航栏与轮播在大部分网站的头部占很高的比重，特别是导航栏，扮演着网站地图的角色。在响应式布局中，要求导航栏能够根据终端屏幕大小显示不同的样式。\n\n在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-second-navigation/index.html)\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-second-navigation](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-second-navigation)\n\n## [注册和登录](http://blog.mazey.net/2594.html)\n\n注册和登录在社交和商业网站中是必不可少的一个部分。\n\n在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-third-login/index.html)\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-third-login](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-third-login)\n\n## [评论列表](http://blog.mazey.net/2613.html)\n\n社交媒体网站盛行，人们常常会使用评论表达自己的观点，评论功能已然成为网站的一部分。\n\n在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-fourth-comment/index.html)\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fourth-comment](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fourth-comment)\n\n## [单页面网站](http://blog.mazey.net/2671.html)\n\n单页面结构简单、布局清晰，常常用来做手机 App 或者某个产品的下载介绍页面。现在，展示型网页整体趋向于单页网站设计，这样一次性把核心信息展现出来，对于用户来说更加直观和简单，能够快速了解一个产品。\n\n在线访问：[https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html](https://i.mazey.net/bootstrap-blueprints/lesson-fifth-singlepage/index.html)\n\n案例代码：[https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fifth-singlepage](https://github.com/chengchuu/bootstrap-blueprints/tree/main/lesson-fifth-singlepage)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchengchuu%2Fbootstrap-blueprints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchengchuu%2Fbootstrap-blueprints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchengchuu%2Fbootstrap-blueprints/lists"}