、AdminLTE:(開源免費)
https://adminlte.io/
最好的開源管理儀表板&控制面板的主題。基于Bootstrap3,AdminLTE提供了一系列的反應,可重復使用,常用的組件。是一個完全的響應式管理模板,適合從小型移動設備到大型臺式機的屏幕分辨率。這是一款國外非常優秀的后臺模板,同時有很多基于AdminLTE的模板,如roncoo-adminLTE、FastAdmin 等。
大分辨率設備
移動端設備
2、H+:(收費)
http://www.zi-han.net/theme/hplus/
H+是一個完全響應式,基于Bootstrap3.3.6最新版本開發的扁平化主題,她采用了主流的左右兩欄式布局,使用了Html5+CSS3等現代技術,她提供了諸多的強大的可以重新組合的UI組件,集成了很多功能強大的jQuery插件。
大分辨率設備
移動端設備
3、ng2-admin:(開源免費)
https://github.com/akveo/ng2-admin
一種基于Angular 2管理面板的模板,Bootstrap 4和WebPACK。它是利用一種結合TypeScript建立HTML和JavaScript,CSS,和它精美的設計。它包括視覺元素如餅圖,地圖,日歷,待辦事項,用戶訂閱,WYSIWYG編輯器和更酷的東西。
大分辨率設備
移動端設備
4、Ace Admin:(開源)
https://github.com/bopoda/ace
非常不錯的輕量級易用的admin后臺管理系統,基于Bootstrap3,擁有強大的功能組件以及UI組件,基本能滿足后臺管理系統的需求,而且能根據不同設備適配顯示,而且還有四個主題可以切換。
大分辨率設備
移動端設備
5、CoreUI:(開源免費)
https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template
coreui是UX的游戲規則。純凈透明的代碼沒有冗余部件,所以應用程序是足夠輕,提供極致的用戶體驗。這意味著在移動設備、臺式機或筆記本電腦上,導航一樣簡單和直觀。CoreUI基于Bootstrap 4,有HTML5 AJAX, HTML5 Static, AngularJS, Angular 2+, React.js 和 Vue.js共6個版本。
大分辨率設備
移動端設備
先介紹到這里,以上均為響應式模板,github開源社區上還有很多優秀的模板,就不一一介紹了,大家可以上github官網搜索需要的,上面有很多優秀的項目,如果你是開發者,強烈建議上去看看,會對你有所幫助。
在當今快速迭代的Web開發領域,構建可維護、可擴展且適應性強的用戶界面成為了每個前端工程師面臨的挑戰。隨著項目規模的擴大和團隊成員的增加,如何確保代碼的一致性、提升組件的重用率,以及加快新成員的融入速度,成為提升開發效率的關鍵因素。正是在這樣的背景下,BEM(Block Element Modifier)這一革命性的前端開發方法論應運而生。
BEM(Block Element Modifier)是一種前端開發中用于組織CSS類名的命名約定,由Yandex公司提出。該方法論旨在提高代碼的可維護性、可擴展性和團隊協作效率,尤其適用于大型項目和組件化開發。BEM的核心理念圍繞著三個基本概念展開:
這一模塊是抖音應用中的常用功能(function),所以我們可以命名為dy-fc
總體布局可以分為上下兩部分,我們可以將頂部模塊當成頭部命名為dy-fc__hd
而下面的各個功能的模塊我們當作身體命名為dy-fc__bd
將頂部模塊中的標題模塊命名為dy-fc__title
將下面每個功能模塊命名為dy-fc__item
<div class="dy-fc">
<div class="dy-fc__hd">
<span class="dy-fc__title">常用功能</span>
</div>
<div class="dy-fc__bd">
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">我的錢包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">券包</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">小程序</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">觀看歷史</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">內容偏好</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">離線模式</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">設置</p>
</a>
<a href="#" class="dy-fc__item">
<img src="" alt="">
<p class="dy__desc">稍后再看</p>
</a>
</div>
</div>
首先重置默認樣式
* {
margin: 0;
padding: 0;
}
接著我們給整個界面設為暗白色,初始化<a>標簽
body {
background-color: rgba(211, 209, 209, 0.25);
}
a{
text-decoration: none;
}
然后我們設置一下整個模塊的樣式:
設置寬占比為94%,
設置外邊距為10px并居中
將背景顏色設為白色
調整邊角弧度
.dy-fc {
width: 94%;
margin: 10px auto;
background-color: #fff;
border-radius: 10px;
}
再然后是設置頭部模塊和標題
.dy-fc__hd {
padding: 10px;
}
.dy-fc__title {
font-size: 18px;
font-weight: bold;
}
繼續是身體模塊
我們將其設置為彈性容器并定義換行屬性,使容器內的元素能夠按行或列排列,并且可以自動換行、自動調整元素的位置和大小。它使得布局更加靈活和方便。
.dy-fc__bd {
padding: 10px;
display: flex;
flex-wrap: wrap;
}
隨后是各個功能模塊,我們將寬度設置為33%,使得三個為一行
.dy-fc__item {
width:33%;
text-align: center;
line-height: 2.1em;
color: black;
padding-bottom: 10px;
}
再然后就是圖片和底部文字的樣式啦
img {
width: 30px;
height: 30px;
}
.dy__desc {
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
}
在實際應用中,可以根據項目規模和需求靈活調整BEM的嚴格程度,例如引入簡寫規則或使用工具自動處理類名生成。 結合現代前端框架和工具(如Vue、React的CSS Modules或SASS的嵌套規則)可以進一步簡化BEM的編寫過程,同時保持其核心優點。
BEM不僅僅是一種命名方式,更是一種思維方式,它幫助開發者從模塊化和可維護性的角度去設計和構建界面,是現代前端開發不可或缺的一部分。
是比較全的合集,送給大家,資源獲取在文末(有驚喜哦),這次福利很大,趕快關注哦(資源限時開放....)!
layui(諧音:類UI) 是一款采用自身模塊規范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。layui 首個版本發布于2016年金秋,她區別于那些基于 MVVM 底層的 UI 框架,卻并非逆道而行,而是信奉返璞歸真之道。準確地說,她更多是為服務端程序員量身定做,你無需涉足各種前端工具的復雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這里信手拈來。
大家有機會多支持閑心。。。。
不過后臺UI是要授權的哦
DWZ富客戶端框架(jQuery RIA framework),是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。
比較成熟,應用比較廣泛,官網有整合的應用可以借鑒
B-JUI客戶端框架(Best jQuery UI),是基于Bootstrap樣式及jQuery庫實現的Ajax RIA開源框架。
B-JUI客戶端框架擴展方便、簡單易用,很多情況下只要熟悉HTML語法,使用HTML屬性就可以輕松用Ajax開發項目。對于javascript不太熟悉的程序員是非常方便的,他們只需要關注后端業務邏輯的實現就行了,前端頁面上只需要簡單的寫點HTML代碼。
本框架基于Bootstrap前端樣式及jQuery庫開發,提供豐富的各類組件及UI,封裝有多種組件,及相關的Ajax請求調用,并且都以jQuery標準插件的方式組合在一起,所以非常方便進行二次開發或再擴展。
兼容性:
H+是一個完全響應式,基于Bootstrap3.3.6最新版本開發的扁平化主題,她采用了主流的左右兩欄式布局,使用了Html5+CSS3等現代技術,她提供了諸多的強大的可以重新組合的UI組件,并集成了最新的jQuery版本(v2.1.4),當然,也集成了很多功能強大,用途廣泛的jQuery插件,她可以用于所有的Web應用程序,如網站管理后臺,網站會員中心,CMS,CRM,OA等等,當然,您也可以對她進行深度定制,以做出更強系統。
提醒:是收費的
H-ui.admin是用H-ui前端框架開發的輕量級網站后臺模版 采用源生html語言,完全免費,簡單靈活,兼容性好 讓您快速搭建中小型網站后臺,拿來即用。
jQuery MiniUI - 專業WebUI控件庫。
它能縮短開發時間,減少代碼量,使開發者更專注于業務和服務端,輕松實現界面開發,帶來絕佳的用戶體驗。
jQuery MiniUI致力降低企業應用的開發成本,豐富的UI控件、高度的穩定性、強大的擴展能力和平滑的版本升級能力,可滿足大部分業務場景需求。
缺點:收費的!
請輸入描述
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創建現代化,互動,JavaScript應用程序,提供必要的功能。
使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。
easyui是個完美支持HTML5網頁的完整框架。
easyui節省您網頁開發的時間和規模。
easyui很簡單但功能強大的。
b-jui的作者基于easyui開的的,比easy調用簡單,很不錯的UI,可惜收費,不過不算太貴
TopJUI基于最新版EasyUI構建,在使用TopJUI的過程中,除了可以使用TopJUI提供的組件功能外,你還可以根據實際情況調用EasyUI的原生組件功能,滿足各種復雜的業務功能需求開發
Amaze UI 以移動優先(Mobile first)為理念,從小屏逐步擴展到大屏,最終實現所有屏幕適配,適應移動互聯潮流。
組件豐富,模塊化Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件,更有多個包含不同主題的 Web 組件,可快速構建界面出色、體驗優秀的跨屏頁面,大幅提升開發效率。
不過這個模板現成的東西比較少,復雜功能還需要自己去完善
Win10-UI是一款win10風格的后臺UI框架。它使用了豐富的win10桌面元素,包括桌面圖標、窗口化子頁面管理、開始菜單、動態小磁貼等組件,兼容主流現代瀏覽器及移動端的屏幕尺寸,適合快速開發后臺管理系統的前端界面。
風格不一樣,還是挺不錯的
Ace Admin,Metronic等等
今天小編就分享到這里
如果你是初級程序員可以研究別人的代碼提高技術,如果你喜歡搞網盟或者外包,可以讓你快速建站,還等什么趕快關注吧,我們會持續輸出相關資源
資源來自互聯網 僅供學習研究之用,不得用于商業,請在24小時內刪除!
版權歸原作者及其公司所有,如果你喜歡,請購買正版。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。