程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> 從零開始,搭建博客系統MVC5+EF6搭建框架(4)上,前後台頁面布局頁面實現,介紹使用的UI框架以及JS組件,mvc5ef6

從零開始,搭建博客系統MVC5+EF6搭建框架(4)上,前後台頁面布局頁面實現,介紹使用的UI框架以及JS組件,mvc5ef6

編輯:關於.NET

從零開始,搭建博客系統MVC5+EF6搭建框架(4)上,前後台頁面布局頁面實現,介紹使用的UI框架以及JS組件,mvc5ef6


一、博客系統進度回顧以及頁面設計

1.1頁面設計說明

    緊接前面基礎基本完成了框架搭建,現在開始設計頁面,前台頁面設計我是模仿我博客園的風格來設計的,後台是常規的左右布局風格。

1.2前台頁面風格

    主頁面:

技術博客風格:

詳情頁風格:

詳情頁留言風格:

1.3後台風格:

表格風格:

博客發布風格:

以上看到的系統頁面是目前系統完成的風格,以後頁面設計都參考這些頁面風格。

二、使用前端web框架以及插件說明

2.1選擇前端web框架,我找了很多框架,以前學過自學過bootstrap覺得對於沒有前端web設計經驗的我來說很方便,就在極客學院自學了前端,然後找了一些相關的前端免費教程看了一下,慕課網也有部分,但是學了bootstrap感覺這只是前端主題風格但是有些細節組件方面還是欠缺,好多都要用到國外的bootstrap風格的插件,還是有些麻煩,這裡總結幾個我自己找個webUI框架供大家參考:

2.1.1妹子UI

是國內比較優秀的ui框架但是我覺得裡面的風格不是很喜歡,主要是它的左側菜單不喜歡以及整體語法,雖然是借鑒了bootstrap的使用方法,但是命名還是要去熟悉一下。

官網:http://amazeui.org/

2.1.2 H-UI

一開始看的時候覺得還不錯,但是發現好久沒更新了,是一個前端大牛自己弄的,號稱是最適合國內開發風格的前端UI

官網:http://www.h-ui.net/

2.1.3 uikit

感覺跟bootstrap差不多的國外的,但是模板沒有bootstrap多,大概看了一下,就沒用了,也是組件問題,感覺要找起來麻煩。

官網:http://www.getuikit.net/index.html

2.1.4 拼圖UI

界面還是蠻不錯的,但是也是兩個web前端大牛弄得,群裡問過好像會自己更新,但是感覺速度還是跟不上,畢竟人家也要工作不是全職做這個。

官網:http://www.pintuer.com/

2.1.5 淘寶SUI

這個前端框架還是有移動版,目前移動版比PC版要更新快點,但是PC版很久沒更新了,我發過郵件給淘寶找個UI的相關人員,他們說還是做版本更新,但是從14年到現在沒什麼消息,所以就放棄了。

官網:http://sui.taobao.org/sui/docs/index.html

2.1.5 ZUI

這個是我目前找到感覺還不錯的一個,因為語法跟bootstrap幾乎一樣的,而且也是一個青島的公司開發的,組件也夠用,是在bootstrap基礎上深度定制的,風格也感覺清爽,還有移動端今年剛出的,本系統也是用這個WebUI。

官網:http://zui.sexy/

2.1.6 layui

另外還要介紹一個可能會在國慶之後推出1.0版本的webUI框架layui,這個是layer的作者賢心大神,目前已經全職開發的,也是我很期待的,等正式出來就拿來用一下,賢心作品值得期待。

官網:http://www.layui.com/

2.2 前端框架選擇完了之後,就開始選擇各種插件,組件了。

2.2.1 表格:DataTables

目前用到的表格是DataTables插件,很強大的一個js組件。

官網:http://datatables.club/

2.2.2 圖表:Echarts

這是百度推出的圖表組件很漂亮的,3.0是對移動端做了大量支持。

官網:http://echarts.baidu.com/

2.2.3 時間組件:jeDate

jeDate是我找到感覺國內最好看的,作者也一直在更新的一個時間js組件,很不錯,功能也很強大。

官網:http://www.jayui.com/jedate/

2.2.4 js分頁組件:laypage

這是賢心作品的分頁組件,感覺還不錯,以後應該還會跟著layui一起更新的。

官網:http://laypage.layui.com/

2.2.5 左側菜單組件:metisMenu

這是找個國外的一個,js左側菜單組件,風格跟ZUI很搭配。

官網:http://mm.onokumus.com/

2.2.5 富文本js組件:wangEditor

本來用UEditor或者kindeditor但是覺得這兩個也好久沒跟新了,就找到了wangEditor,作者一直都在更新維護,很不錯,也很好看。

官網:http://www.wangeditor.com/

 

   以上是就是目前系統中使用的前端頁面設計使用的UI框架以及使用到的js組件,我找這些前端ui框架以及js組件主要是看是否還有人員在維護,因為我覺得現在浏覽器一直都在做版本更新,一定要找一個有人維護的,這樣才能讓系統在新的浏覽器上運行,不出錯。

  其實我找這些,找了好久,我也是一個很糾結的人,到底用那個,選擇了半天。

下一篇就是介紹目前博客系統功能上的實現,以及MVC布局頁面的使用,謝謝,大家支持,有什麼問題可以給我留言,我會改正的。

  PS:所有的前端ui框架以及js組件版權全是原始開發作者所有,我這裡只是介紹,本系統用到了哪些,以後用到了還會繼續補充。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved