20个国外Bootstrap网站模板

Bootstrap是目前更受欢迎也是最简洁的建站方式之一，尤其是伴随移动端的发展，响应式设计已经毫无疑问成为了网页设计的趋势，网站建设要求兼容手机端已经是一种刚需，也成为提升用户体验的一种必要方式。但这无疑会加大设计师和前端人员的工作量，基于这样的情况，为了更大程度的节约成本，选择使用响应式的前端框架网站模板越来越受欢迎。

今天，Mockplus为大家精选了20个免费的高品质Bootstrap网站模板，模板种类丰富，适合多种类型的网站，有个人简历、个人网站、作品集展示、创业公司、酒店、博客、医疗、教育、美食等类型，帮助你迅速搭建网站，赶快来看看吧！

1. Coming Soon

Coming Soon是一个Bootstrap 4为主题的网站模板，特别适用于着陆页的设计。该模板带有移动后备图像的视频背景，社交图标和Newsletter注册通道。该模板完全免费，且适应所有主流浏览器和平台。

https://github.com/BlackrockDigital/startbootstrap-coming-soon/archive/gh-pages.zip

2. Creative

Creative是一个响应式小型企业网站设计的bootstrap模板。该模板是一个轻量级的单页模板，具有麻省理工学院许可证。该模板具有自定义导航菜单、滚动动画、自定义按钮样式、丰富插件等等。

https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip

3. Resume

Resume如其名字所示，是一个适用于个人简历/网站设计的bootstrap 4网站模板。该模板简洁、优雅，非常具有设计感，带有滚动页面锚点的固定侧面导航，并且是完全响应式的，使用它来搭建个人网站，可以让你的访客眼前一亮。

免费下载：https：//http://github.com/BlackrockDigital/startbootstrap-resume/archive/gh-pages.zip

4. Clean blog

Clean blog是一个干净简洁的Bootstrap博客主题网站模板。该模板有4个HTML页面，包括博客索引，关于页面，示例博文和联系页面。具有现代设计，带有易于定制的色彩，还提供了免费博客文本，优化了向上滚动时显示菜单栏界面的设计，提高易读性。该模板还提供了社交链接和版权信息。

免费下载：https://github.com/BlackrockDigital/startbootstrap-clean-blog/archive/gh-pages.zip

5. Stylish Portfolio

Stylish Portfolio是一款时尚的单页Bootstrap作品集网站模板，带有画布导航和流畅的页面滚动功能，用户体验。该模板的自定义设计非常人性化，你可以根据需要自己设计，它具有两种自定义按钮样式，带有Font Awesome图标和作品集设计的图像网格等。

免费下载：https://github.com/BlackrockDigital/startbootstrap...

6. Modern Business

Modern Business一个多用途的完整网站模板框架，用于构建Bootstrap 4网站，它包含17个HTML页面和1个可用的PHP联系表单。页面包含: 4个作品集展示页面、定价表，侧栏页面，FAQ页面，404页面和空白全宽页面等。你还可以自定义CTA以及其他界面布局和界面元素。

免费下载：https：//http://github.com/BlackrockDigital/startbootstrap-modern-business/archive/gh-pages.zip

7. Groovin

Groovin是一个基于HTML 5的完全响应式的网站模板，发布于2018年7月10日，可适用于多种类型的网站搭建。该模板是一个单页的网站模板，但内容丰富，包含4个栏目分类，该模板作者具有专业的认定许可。

https://www.free-css.com/assets/files/free-css-templates/download/page230/groovin.zip

https://www.free-css.com/free-css-templates/page23...

8. Charity

该模板发布日期为2018年6月，是一个比较新的模板。如果你计划创建一个非盈利组织的网站，那么Charity会是一个不错的选择。这是一个免费的HTML网站模板，现代，干净，易于使用且高度适应各种浏览器，你可以快速，轻松地构建筹款、照片墙、博客等页面。

https://colorlib.com/download/1230/

9. Sublime

Sublime发行于2018年5月，具有专业许可证：CC BY 3.0。该模板是一个免费的最小量的电子商务网站模板，你可以在这里建立自己的商铺，比如销售小工具，家具，服装，配饰等，该模板都非常适合。使用该模板建立在线商店，能提供给用户的很棒的体验，相信使用更该模板，发布后不久就你就会迎来首批订单。

https://colorlib.com/download/1122/

10. Royal

Royal是一个自带预订表格的免费Bootstrap酒店设计网站模板。该模板是完全基于功能强大且流行的Bootstrap框架建立的，完全响应式。该模板自定义功能强大，使用和修改都很简单。该模板更大的优点是有方便预订联系的表格，可以很好地吸引用户，将他们引入你的网站，以便潜在客户快速采取行动。

