基于Bootstrap v3.3.7的后臺HTML模板

年(Light Year Admin)后臺管理系統模板是一個基于Bootstrap v3.3.7的純HTML模板。

作為后端開發人員，自己在做一些簡單系統時，經常為了后臺的模板煩惱，國內的少，也不太喜歡tab形式的；國外的又太復雜；vue什么框架的又不會用，因而想自己整理出來一個簡單點的通用后臺模板，結合自己的使用和國外模板的配色、細節處理，這就有了光年后臺模板。

簡潔而清新的后臺模板，功能雖少，倒也滿足簡單的后臺功能，也能夠快速上手，希望大家支持。

特別感謝

Bootstrap
JQuery
bootstrap-colorpicker
bootstrap-datepicker
bootstrap-datetimepicker
ion-rangeslider
jquery-confirm
jquery-tags-input
bootstrap-notify
Chart.js
chosen.jquery.js
perfect-scrollbar

登錄頁面

后臺首頁

開關樣式

文檔列表

項目代碼

著移動端迅速發展，現在網站建設一般都要求兼容手機端，所以為了節約成本，大部分用戶喜歡使用一些響應式前端框架，特別流行使用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

項目展示

項目使用

如何啟動項目需要提前安裝好nodejs與npm,下載項目后在項目主目錄下運行npm/cnpm install拉取依賴包，然后使用 vue-cli 或者直接使用命令npm run serve，就可以啟動項目，啟動項目后需要手動全屏（按 F11）。
如何請求數據現在的項目未使用前后端數據請求，建議使用 axios 進行數據請求，在 main.js 位置進行全局配置，在 views/xx.vue 文件里進行前后端數據請求。

如何動態渲染圖表在components/echart下的文件，比如drawPie()是渲染函數，echartData是需要動態渲染的數據，當外界通過props傳入新數據，我們可以使用watch()方法去監聽，一旦數據變化就調用this.drawPie()并觸發內部的.setOption函數，重新渲染一次圖表。

如何復用圖表組件因為 Echart 圖表是根據id/class去獲取 Dom 節點并進行渲染的，所以我們只要傳入唯一的 id 值與需要的數據就可以進行復用。如中間部分的任務通過率與任務達標率組件就是采用復用的方式。

如何更換邊框邊框是使用了 DataV 自帶的組件，只需要去 views 目錄下去尋找對應的位置去查找并替換就可以，具體的種類請去 DavaV 官網查看如：

如何更換圖表直接進入 components/echart 下的文件修改成你要的 echarts 模樣，可以去echarts 官方社區里面查看案例。
Mixins 注入的問題使用 mixins 注入解決了圖表重復書寫響應式適配的代碼，如果要更換(新增)圖形，需要將echarts.init()函數賦值給this.chart，然后 mixins 才會自動幫你注入響應式功能。
屏幕適配問題本項目借助了 flexible 插件，通過改變 rem 的值來進行適配，原設計為 1920px。，適配區間為：1366px ~ 2560px，本項目有根據實際情況進行源文件的更改，小屏幕（如:寬為 1366px）需要自己舍棄部分動態組件進行適配，如'動態文字變換組件'會影響布局，需要手動換成一般節點。

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

在線咨詢

上一篇：HTML基礎教程：超鏈接的使用
下一篇：HTML5 和word互轉？這兩個熱門庫就夠了！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商