前端開發：5款Bootstrap響應式后臺管理模板，兼容不同屏幕分辨率

、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

BEM（Block Element Modifier）是一種前端開發中用于組織CSS類名的命名約定，由Yandex公司提出。該方法論旨在提高代碼的可維護性、可擴展性和團隊協作效率，尤其適用于大型項目和組件化開發。BEM的核心理念圍繞著三個基本概念展開：

1. Block（區塊）

定義：一個Block是頁面上的一個獨立功能單元或者一個可復用的組件。它能夠獨立存在并完成一定的功能，比如導航欄、卡片、按鈕等。
命名示例：.header、.form、.product-grid

2. Element（元素）

定義：Block內的組成部分，沒有獨立的意義，依賴于其所屬的Block。Elements不能脫離Block單獨使用。
命名示例：.header__logo、.form__input、.product-grid__item
規則：Element名稱通過雙下劃線__連接到其所屬的Block名稱，表明了Element與Block之間的歸屬關系。

3. Modifier（修飾符）

定義：用于描述Block或Element的不同狀態或變體，比如顏色變化、大小變化、激活狀態等。
命名示例：.button--primary、.list-item--selected、.modal--open
規則：Modifier名稱通過兩個連字符--附加到Block或Element名稱之后，用來表示狀態或樣式的變化。

BEM的優勢

提高可維護性：清晰的命名規則使得代碼易于理解和維護，即使是新加入項目的開發者也能快速定位和修改樣式。
便于復用：Block的高內聚低耦合特性支持跨項目復用，Element和Modifier的靈活性允許在不同上下文中調整樣式。
減少選擇器的嵌套：鼓勵扁平化的CSS結構，減少因過度嵌套而導致的性能問題和選擇器的復雜度。
促進團隊協作：統一的命名規則減少了溝通成本，團隊成員可以遵循相同的編碼規范，協同工作更加高效。

了解了BEM的命名規范，我們來實戰一下！

我們來試著寫一寫這個抖音的界面

我們先來分析一下這個界面：

這一模塊是抖音應用中的常用功能（function），所以我們可以命名為dy-fc

總體布局可以分為上下兩部分，我們可以將頂部模塊當成頭部命名為dy-fc__hd

而下面的各個功能的模塊我們當作身體命名為dy-fc__bd

將頂部模塊中的標題模塊命名為dy-fc__title

將下面每個功能模塊命名為dy-fc__item

這樣我們就該界面分析完了，并以BEM的命名規范進行命名

開始寫代碼！

<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不僅僅是一種命名方式，更是一種思維方式，它幫助開發者從模塊化和可維護性的角度去設計和構建界面，是現代前端開發不可或缺的一部分。

附源代碼：

是比較全的合集，送給大家，資源獲取在文末（有驚喜哦），這次福利很大，趕快關注哦（資源限時開放....）！

1，layui/ layuiAdmin

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

大家有機會多支持閑心。。。。

不過后臺UI是要授權的哦

2，dwz富客戶端框架 - jUI

DWZ富客戶端框架(jQuery RIA framework)，是中國人自己開發的基于jQuery實現的Ajax RIA開源框架。 DWZ富客戶端框架設計目標是簡單實用、擴展方便、快速開發、RIA思路、輕量級。

比較成熟，應用比較廣泛，官網有整合的應用可以借鑒

DWZ框架 + ThinkPHP 實現小組工作日志系統
dwz4j企業級Java Web快速開發框架(Hibernate+Spring+Struts2) + jUI整合應用
dwz4j企業級Java Web快速開發框架(Mybatis + SpringMVC) + jUI整合應用
ThinkPHP + jUI整合應用
Zend Framework + jUI整合應用
YII + jUI整合應用

3，B-JUI 前端管理框架

　B-JUI客戶端框架(Best jQuery UI)，是基于Bootstrap樣式及jQuery庫實現的Ajax RIA開源框架。

B-JUI客戶端框架擴展方便、簡單易用，很多情況下只要熟悉HTML語法，使用HTML屬性就可以輕松用Ajax開發項目。對于javascript不太熟悉的程序員是非常方便的，他們只需要關注后端業務邏輯的實現就行了，前端頁面上只需要簡單的寫點HTML代碼。

本框架基于Bootstrap前端樣式及jQuery庫開發，提供豐富的各類組件及UI，封裝有多種組件，及相關的Ajax請求調用，并且都以jQuery標準插件的方式組合在一起，所以非常方便進行二次開發或再擴展。

兼容性：

IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未詳細測試，估計問題不大，但一些CSS3的效果就不要想了，如圓角、動畫什么的）
本框架不適用于需要兼容IE6、7的開發者或使用者。
PS. 未考慮兼容IE6和IE7，一是因為Bootstrap3.2不支持，二是因為目前主流系統已是WIN7(IE8+)，三是帶WebKit內核的瀏覽器大量出現，如360瀏覽器、搜狗瀏覽器、百度瀏覽器等。