https://themewagon.com/themes/free-bootstrap-hotel-template/

11. Unapp

Unapp是一个免费的商业应用程序网站模板，你可以将你的大项目在这里与大众分享。该模板发布于2018年6月，紧跟最新技术和设计，是开始你商业计划一个不错的选择。要真正做出成功的产品，创建一个网站是必要的过程。该模板还有一个专门的博客板块，用于进行内容营销，甚至可以通过在线商店扩展你的网站。

https://colorlib.com/download/1059/

12. Essence

Essence是一个简洁干净的电子商务网站模板。最适合销售男女时装，配饰，箱包，鞋子，眼镜等时尚单品。如果你是要建立一个自己的网上商店，可以看看这个模板。该模板设计用心，从超级精美的主页到商店、产品和结账，可以为你的顾客提供的购物体验。

https://colorlib.com/download/1023/

13. Personal

Personal是一个免费的个人作品集展示网站模板，特别适合那些想要更多东西的创意人才使用。它基于流行的Bootstrap框架搭建，更大限度的确保了网站的灵活性和稳定性。该模板具有个性化的功能，有动画统计数据，设计精妙的作品集展示、推荐书滑块和定价表，还有不错的博客页面。

https://colorlib.com/download/997/

14. Stuff

Stuff是一个免费的HTML5多页面网站模板，如果你想要建立一个以内容为中心的Bootstrap博客主题网站，那么该模板会是不错的选择。该模板设计者很关注细节，文字和视觉效果都做到更优，你的博客可以以干净，直接的方式在线显示，你的读者一定会喜欢。

https://colorlib.com/download/885/

15. Sierra

Sierra是一个免费的Bootstrap网站模板，发布于2018年3月。该模板适用于小型企业建立自己的网站，可以为你的产品和项目提供支持。该模板也是完全自适应的，做了不错的优化工作，跨浏览器。提升加载速度，具有的性能和不错的用户体验。

https://colorlib.com/download/755/

16. Sonar

Sonar是一个自定义的免费HTML5摄影网站模板。该模板是基于Bootstrap 4，具有规范的设计和精美的图片，是一个看起来非常美观的网站。

https://themewagon.com/themes/free-html5-photograp...

17. Ezuca

Ezuca是一个非常具有现代感的免费HTML5教育网站模板，该模板也是完全免费的。该模板更大的特色就是不像平常的教育网站那么正式，它是具有现代感的，很时尚。

https://themewagon.com/themes/free-html5-education-template/

18. Original

Original是一个轻量级的免费的HTML5 博客网站模板。该模板框架精美，设计新颖，你可以使用它建立一个美观与功能俱佳的网站。

https://themewagon.com/themes/free-bootstrap-blog-website-template/

19. Sports

Sports是一个免费的HTML5 Bootstrap运动类型的网站模板。从远古时代起，人们就会通过不同类型的游戏来娱乐，运动类的网站一定要具有吸引力，才可以成功吸引用户。Sports不仅是一款免费的Bootstrap运动模板，也适用于多功能游戏网站，提供有关游戏和体育的必要信息。

https://themewagon.com/themes/multi-page-free-bootstrap-sports-template/

20. Wedding

Wedding是一个多网页的免费HTML5 Bootstrap婚礼网站模板。想让你的网站看起来更加浪漫吗？那么，这个模板将会是不错的选择，一定可以吸引大批的用户。优雅的设计和整体外观的简洁性让这个网站看起来非常舒服。导航明细，操作流畅，滚动布局。此外，它还包含HTML5，CSS3，jQuery，SASS和其他最新的Web开发技术。

https://themewagon.com/themes/free-bootstrap-weddi...

以上就是20个很棒的Bootstra网站模板，它们对网页设计师、开发和初学者都很有用，不需要花费过多的精力就可以创建不错的网站。如果你想快速做出响应式Bootstrap网站设计，不妨尝试一下。

但是，如果你还会想要自己做一个网站，也是可以的，模板可以节省很多力气，但是选对了工具也是一样。推荐你借助原型设计工具，例如Mockplus来快速完成网页模板设计。Mockplus官网上也提供了很多的真实网页模板，你可以直接下载原文件，在Mockplus桌面端打开即可开始设计，也是非常方便的。

更多模板资源：

1. Bootstrap 4 网站模板

https://themewagon.com/themes/free-bootstrap-weddi...

2. 免费的Bootstrap模板

https://themefisher.com/free-bootstrap-templates/

3. 免费的Bootstrap模板和主题

https://gridgum.com/themes/category/free/

4. 更佳的Bootstrap模板

https://colorlib.com/wp/cat/bootstrap/

5. 最全的Bootstrap模板

https://startbootstrap.com/template-categories/all/

