着移动端迅速发展，现在网站建设一般都要求兼容手机端，所以为了节约成本，大部分用户喜欢使用一些响应式前端框架，特别流行使用Bootstrap来建站，其良好扩展性加上实用的特效功能，足以应付大多数网站需求。

今天设计达人网小编为大家整理一系列好看的Bootstrap HTML网站模板，大家可以用它来快速搭建自己的网站，比如企业站、个人站、美食类或作品展示网站等。

Triangle

THOMSOON

适合个人或工作到作品展示的响应式模板

SeFolio

一个单页模板，透明设计风格，若搭配一个漂亮的全屏背景图像，一定会很有感觉。

Backyard

Backyard是一个漂亮着陆页模板，使用Bootstrap3搭建，拥有5种风格和6种配色。

Finec

宫格式布局，用来展示作品、照片的个人网站比较适合。

Bootstrap后台HTML模板

HTML版UI KIT

一套扁平化风格的APP HTML模板，做移动网页，可以尝试直接使用这套模板制作。

Woo

woo是一个干净、时尚的着陆页模板，全屏屏的设计，兼容流行的浏览器和移动端设备，适合用于APP、服务类网站。

Spectral

单页模板，首页使用自适应全屏图像，网站导航默认隐藏起来，达到更简约的效果。

图书介绍模板

如果你正在推一本新书，那么这个图标介绍类模板就很适合你了

美食餐饮模板：MEAT KING

现在流行使用微信订餐，美食餐饮类等餐厅的网站都火起来，都想做一个兼容手机浏览的网站，这个模板就非常适合了。

Office

一个欧美简约风格的企业站模板，响应式设计，兼容手机端浏览。

Flusk

简约的单页模板

POLO

手机APP宣传网站模板

Eco Travel

适用于旅游类的网站模板

介绍

一个基于 vue、Echart 框架的大数据可视化（大屏展示）模板，提供数据动态刷新渲染、屏幕适应、内部图表自由替换、Mixins注入等功能。

开源地址

https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search

项目展示

项目使用

1. 如何启动项目需要提前安装好nodejs与npm,下载项目后在项目主目录下运行npm/cnpm install拉取依赖包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以启动项目，启动项目后需要手动全屏（按 F11）。
2. 如何请求数据现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置，在 views/xx.vue 文件里进行前后端数据请求。

3. 如何动态渲染图表在components/echart下的文件，比如drawPie()是渲染函数，echartData是需要动态渲染的数据，当外界通过props传入新数据，我们可以使用watch()方法去监听，一旦数据变化就调用this.drawPie()并触发内部的.setOption函数，重新渲染一次图表。

4. 如何复用图表组件因为 Echart 图表是根据id/class去获取 Dom 节点并进行渲染的，所以我们只要传入唯一的 id 值与需要的数据就可以进行复用。如中间部分的任务通过率与任务达标率组件就是采用复用的方式。

5. 如何更换边框边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看 如：

6. 如何更换图表直接进入 components/echart 下的文件修改成你要的 echarts 模样，可以去echarts 官方社区里面查看案例。
7. Mixins 注入的问题使用 mixins 注入解决了图表重复书写响应式适配的代码，如果要更换(新增)图形，需要将echarts.init()函数赋值给this.chart，然后 mixins 才会自动帮你注入响应式功能。
8. 屏幕适配问题本项目借助了 flexible 插件，通过改变 rem 的值来进行适配，原设计为 1920px。 ，适配区间为：1366px ~ 2560px，本项目有根据实际情况进行源文件的更改，小屏幕（如:宽为 1366px）需要自己舍弃部分动态组件进行适配，如'动态文字变换组件'会影响布局，需要手动换成一般节点。

具体使用请移步https://gitee.com/MTrun/big-screen-vue-datav?_from=gitee_search地址参考。