H+ 后臺主題UI框架

H+是一個完全響應式，基于Bootstrap3.3.6最新版本開發的扁平化主題，她采用了主流的左右兩欄式布局，使用了Html5+CSS3等現代技術，她提供了諸多的強大的可以重新組合的UI組件，并集成了最新的jQuery版本(v2.1.4)，當然，也集成了很多功能強大，用途廣泛的jQuery插件，她可以用于所有的Web應用程序，如網站管理后臺，網站會員中心，CMS，CRM，OA等等，當然，您也可以對她進行深度定制，以做出更強系統。

提醒：是收費的

H-ui.admin

H-ui.admin是用H-ui前端框架開發的輕量級網站后臺模版采用源生html語言，完全免費，簡單靈活，兼容性好讓您快速搭建中小型網站后臺，拿來即用。

jQuery MiniUI_快速Web開發

jQuery MiniUI - 專業WebUI控件庫。

它能縮短開發時間，減少代碼量，使開發者更專注于業務和服務端，輕松實現界面開發，帶來絕佳的用戶體驗。

jQuery MiniUI致力降低企業應用的開發成本，豐富的UI控件、高度的穩定性、強大的擴展能力和平滑的版本升級能力，可滿足大部分業務場景需求。

缺點：收費的！

請輸入描述

EasyUI

easyui是一種基于jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

大家百度去官網下載即可

TOP-JUI

b-jui的作者基于easyui開的的，比easy調用簡單，很不錯的UI，可惜收費，不過不算太貴

TopJUI基于最新版EasyUI構建，在使用TopJUI的過程中，除了可以使用TopJUI提供的組件功能外，你還可以根據實際情況調用EasyUI的原生組件功能，滿足各種復雜的業務功能需求開發

Amaze UI 后臺管理模板

Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。

組件豐富，模塊化Amaze UI 含近 20 個 CSS 組件、20 余 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅提升開發效率。

不過這個模板現成的東西比較少，復雜功能還需要自己去完善

LigerUI

使用簡單，輕量級
控件實用性強，功能覆蓋面大，可以解決大部分企業信息應用的設計場景
快速開發，使用LigerUI可以比傳統開發減少極大的代碼量
易擴展，包括默認參數、表單/表格編輯器、多語言支持等等
支持Java、.NET、PHP等web服務端
支持 IE6+、Chrome、FireFox等瀏覽器
開源，源碼框架層次簡單易懂。

win10-UI

Win10-UI是一款win10風格的后臺UI框架。它使用了豐富的win10桌面元素，包括桌面圖標、窗口化子頁面管理、開始菜單、動態小磁貼等組件，兼容主流現代瀏覽器及移動端的屏幕尺寸，適合快速開發后臺管理系統的前端界面。

風格不一樣，還是挺不錯的

國外還有很多 bootstrap 后臺UI

Ace Admin，Metronic等等

今天小編就分享到這里

評論回復相關需求，小編會第一時間私信您

或者私信回復“后臺UI”，自動獲取資料，都是小編的血汗哦，本資源只開放一段時間，趕快獲取哦（是私信不是評論哦，評論無法自動回復）

如果你是初級程序員可以研究別人的代碼提高技術，如果你喜歡搞網盟或者外包，可以讓你快速建站，還等什么趕快關注吧，我們會持續輸出相關資源

資源來自互聯網僅供學習研究之用，不得用于商業，請在24小時內刪除！

版權歸原作者及其公司所有，如果你喜歡，請購買正版。

在線咨詢

上一篇：WordPress 網站全方位速度優化：HTML JS CSS等
下一篇：「CSS」將多個div元素并列為一行的方法

您的項目需求

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

整合營銷服務商

前端開發：5款Bootstrap響應式后臺管理模板，兼容不同屏幕分辨率

言

正文

什么是BEM

1. Block（區塊）

2. Element（元素）

3. Modifier（修飾符）

BEM的優勢

了解了BEM的命名規范，我們來實戰一下！

我們來試著寫一寫這個抖音的界面

我們先來分析一下這個界面：

這樣我們就該界面分析完了，并以BEM的命名規范進行命名

開始寫代碼！

這個界面基本的結構就是這樣的，然后我們來寫一下它的樣式

這樣我們就完成了抖音常用功能的實戰頁面

上圖片！

總結

附源代碼：

1，layui/ layuiAdmin

2，dwz富客戶端框架 - jUI

3，B-JUI 前端管理框架

H+ 后臺主題UI框架

H-ui.admin

jQuery MiniUI_快速Web開發

EasyUI

TOP-JUI

Amaze UI 后臺管理模板

LigerUI

win10-UI

國外還有很多 bootstrap 后臺UI

評論回復相關需求，小編會第一時間私信您

或者私信回復“后臺UI”，自動獲取資料，都是小編的血汗哦，本資源只開放一段時間，趕快獲取哦（是私信不是評論哦，評論無法自動回復）

您的項目需求