相关阅读：

中小企业网页设计技巧/模板

11个海外网页开发博客

2018最新优质电商网站模板，没有比这儿更靠谱了

2018更佳网页设计：就是要你灵感爆棚！！！

2018年，你不能错过的8本Web设计书籍推荐

2018年上半年更佳的10篇网页设计好文【极力推荐】

2018年最全的网站设计6大技巧【附案例】

反面教材，这9个糟糕的网页设计实例引以为戒

干货！2018年你值得一看的网页设计作品集赏析

网页设计有难题？12款网页设计模板给你灵感！

极简网页设计技巧，打造简约之美

网站设计缺乏创意？视差滚动网站设计让你与众不同

摹客（Mockplus），让设计更快更简单

学习任何一款框架，更好的方式就是它的官方网站，在每一个框架的官方网站都有其非常详细的文档，在众多的教学资源网站也好，还是学习视频也好，基于都是根源于官网，那么花费大量时间去看别人视频教学及资源，还不如自已去官网学习更全面，更快。

也许有一些是国外的官网，对中文支持不太友好，而你的英文水平又是一般，这种情况下你可以选择其它资源来学习。便是bootstrap这款框架是中文支持率更好的一个官方学习平台，所以我们也没有必要舍近求远了，直接按照官方的学习流程就好。

那么官网怎么学呢？

一、 进入官网 www.bootcss.com

a) 进入后非常醒目的就是善于bootstrap的介绍及文档的下载

b) 当前稳定的版本是Bootstrap3（v3.3.7）,所以大家点击进入bootstrap3中文文档

c) 进入后，会发现你学习步骤：

d) 点击起步阶段，就会告诉你如何下载及初始化bootstrap的引入操作

当然，在这里会有很多描述，很可能你会对其中一些感觉很迷惑，没关系，抓重点。

e) 这里给你提供了几种安装bootstrap的方式

i.

ii. 使用在线安装和本地安装（需下载到本地）

iii. 按照所提供的基本模板设计你的页面就可以了

iv.

二、 接下来你就可以进入全局CSS样式和组件的学习了。你一定要耐心阅读其中每一个功能的实现过程，官网也提供了每一种功能的案例，你只要边理解边练习就好，当你遇到难以理解的部分，你可以先跳过，看过见个小模块之后你就会对整个模式有一个大概的了解了，然后通过实现的项目练习，再着重研究对应的部分就要以。

三、 所需的样式名也不需要背下来，但是它所提供的案例一定要多练习，一定要理解什么的功能所需要什么的样式名称，当做项目的时候，能快速找到相应的位置就行。

多练习，仿Bootstrap官网去应用其中的功能。

查看以下内容请先确保能够访问国外网站内容。

http://expo.getbootstrap.com

http://builtwithbootstrap.com/

利用Bootstrap框架制作的一些项目展示以及示例操作内容。

http://sddconf.com/brands/sdd/library/Building_Beautiful_Websites_With_Bootstrap.pdf

从一个示例来看如何利用Bootstrap制作一个精美的网站操作。

https://medium.freecodecamp.org/the-anatomy-of-a-bootstrap-dashboard-that-earns-1-000s-each-month-ed3404010d25

学习好Bootstrap的仪表盘设计操作就可以每月赚取10K以上。

https://bootstrapious.com/p/bootstrap-sidebar bootstrap-sidebar的实现操作。

Bootstrap这个UI框架已经被应用到了其它各种功能性框架中，比如Angular/Vue/React/Ember等，所以学习Bootstrap不光可以强化UI界面的优化，还可以磨合JS的功能性框架操作。

https://ng-bootstrap.github.io/#/getting-started

Angular的Bootstrap框架应用。

https://bootstrap-vue.js.org/

Vue的Bootstrap框架应用。

https://react-bootstrap.github.io/ React的Bootstrap框架应用。

http://www.ember-bootstrap.com/ ember的Bootstrap框架应用。

除了Bootstrap还有其它类似的UI框架，比如说foundation、bulma、semantic、UIKit等，那么，到底学习哪个框架呢？需要先做一番研究。

https://blog.templatetoaster.com/bootstrap-vs-foundation/ bootstrap与foundation的比较。

https://hackernoon.com/top-5-most-popular-css-frameworks-that-you-should-pay-attention-to-in-2017-344a8b67fba1 Top 5 Most Popular CSS Frameworks that You Should Pay Attention to in 2017，2017年应用最广泛的5个CSS框架内容。

看了一下其他人的回答，我想补充一句，其实bootstrap这个框架的简单与精妙就在于你不需要把他都记下来，而是用的时候直接将它的效果代码拷贝到你的项目中就可以了，如果有需要修改的地方自己可以建立自己的css来覆盖官方提供的注意媒体查询就好。

