基于Boostrap的H+ 后台主题UI框架（开源）

目录

H+ 后台主题 UI 框架

H+的布局及几种常用UI组件

---

H+ 后台主题 UI 框架

H+是一款常用后台主题UI框架。首发于 2013 年，由 Zihan's Blog 开发并维护，属于国内早期做中后台 UI 框架的产品，在国内拥有广泛的用户基础。由于作者自身原因，该框架已停止维护，现由官方采用 MIT 协议面向社区开源。

H+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.4)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。

gitee开源地址：

https://gitee.com/hplus_admin/hplus

在线演示：

https://hplus_admin.gitee.io/hplus/

---

H+的布局及几种常用UI组件

H+ 后台主题UI框架 提供两种主要布局：上下式布局和左右式布局（如下图）。其中左右式布局是比较经典的布局，主要用到了以下几个组件：折叠菜单(Collapse menu) 、滚动菜单栏(Scroll navbar) 、固定顶部菜单栏(Top fixed navbar) 、盒式布局(Boxed layout)。

以下为折叠菜单(Collapse menu)组件的主要代码：

<!--左侧导航开始-->
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="nav-close"><i class="fa fa-times-circle"></i></div>
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element">
                        <span><img alt="image" class="img-circle"  src="img/profile_small.jpg" /></span>
                        <span class="clear">
                            <span class="text-muted text-xs block">超级管理</span>
					    </span>
					</div>
				</li>
				<li>
					<a class="J_menuItem" href="javascript:void(0)"><i class="fa fa-columns"></i> <span class="nav-label">商品管理</span></a>
				</li>
			</ul>
		</div>
	</nav>
<!--左侧导航结束-->