哈哈，这个就是用Bootstrap的大屏幕做的效果，实现起来很简单，代码在这里：http://how2j.cn/k/boostrap/boostrap-jumbotron/495.html

如果你用过了Bootstrap就知道用起来很简单，但是如果你没用过，然后次去学习Bootstrap的网站的官网: Getting started · Bootstrap， 放心好了，你一定会被各种术语： Bootstrap CDN，Install with npm, Grunt 什么的吓着，让你以为，我靠，用Bootstrap 要这些都会啊？ 那恐怕我的基础知识还不够用Bootstrap吧？ 是的，我当初就是这种懵逼的感觉

但是，我上课要教这些东西啊，所以只有硬着学了。 学完了之后，整理一遍，再用很平缓的曲线把Bootstrap的知识表现出来，基本上我的学生们一下下。。。 就会了~

那么到底怎么使用呢？ 三个步骤

1. 加上标签 ，因为Bootstrap用到了html5的特性，所以需要声明一下

<!DOCTYPE html>

2. 导入css和js

<script src="js/jquery/2.0.0/jquery.min.js"></script><link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"><script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>

3. 套用class

<button class="btn btn-success">按钮</button>

duang! 你就得到了一个Bootstrap风格的按钮：

而它本来是这一个样子的：

而它本来是这一个样子的：

接着我把Bootstrap做了些整理，把常用(我学会了的)的一些功能留下来，大体分为如下几个部分(有点长的图)：

对于每个效果，以及需要套用什么样式列罗出来，方便查阅和使用

如果你不满意，也可以在线修改，马上看到效果(无需跳转到新的页面，无需刷新页面)

好嘛，只要走一遍，基本上Bootstrap的效果就大概有个了解了。以后要用什么再来查一下，复制粘贴，然后再改改。。。就阔以了。

这个教程我前前后后差不多做了10天左右，然后duang~ 一个小时就讲完了~

教程地址：http://how2j.cn/k/boostrap/boostrap-tutorial/538.html

其他相关：定个小目标，做他个天猫官网前端？ - 黄喜的回答 - 知乎

收藏的同学，请记得点个赞~

Bootstrap专题 - Awesomescodingke上的HTML5板块内部对bootstrap这个工具集有详细的视频教程，可以看一下。http://bootstrap.cn/ 这个网站也可以哈http://bootstrap.cn/ 推荐参考这个，有大量的模板，酷站，还有很多代码片段之前没学过，直接参考了几个demo，做了一个，就明白了

实验楼bootstrap

李炎恢bootstrap

基于bootstrap网页开发

虽然不做前端，但是知道bootstrap是有中文官网，文档比较全也比较详细，相对其它开源项目还是比较容易上手的吧我的网站是实用bootstrap3制作的，地址 http://www.dqiu.netBootstrap教程分享1.快学网WEB精品课程bootstrap框架简介http://www.tudou.com/listplay/TiXt8TzG8_I/aC94BTPrTPg.html2.快学网WEB精品课程pbootstrap框架--bootstrap按钮http://www.tudou.com/listplay/TiXt8TzG8_I/z3dXxVFJiNs.html3.快学网WEB精品课程bootstrap框架--bootstrap图片类http://www.tudou.com/listplay/TiXt8TzG8_I/pajxXl0VPjA.html教程：Bootstrap 教程这个教程里例子很多，可以自己运行着玩。在线页面生成器汉化版：Bootstrap可视化布局系统按钮生成器：Beautiful Buttons for Twitter Bootstrappers我的网站就是用bootstrap2.3.2开发的，你可以参考下，另外可以参考其他的demo：搜索"bootstrap"的分享列表找表哥也是bootstrap3的框架。缘创派也是用的bootstrap.我目前也在用这个，能解放程序员，个人站长。。。很不错的东东。有一个bootstrap的皮站，Boot皮 | Bootstrap模板&插件&站点，上面很多模板值得借鉴。首先，Bootstrap 项目主页本身就是一个很清楚的使用说明文档，仔细阅读并动手尝试便可理解。其次，掌握 LESS 有助于理解 Bootstrap。http://lesscss.org/最后，一些学习资源：国内一些相关译文版本：Bootstrap中文网Twitter Bootstrap中文版/中文翻译LESS使用了 Bootstrap 的案例搜集列表：Built With BootstrapBootstrap ThemesBootswatch详细的 Bootstrap 资源搜集列表：The Big Badass List of Twitter Bootstrap Resources （How Tos 子列表内罗列出了关于 Bootstrap 的各种使用说明和教程）List of Twitter Bootstrap Resources推荐：Tuts+ Premium Course: Bootstrap for Web Design